Must-read for beginners: What is CSS? What is DIV-CSS?

May 04, 2021 CSS

1. What basics should you have before learning css?

2. What is CSS?

3. How to use CSS

4. the basis of css syntax

5. what div-css is

6. div is what it is

7. div syntax

8. Why replace table with div-css

9. How do I learn the DIV-CSS layout? Introduction to basic processes and examples

Many new school friends start learning CSS after learning HTML, and often encounter div-css in their studies, but don't know what that means. A lot of information on the Internet says that div is the replacement of table, and search engines like div, more easily included by search engines, anyway, a lot. B ut what exactly does div-css (or div) mean? W hy use it? W hy don't you use table? S o let's take a look at what css is, and then let's take a look at what div-css is. css is short for Cascading Style Sheets (Cascading Style Sheets), a markup language that does not require compilation and can be executed directly by the browser (which is a browser interpreter language).

Must-read for beginners: What is CSS? What is DIV-CSS?

What basics should you have before learning css?

1. What is a web page and what is hyper-text language (html).

2. Web editors that are commonly used, such as Dreamweaver, are used.

Dreamweaver is one of the best website editing tools available today, and Dreamweaver8 adds support for css that you can easily use to make css style sheets for web pages simpler and easier.

What is CSS?

CSS is Cascading Style Sheets, Chinese translated into Cascading Style Sheets, or Style Sheets for short, as a new technique for making Web pages.

Web design was originally designed to define page documents and formats with HTML tags, such as the title, the paragraph, the paragraph, the table, the link, the link, and so on, but these tags did not meet more document style needs, and in order to solve this problem, HTML4 was promulgated by the World Wide Web Consortium in 1997 T he standard also announced the first standard CSS1 for style sheets, which have been enriched since the CSS1 release and the CSS2 version in May 1998. W3C implements DHTML (Dynamic HTML) in three parts: scripting languages (including JavaScript, Vbscript, etc.), browsers that support dynamic effects (including Internet Explorer, Netscape Navigator, and so on), and CSS style sheets.

How to use CSS

css cascade styles, cascades refer to the style of the superior label that is


     <body>

of its sub-labels, such as the font style

<p>

set for the label selector set for the .


     <body>

<p>

css semantic naming refers to the class or id that is attached to the html tag with an easy-to-understand


      <div>

name, such as the


      footer


      <div>

at the top of the page, which can be set to


      header

id

Basically cascading means "inheritance," "weight," "override," with better results, less code, and more functionality through good hierarchical naming

Let's write this, for example, in one of the following codes:

<div class="h2">这是区块标题</div>

<div class="bd">这是区块内容</div>

<div>

With CSS styles, there are usually three methods: adding styles directly from the <style> the page header, and calling in the form of a link. W here elements add styles directly with the highest priority, second from the head of the page, and CSS styles with links outside.

You can insert a .lt;STYLE>... between the <HTML> the <BODY> tags of your HTML document. t he object of the block. H ere's an example:

<html>

<head>

<!--

body {font: 10pt "Arial"}

h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon;}

h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue;}

p {font: 10pt/12pt "Arial"; color: black;}

-->

</style>

</head>

Note that the type property of the style object is set here to text/css, which allows browsers that do not support this type to ignore style forms.

Must-read for beginners: What is CSS? What is DIV-CSS?

the basis of css syntax

The definition of CSS consists of three parts: selector, property, and value of property.

The basic format is as follows:

selector {property: value;}

(Selector (Property: Value))

Selectors can take many forms, typically HTML tags that you want to define styles, such as body, p, table..., and you can define its properties and values in this way, separated by colons:

body {color: black;}

The


      body

to the main part of the


      color

the property that controls the color of the text,


      black

is the value of the color, and the effect of this example is to make the text on the page black.

If the value of a property is composed of multiple words, you must quote the value, such as the name of a font is often a combination of several words:

p {font-family: "sans serif";}

(Define paragraph font as sans serif)

If we need to specify more than one property for a selector, we use a sign to separate all properties from the values:

p {text-align: center; color: red;}

(The paragraph is centered; and the text in the paragraph is red)

To make the style sheets you define easy to read, you can use the writing format of the branch:

{ text-align: center;

color: black;

font-family: arial; }

(The paragraphs are centered, the Chinese the paragraphs are black, and the font is arial)

2. Selector group

You can combine selectors with the same properties and values and separate selectors with commas, which reduces style duplication of definitions:

h1, h2, h3, h4, h5, h6 { color: green; }

(This group includes all the title elements, each of which has green text)

p, table{ font-size: 9px; }

(The size of the text in paragraphs and tables is 9 words)

The effect is exactly equivalent to:

p { font-size: 9pt; }

table { font-size: 9pt; }

3. Class selector

With class selectors you can define different styles with the same element classification, and when you define class selectors, add a dot before the name of the class. I f you want two different paragraphs, one aligned to the right and one paragraph centered, you can define two classes first:

p.right {text-align: right;}

p.center {text-align: center;}

Then use a class parameter that you define that is not in a different paragraph, as long as you add it to the HTML tag:

<p class="right"> 这个段落向右对齐的

</p>

This paragraph is amazed in place.

</p>

Note: The name of a class can be any English word or a combination of numbers that begin in English and is generally briefly named for its function and effect.

Class selectors also have a usage of omitting HTML tag names from selectors so that several different elements can be defined as the same style:

.center {text-align: center;}

