2. Summary of DIV CSS naming rules that are beneficial to SEO optimization_html/css_WEB-ITnose

1. CSS file and style naming

1. CSS file naming convention
Global style: global.css;
Frame layout: layout.css;
Font style : font.css;
Link style: link.css;
Print style: print.css;

2. CSS style naming convention

I recommend: use letters, _ It consists of No., - No. and numbers. It must start with a letter and cannot be pure numbers. In order to facilitate the management of style names after development, please use meaningful words or abbreviation combinations to name them so that colleagues can understand at a glance which part of the style it belongs to. This saves time in searching for styles, for example:
header Use header for the header style. For the left side of the header, you can use header_left or header_l. If it is a column structure, it can be like this??box_1of3 (the first column of three columns), box_2of3 (the second column of three columns), box _3of3 (the third column of three columns), I won’t give examples of the others one by one, just name them according to the above rules.
Listed below are some commonly used named words for everyone’s convenience: (In the future, everyone will slowly share the words they have accumulated during their work. Then everyone’s life will be more unified, and there will be no more than one word with one meaning. )

Container: container/box
Header: header
Main Navigation: mainNav
Sub Navigation: subNav
Top Navigation: topNav
Website Logo: logo
Large advertisement: banner
Middle page: mainBody
Bottom: footer
Menu: menu
Menu content: menuContent
Submenu: subMenu
Submenu content: subMenuContent
Search: search
Search keyword: keyword
Search range: range
Tag text: tagTitle
Tag content: tagContent
Current tag: tagCurrent/currentTag
Title: title
Content: content
List: list
Current location: currentPath
Sidebar: sidebar
Icon: icon
Note: note
Login: login
Register ：register
Column definition: column_1of3 (the first column of three columns)
column_2of3 (the second column of three columns)
column_3of3 (the third column of three columns)

2. The use and difference of id and class

We know that when defining a style in the style sheet, you can define id or class, for example:
ID method: #test {color:#333333}, call

content

