Home > Article > Web Front-end > A brief discussion on div css page layout_html/css_WEB-ITnose
A brief discussion on div css page layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:411191browse
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- , 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.