(Define.center's class selectors are centered in text)

Such classes can be applied to any element. L et's classify both the h1 element (title 1) and the p element (paragraph) as "center" classes, so that the styles of both elements follow the ".center" class selector:

This title is in place.

</h1>

This paragraph is also alive.

</p>

Note: This class selector, which omits HTML tags, is our most commonly used CSS method, which makes it easy to apply predefined class styles to any element.

4. ID selector

The ID parameter specifies a single element in the HTML page, and the ID selector is used to define a separate style for that single element. T he application of the ID selector is similar to the class selector, as long as you change class ID. R eplace the class in the example above with an ID:

This paragraph is right to right

</p>

Define the ID selector to add an hashtag before the

name. L ike class selectors, there are two ways to define the properties of an ID selector. I n the following example, the ID property will


       id="intro"

#intro

{font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent; }

(The font size is 110% of the default size; bold; blue; the background color is transparent)

In the following example, the ID property matches


      id="intro"

p#intro

{font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent; }

Must-read for beginners: What is CSS? What is DIV-CSS?

5. Contains a selector

A style sheet that contains a relationship definition for an element alone, element 1 contains element 2, which defines only element 2 in element 1, and no definition of individual element 1 or element 2, for example:

table a

{font-size: 12px;}

The link within the table changes style, the text size is 12 pythons, and the text of the link outside the table is still the default size.

6. The cascade of style sheets

Cascading is inheritance, and the inheritance rule for style sheets is that external element styles are preserved to inherit other elements contained in that element. I n fact, all elements nested in an element inherit the property values specified by the outer element, sometimes overlaying many layers of nested styles unless otherwise changed. F or example, nesting a P tag in a DIV tag:

div { color: red; font-size:9pt;}

……

<div>

<p>

This paragraph text is a red 9 word

</p>

</div>

(The contents of the P element inherit the properties defined by the DIV)

Note: In some cases, internal selectors do not inherit values around selectors, but in theory these are special. F or example, the upper boundary property value is not inherited, and intuitively, a paragraph does not have the same top boundary value as the document BODY.

In addition, when style sheet inheritance encounters a conflict, the last defined style always prevails. I f the color of P is defined in the example above:

div { color: red; font-size:9pt;}

p {color: blue;}

……

<div>

<p>

This paragraph text is blue 9 word

</p>

</div>

We can see that the text size of the paragraph is 9 and inherits the div property, while the color property follows the last definition.

When different selectors define the same elements, consider the priority between the different selectors. I D selectors, class selectors, and HTML tag selectors, because ID selectors are the last plus element, so the highest priority, followed by the class selector. I f you want to go beyond the relationship between the


       !important

to elevate the priority of style sheets, such as:

p { color: #FF0000!important; }

.blue { color: #0000FF;}

#id1 { color: #FFFF00;}

We add these three styles to a paragraph on the page at the same time, and it ends up in red text based on the HTML tag selector style affirmed by


       !important

I f you remove


       !important

the ID selector with the highest priority is yellow text.

7. Comments

You can insert comments in CSS to explain what your code means, and comments help you or others understand what your code means when you edit and change it later. I n the browser, comments are not displayed. T he CSS comment

/*

ends

*/

as follows:

/ * Define paragraph style sheet * /

{

Text-align: center; / * text ranks in text * /

Color: Black; / * text is black * /

Font-family: arial; / * font is arial * /

}

what div-css is

Explain in a word: div is the frame, css is the style, used to decorate the frame. J S lets them move. M ore detailed point, div is to give the entire page layout, css is responsible for controlling the style of div, want div where how to display, can be achieved through css, simply say the page layout is like building a house, div is responsible for building this house, and css is responsible for telling him how to build!

div is what it is

1, DIV is one of the commonly used labels in html, such as span, table, h1 and so on

2, in HTML DIV tags we use the most, representative

3, div with css class, layout out the web page

div syntax

the content of
"divcss5" and contents</div>
"divcss5" & content .

Why replace table with div-css

Once upon a time, web engineers used table to lay out pages (and now apps like Google's picasa can find examples of table layout applications), and now most of the page layouts recommend the div-css approach.

In WEB front-end development, the three troikas of HTML, CSS, and JS represent structure, presentation, and interaction. In the era of web 1.0, the logic of the page is not particularly complex, the user experience requirements are not very high, table is used by a large number of developers to do layout elements, across the structure and display of two parts, is very "heavy".

But decoupling the three is necessary in today's increasingly complex web front-end logic and increasingly demanding user experience. A t this point, it is not appropriate to use table to do the layout, because the language of the table label is not used to make the layout at all, but to pass the data. T he idea that div-css is in line with decoupling, div is used to control the layout, and css is used to control the style. The benefits are that the entire page is organized more rationally and less couplingly, and is more in-depth division of labor and complex collaboration for front-end development.

The so-called div-css refers to the layout of the div controlled by css. I n fact, here div can be understood as a general term, the practical application is not only div, but also p, span, img, table and other node positioning can be controlled by css.

A brief comparison:

1, div-css is more flexible than table, with table layout, bloated code.

2, semantic problems. S emantically, table should be just a container for table data, not a tool for layout.

3, style rendering problems. T able layout to wait until all the content is loaded before rendering the style, if the user network speed is not good, so the user experience will be very poor.

Must-read for beginners: What is CSS? What is DIV-CSS?

Table of contents

What basics should you have before learning css?

What is CSS?

How to use CSS

the basis of css syntax

what div-css is

div is what it is

div syntax

Why replace table with div-css

How do I learn the DIV-CSS layout? Introduction to basic processes and examples

Cookie Consent