CLASS method: .test{color:#333333}, call

content

in the page The id can only be used once on a page, and the class can be referenced multiple times.
I used multiple identical IDs on the page and it was displayed normally in IE. There seems to be no difference between ID and class. Is there any impact of using multiple identical IDs?
If there are multiple identical IDs on the page, it will fail W3 verification.
In terms of page display, current browsers still allow you to make this mistake, and using multiple identical IDs can "generally" display normally. But when you need to use JavaScript to control this div through id, an error will occur.
id is a tag used to distinguish different structures and contents, just like your name. If there are two people in a room with the same name, there will be confusion;
class is a style that can be applied to any structure and In terms of content, it is like a piece of clothing;
Conceptually speaking, it is different:
id finds the structure/content first, and then defines a style for it; class defines a style first, and then applies it to multiple structure/content.
In other words, it is recommended that when writing XHML CSS, if it is a one-dimensional structural positioning, use id, otherwise use class (this leaves the id of the non-structural positioning div block for programmers to define and use by themselves)
Web standards hope that everyone will use strict habits to write code.

3. Use css abbreviation

Using abbreviations can help reduce the size of your CSS file and make it easier to read. The main rules for commonly used CSS abbreviations:
Color
Hexadecimal color value, if the value of each two digits is the same, it can be abbreviated in half, for example:
#000000 can be abbreviated to #000; #336699 can be Abbreviated as #369;
Box size
usually has the following four writing methods:
property:value1; means that all edges are a value value1;
property:value1 value2; means top and bottom The value is value1, the value of right and left is value2
property:value1 value2 value3; means the value of top is value1, the value of right and left is value2, and the value of bottom is value3
property:value1 value2 value3 value4; The four values ​​represent top, right, bottom, and left in turn.
The convenient way to remember is clockwise, top, right, bottom, left. Examples of specific applications in margin and padding are as follows:
margin:1em 0 2em 0.5em;
border (border)
The properties of the border are as follows:
border-width:1px;
border- style:solid;
border-color:#000;
can be abbreviated to one sentence: border:1px solid #000;
The syntax is border:width style color;
Backgrounds (Backgrounds)
The properties of the background are as follows:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
can be abbreviated to one sentence: background:#f00 url(background.gif) no-repeat fixed 0 0;
The syntax is background:color image repeat attachment position;
You can omit one or more of the attribute values. If omitted, the attribute value will use the browser default value. The default value is:
color: transparent
image: none
repeat: repeat
attachment : scroll
position: 0% 0%
Fonts (fonts) The attributes of
font are as follows:
font-style:italic;
font-variant:small-caps;
font -weight:bold;
font-size:1em;
line-height:140%;
font-family:'Lucida Grande',sans-serif;
can be abbreviated to one sentence: font: italic small-caps bold 1em/140% 'Lucida Grande',sans-serif;
Note that if you abbreviate the font definition, at least two values ​​​​of font-size and font-family must be defined.
Lists (lists)
To cancel the default dots and serial numbers, you can write list-style:none;
list attributes are as follows:
list-style-type:square;
list- style-position:inside;
list-style-image:url(image.gif);
can be abbreviated to one sentence: list-style:square inside url(image.gif);

4. Define the unit clearly, unless the value is 0

Forgetting to define the unit of size is a common mistake among CSS newbies. In HTML you can just write width=100, but in CSS you have to give an exact unit, such as: width:100px width:100em. There are only two exceptions for not defining units: row height and 0 value. In addition, other values ​​must be followed by the unit. Be careful not to add spaces between the value and the unit.

5. Case sensitivity

When using CSS in XHTML, the element names defined in CSS are case-sensitive. To avoid this error, I recommend using lowercase for all definition names.
The values ​​of class and id are also case-sensitive in HTML and XHTML. If you must write in mixed case, please carefully confirm that your definition in CSS is consistent with the tag in XHTML.

6. Cancel the element qualification before class and id

When you write to define class or id for an element, you can omit the previous element qualification, because the ID is in It is unique in a page, and class can be used multiple times in the page. It makes no sense for you to qualify an element. For example:
div#id1{} can be written as #id1{}
This can save some bytes.

7. Default value

Usually the default value of padding and margin is 0, and the default value of background-color is transparent. But the default value may be different in different browsers. If you are afraid of conflicts, you can define the margin and padding values ​​of all elements as 0 at the beginning of the style sheet, like this:
* {
padding:0;
margin:0
}
Or defined for a certain element:
ul,li,div,span {
padding:0;
margin:0
}

8. CSS priority Level

Inline style (inline style) > ID selector > Style (class), pseudo-class (pseudo-class) and attribute (attribute) selector > Category (type), pseudo Object (pseudo-element)
Explanation:
*Inline style (inline style): the style attribute of the element, such as

, where color:red; is the inline style
*ID selector: the id attribute of the element, for example, you can use the ID selector #content
*Pseudo-class: The most common one is anchor (a ) Pseudo-class, such as a:link, a:visited.
*Attribute selectors: For example, div[class=demo], containing a div element with class demo
*Type selector ): HTML tag selection, such as div .demo, the div element contains an element with class demo
* Pseudo-element selector: such as div:first-letter, the first word under the div element .

9. No need to repeatedly define inheritable values ​​

In CSS, child elements automatically inherit the attribute values ​​​​of the parent element, such as color, Fonts, etc., that have been defined in the parent element can be directly inherited in the child element and do not need to be defined again. Unless it is to change the current element style, the attribute value of the parent element is not used. However, it should be noted that the browser may use some The default value overrides your definition.

10. Multiple CSS style definitions, attribute addition and duplication, last priority principle

