About div + css page layout and divcss Layout

About div + css page layout and divcss Layout

Explanation:

DIV + CSS is a Web design standard and a webpage layout method. Unlike the traditional table layout Positioning method, the content and performance of webpage pages are separated. "DIV + CSS" is actually an incorrect name, and the standard name should be XHTML + CSS. Because DIV and table are both a tag in XHTML or HTML language, CSS is just a form of representation.

Method:

Add CSS to the HTML document. Css is short for Cascading Style Sheet. It defines the display form of HTML elements and is a standard technology developed by W3C to format webpage content, it is also one of the technologies that web designers must master.

Development:

1. Put the style definition in a separate file. For example, create a style definition with CSS after the style is created.

Element {attribute color: Value red;} uses the <link> flag in the head segment,

Reference Syntax: <link rel = "stylesheet" type = "text/css" href = "style sheet URL"/>

2. Embedded style sheets:

<Style> the element segment must appear in the head segment. It has a start and end mark and can contain multiple <style> segments.

Syntax format: <style type = "text/css">

... Style definition...

Style

3. In the embedded style sheet, we can use @ import to import an external style sheet, for example:

<Style type = "text/css">

@ Import url (external style table location );

... Other embedded style definitions...

</Style>

4. inline style sheets:

Write it in the Start mark. For example, if you want H1 to become red,

<H1 style = "color: red;"> red

Summary: external style sheets and embedded style sheets are preferred 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. A declaration block is a large container consisting of parts in the middle of the braces. the space in the middle of the Declaration block is ignored ,, A declaration block consists of one Declaration. The Declaration consists of attributes and values. The attributes and values are separated by a colon and end with a semicolon. Each declaration can contain only one attribute, if the attribute value contains spaces and is enclosed in double quotation marks, multiple declarations can be contained in a block. Each declaration is separated by a semicolon.

Selector

Declare Block

Select an element

Statement {}

Attribute: value;

Colon start semicolon end

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

7. selector Group

When several selectors share a declaration, they can be grouped together. Each selector must be separated by commas. For example, if the selector group is h1, h2, h3, h4 {color red;}, the path of each selector must be fully written. A comma is not allowed at the end of the group.

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

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

For example, a comma (. a1 p,. a1 ul, {color: red;}) is added to the end ;}

8. Selector

Element selector: syntax format: element {color: blue ;}

Class selector: syntax format:. Class Name {attribute: value ;}

ID selector: # id {property: value;} the ID name cannot be repeated.

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

Pseudo class selector:

The pseudo-class selector can format the four different states of the <a> element in different ways: write them in sequence (a Love or Hate)

A: link is a Selector Used for unaccessed links.

A: visited is the Selector Used for accessed links.

A: hover is the selector used to place the cursor over the link.

A: active is the selector used to obtain the link of the Focus (for example, click ).

If needed, 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

The standard selector cannot format the first letter or line of an element. The pseudo element selector can:

All browsers support the following two types: first-line and first-letter.

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

For example, the first letter of a 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> ID selector> class, pseudo-class, and attribute selector> type ), pseudo object (pseudo-element ).

Usage mistakes:

1. What makes DIV + CSS reasonable is that it enables unified design and management of web pages. With a style sheet, you can change the style sheet to unify the style of the whole site, if you create a style sheet for a single page or a div and create a style sheet without the concept of global design, the design method of div + CSS is completely unnecessary, even becoming cumbersome;

2. DIV + CSS is used like a Table, with endless nesting. Its effect is no different from that of the Table design. It does not bring the optimization effect of the search engine, but increases the page load;

3. Div + CSS is favored, but compatibility is not considered. TABLE design has been widely supported by browsers for a long time, so the display effect is good and there will be no misplacement, however, DIV + CSS may cause page dislocation in Some browsers. Therefore, when designing, you should also consider the situation of different browsers for modification and debugging.

Purpose:

1. Simplified code, layout using DIV + CSS, and simplified Page code. I believe I know all about XHTML. Watch more HTML tutorials. Code streamlining improves the crawling efficiency and efficiency of Baidu spider, and crawls a complete page in the shortest time. At the same time, this provides some benefits to the indexing quality;

2. Improve access speed and user experience

As a result, the loading speed is greatly improved, so the less time the user will wait for the page to be clicked, and the increase in user experience will bring the website to be liked by the search engine, thus improving the website ranking.

3. The div + css structure is clear and can be easily searched by search engines. Naturally, it is suitable for optimizing seo, reducing the size of webpages and reducing the size of webpages. Note: The div + css structure is clear and concise. It does not mean that the div + css structure can be used, for example, the entire HTML Tag is DIV, it seems that all the content except