Explanation:

　DIV CSS is a web design standard and a web page layout method. Different from the traditional positioning method through table layout, it can realize the separation of web page content and presentation. "DIV CSS" is actually a wrong name, and the standard name should be XHTML CSS. Because DIV and table are both marks in XHTML or HTML language, and CSS is just a form of expression.

Method:

Add CSS to the HTML document. css is the abbreviation of Cascading Style Sheets (Cascading Style Sheets), which is used to define the display form of HTML elements. It is a standard technology for formatting web content introduced by W3C. One of the techniques that web designers must master.

Development:

1. Put the style definition in a separate file, for example: create a new style definition with the suffix CSS.

Element {Attribute color: value red;} Use the tag in the head section,

Quotation syntax:

2. Embedded style sheet:

4. Inline style sheet:

Write it in the opening tag. For example, if you want H1 to turn red,

turn to red

Summary: Three For style sheets, external style sheets are preferred, embedded style sheets are used for debugging, and inline style sheets are generally not used.

5. Style rules:

A style rule consists of a selector followed by a declaration block. The declaration block is a large container consisting of the part between curly braces and the space in the middle of the declaration block. will be ignored. The declaration block consists of declarations one by one. The declaration consists of attributes and values. The attributes and values are separated by colons and terminated by semicolons. Each declaration can only have one attribute. If the attribute value contains spaces, use For example, enclosed in double quotes, there can be multiple declarations within a declaration block, and each declaration is separated by a semicolon.

Selector

Declaration Block

Select an element

Declaration { }

Attribute: value;

Start with colon and end with semicolon

6. Note: The relevant details are explained in detail.

7. Selector grouping

When several selectors share a statement, they can be grouped together. Each selector must be separated by a comma. Example: h1, h2, h3, h4 { color red;} When grouping selectors, each selector path must be written in full, and there cannot be a comma at the end of the group.

Example: Incomplete path: #maincontent p, ul{ border-top:1pxsolid #ddd;}

Correct writing: #maincontent p, #maincontent ul{ border-top:1pxsolid #ddd ;}

Example: There is an extra comma at the end: .a1 p, .a1 ul,{color:red;}

8. Selector

Element selector: Syntax format: Element {color: blue;}

Class selector: Syntax format: .class name{attribute: value;}

ID selector: #id name{attribute: value; } ID names cannot be repeated

Wildcard selector: syntax format: *{property: value;}

Pseudo class selector:

Pseudo class selector can be used in different ways Four different states of the formatted hyperlink element: write in the following order; (memory method: a Love or Hate)

a:link is a selector used for unvisited links

a:visited is the selector used for visited links

a:hover is the selector used for links on which the mouse cursor is placed

a:active Is the selector used for the link that gets focus (for example, clicked)

If necessary, we can combine these states and write them in order:

a:link, a:visited { color :blue;}

a:hover, a:active { color :blue;}

9. Pseudo-element selector

Standard selector cannot be formatted The first letter or first line of an element's content, and the pseudo-element selector can implement:

All browsers support two types: :first-line and :first-letter

Example: the first line of the paragraph: p: first-line {attribute: value;}

Example: the first letter of the paragraph: p: first-letter {attribute: value;}

Priority:

The so-called CSS priority refers to the order in which CSS styles are parsed in the browser.

Inline style (inline style) > ID selector > class selector (class), pseudo-class (pseudo-class) and attribute * (attribute) selector > category (type), pseudo Object (pseudo-element).

Usage misunderstanding:

1. The rationality of DIV CSS is that it can carry out unified design and management of web pages. Through a style sheet, it affects the whole body. As long as the style sheet is modified, the style of the entire site can be unified. If it is a separate page Make a style sheet, or just make a style sheet for a div, without a global design concept, then the design method of this div CSS is completely unnecessary and even becomes a burden;

2. Use DIV CSS like Table , endless nesting, its effect is no different from Table design, it will not bring about search engine optimization effect, but will increase the burden on the page;

3. Respect Div CSS, but do not consider compatibility , TABLE design has a long history and is widely supported by browsers, so the display effect is very good and there will be no misalignment. However, DIV CSS will cause page misalignment in some browsers, so you should also be careful when designing. Make changes and debug to account for different browsers.

Function:

1. Streamlined code, using DIV CSS layout, streamlined page code, I believe everyone who knows XHTML knows this. Watch more HTML tutorial content. Code simplification improves the crawling efficiency and effectiveness of Baidu Spider, which can crawl the entire page in the shortest time. At the same time, this has certain benefits for the collection quality;

2. Improve access speed and increase user experience

greatly improves the loading speed, so the waiting time for users to click on the page will be less. The increase in user experience will result in the website being liked by search engines, thereby improving the website ranking.

3. The structure of div css is clear and easy to be searched by search engines. It is naturally suitable for optimizing seo, reducing the size of the web page and making the web page smaller. Note: The div css structure is clear and concise, which does not mean that the div css structure can be used entirely. For example, the entire HTML tag is all DIV. It seems that except for the above and the above , everything else is

, it is as if the entire HTML is composed of ten thousand unrelated contents, or the entire HTML is structured as

, as if all the elements of this page are lists. In fact, these two situations are quite common, because the true meaning of "DIV CSS" is misunderstood, and perhaps there should be no such term at all, because it is almost impossible to complete a complete page with only DIV CSS.

Related labels：

浅谈div+css页面布局

source：php.cn

Previous article：Kneel down and pray to God! A question about Baidu uEditor: The return format of the background configuration item is wrong, and the upload function will not work properly! _html/css_WEB-ITnose Next article：Material Design Animation_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

A brief discussion on div css page layout_html/css_WEB-ITnose

turn to red