A tag can define multiple classes at the same time, or attributes can be repeatedly defined in the same class . For example:
We first define two styles
.one{width:200px;background:url(1.jpg) no-repeat left top;}
.two{border:10px solid #000; background :url(2.jpg) no-repeat left top;}
In the page code, we can call it like this:

What is the final display effect of this div style? ? Which one is the duplicate? ?
The applied styles are as follows:
width:200px;
border:10px solid #000;
background:url(2.jpg) no-repeat left top;
Because, when applied When there are two or more styles, the styles applied by the browser are based on the attribute appending and duplication last priority principle.
That is to say, for two or more or repeated style name definitions, the styles applied by the browser are in order. , if duplicate attribute values ​​are defined, the last one defined shall prevail. If two or more style names are applied, the attribute values ​​that are not repeatedly defined will be appended, and the duplicate attribute values ​​shall be based on the last one. What should be noted here is that the order of styles is not based on the order of names applied on the page, but the order of styles in the style sheet.

11. Use descendant selectors

Using descendant selectors is one of the reasons that affects their efficiency. Subselectors can help you save a lot of class definitions. Let's look at the following code:

http://duote.com/# class='subnavitem'>Item 1> Item 1 Item 1

This The CSS definition of the code snippet is:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
You can use the following method to replace the above code


The style definition is:
# subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
Use sub selectors to make your code and CSS are cleaner and easier to read.
If there are multiple identical elements in a container, and the styles of these elements are different, please avoid this method and use different classes such as:

12. There is no need to add quotes to the background image path

In order to save bytes, I recommend not to add quotes to the background image path, because the quotes are not necessary. For example:
background-image:url(“images
margin:0 auto;
}
But IE5/Win cannot display this definition correctly. We use a very useful trick to solve it: use text -align attribute. Like this:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
The text-align:center; rule of the first body defines that all elements of the body in IE5/Win are centered (other browsers just center the text), and the second text- align:left; is to align the text in #warp to the left.

13. Import and hide CSS

.

Because older browsers do not support CSS, a common approach is to use the @import technique to hide CSS. For example:
@import url(main.css);
However, this method does not work for IE4, which gave me a headache for a while. Later, I wrote it like this:
@import main.css;
This way, I can hide CSS in IE4. Haha, I also saved 5 bytes. If you want to know the detailed explanation of @import syntax, you can see here "centricle's css filter chart"

14. CSS hack

Sometimes, you need to modify IE browser The bug defines some special rules. There are too many CSS tricks (hacks) here. I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, these two methods are is the safest.
1. Comment method
(a) To hide a CSS definition in IE, you can use a child selector:
html>body p {
}
(b )The following writing method can only be understood by IE browser (hidden from other browsers)
* html p {
}
(c) Sometimes, you want IE/Win to be valid and IE/Mac to be hidden , you can use the backslash technique:
* html p {
declarations
}
(d) The following writing method can only be understood by IE7 browser (hidden from other browsers)
* html p {
}
2. Method of conditional comments

Another method, which I think is more testable than CSS Hacks, is to use Microsoft’s proprietary Attribute conditional comments. Using this method you can define some styles separately for IE without affecting the definition of the main style sheet. Like this:

http://www.duote.com/style/ie.css' />

And more CSS You can find hacks online, but there are many hacks that do not comply with w3c standards. Based on the above hacks, I wrote a style that can distinguish IE6, IE7, and FF, and can comply with w3c standards. The code is as follows:
.classname {width:90px!important;width:100px;}
* html .classname {width:95px!important;}
After writing like this, the width is 100px under IE6, 95px under IE7, and 95px under Firefox. 90px.

15. Debugging skills: How big is the layer?

When an error occurs when debugging CSS, you have to be like a typewriter and analyze the CSS code line by line. I usually define a background color on the layer in question so it's obvious how much space the layer takes up. Some people suggest using border, which is generally possible, but the problem is that sometimes border will increase the size of elements, and border-top and boeder-bottom will destroy the vertical margin value, so it is safer to use background.
Another attribute that often causes problems is outline. Outline looks like boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute, the only ones I know of are Safari, OmniWeb, and Opera.

16. CSS code writing style
When writing CSS code, everyone has their own writing habits for indentation, line breaks, and spaces. After constant practice, I decided to adopt the following writing style:
.classname {
width:100px;
}
When using union definitions, I usually write each selector separately One line so they are easier to find in the CSS file. Add a space between the last selector and the curly braces {. Also write each definition on its own line. The semicolon should be placed directly after the attribute value. Do not add spaces.
I am used to adding a semicolon after each attribute value. Although the rules allow that there is no semicolon after the last attribute value, it is easy to forget to add the semicolon when you want to add a new style and cause an error, so It’s better to add them all.
Finally, the closing brace} is written on a line by itself. Spaces and line breaks aid reading.