Summary of naming rules for div + CSS beneficial to Seo

I. CSS file and style naming

1. CSS file naming rules

Global style: global.css;

Frame layout: layout.css;

Font.css;

Link style: link.css;

Print Style: print.css;

2. CSS style naming rules

My suggestion: it may consist of letters, _ signs,-signs, and numbers. It must start with a letter and cannot be a pure number. For the convenience of style name management after development, please use meaningful words or abbreviations to name them so that colleagues can understand which style is like this, this saves time for searching styles, for example:

Header styles use headers, header_left or header_l to the left of the header, and -- box _ 1of3 (the first column in the three columns) if the column structure is used ), box F3 (the second column in the three columns) and box _ 3of3 (the third column in the three columns). I will not give an example for others. Just name them according to the above rules.

The following lists some frequently used naming words for your convenience: (in the future, you will gradually share your accumulated words during your work, so that your life will be more unified, there will be no more words .)

Container: container/box

Header: Header

Main PILOT: mainnav

Sub-Pilot: subnav

Top navigation: topnav

Website Logo: logo

Announcement: banner

Central page: mainbody

Background: footer

Menu

Menu content: menucontent

Sub-menu: submenu

Sub-menu content: submenucontent

Search: Search

Search Keyword: keyword

Search range: Range

Label text: tagtitle

TAG content: tagcontent

Current Tag: tagcurrent/currenttag

Title: Title

Content

Column table: List

Current location: currentpath

Side bar: sidebar

Icon

Note: Note

Login: Login

Note: Register

Column definition: column_1of3 (the first column in the three columns)

Column53f3 (second column in the three columns)

Column_3of3 (the third column in the three columns)

Ii. Use and difference of ID and class

We know that when a style table defines a style, you can define the ID or class, for example:

Id method: # test {color: #333333}. Call <div> content <div> on the page.

Class Method:. Test {color: #333333}. On the page, call <Div class = "test"> content <div>

ID: a page can be used only once, and the class can be referenced multiple times.

I used multiple identical IDs on the page to display them normally in IE. The IDS and classes seem to have no difference. What is the impact of multiple identical IDs?

The W3 verification fails because multiple identical IDs exist on the page.

On the page display, the current Browser allows you to make this error. It can also be displayed normally with multiple identical IDs. But when you need to use JavaScript to control this Div through ID, an error will occur.

ID is a tag used to distinguish between different structures and content, just like your name. If two people in a room have the same name, they will be confused;

A class is a style that can be embedded in any structure or content, just like a dress;

The concept is different:

ID is to first find the structure/content, and then define the style; class is to first define a style, and then set to multiple structures/content.

That is to say, we recommend that you use the ID when writing xhml + CSS if the structure of Dimension 1 is located; otherwise, use the class (so that the ID of the non-structured Div block is givenProgramDefined by the user)

The Web standard is intended to be written in strict habits.Code.

Iii. Use CSS abbreviations

Using abbreviations can help reduce the size of your CSS file and make it easier to read. Common rules for CSS Abbreviations:

Color

The hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:

#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;

Box Size

There are usually four writing methods:

Property: value1; indicates that all edges are value1;

Property: value1 value2; the value of top and bottom is value1, and the value of right and left is value2.

Property: value1 value2 value3; indicates that the top value is value1, the right and left values are value2, and the bottom value is value3.

Property: value1 value2 value3 value4; four values in turn represent top, right, bottom, left

Easy to remember is clockwise, top right bottom left. An example of the specific application in margin and padding is as follows:

Margin: 1em 0 2em 0.5em;

Border (Border)

The border attributes are as follows:

Border-width: 1px;

Border-style: solid;

Border-color: #000;

It can be abbreviated as border: 1px solid #000;

Syntax: Border: width style color;

Background (backgrounds)

The attributes 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;

It can be abbreviated as: 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 attribute values. If this attribute value is omitted, the default value of the browser is used. The default value is:

Color: transparent

Image: None

Repeat: Repeat

Attachment: Scroll

Position: 0% 0%

Fonts)

The font attributes 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;

It can be abbreviated as: Font: italic small-caps bold 1em/140% "lucida Grande", sans-serif;

Note: If you are short for font definition, you must at least define the font-size and font-family values.

List (lists)

To cancel the default dot and serial number, you can write list-style: none;

The list attributes are as follows:

List-style-type: Square;

List-style-position: inside;

List-style-image: url(image.gif );

Can be abbreviated as: List-style: square inside url(image.gif );

For more attribute writing, see CSS style manual, online manual address: http://www.jb51.net/css/

4. Define the unit unless the value is 0.

Unit that forgets to define the size is a common mistake for beginners of CSS. In HTML, you can write only width = 100, but in CSS, you must give an accurate unit, for example, width: 100px width: 100em. There are only two exceptions. The unit is not defined: the Row Height and the 0 value. Other values must follow the unit. Note that do not add spaces between values and units.

V. Case Sensitive

When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case.

The values of class and ID are also case-sensitive in HTML and XHTML. If you must write them in combination with uppercase and lowercase, make sure that your CSS definition is consistent with the tags in XHTML.

6. Cancel the element limitation before class and ID

When you write an element to define a class or ID, you can omit the previous element limitation, because the ID is unique in a page, and the class can be used multiple times on the page. It makes no sense to limit an element. For example:

Div # id1 {} can be written as # id1 {}

This saves some bytes.

7. Default Value

Generally, the default value of padding and margin is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If there is a conflict, You can first define that the margin and padding values of all elements are 0 at the beginning of the style sheet, as shown in the following code:

*{

Padding: 0;

Margin: 0

}

Or define an element:

Ul, Li, Div, span {

Padding: 0;

Margin: 0

}

 

VIII. CSS priority

Inline style> ID selector> class, pseudo-class, and attribute selector> type ), pseudo object (pseudo-element)

Explanation:

* Inline style: The style attribute of an element, such as <Div style = "color: red;"> </div>. The color: Red is the inline style.

* ID selector: Specifies the ID attribute of an element. For example, you can use the ID selector # content. <div> </div>

* Pseudo-class: The most common is the pseudo-class of the anchor (a), such as A: Link, A: visited.

* Attribute selectors: for example, div [class = demo] contains the DIV element whose class is demo.

* Type selector: HTML Tag selection, such as Div. Demo. The DIV element contains the elements whose class is demo.

* Pseudo-object selector: for example, div: First-letter, the first word under the DIV element.

9. Do not need to repeatedly define the value that can be inherited

In CSS, child elements automatically inherit the attribute values of parent elements, such as colors and fonts. defined in parent elements, child elements can be inherited directly without repeated definitions, unless the attribute value of the parent element is not used to change the current element style, note that the browser may overwrite your definition with some default values.

10. Multiple CSS style definitions, and the final priority principle for adding duplicate attributes

A tag can define multiple classes at the same time, or duplicate attributes in the same class. For example:

Let's first define two styles

. One {width: 200px; Background: URL (http://www.jb51.net/1.jpg) No-repeat left top ;}

. Two {border: 10px solid #000; Background: URL (http://www.jb51.net/2.jpg) No-repeat left top ;}

In the Page code, we can call:

<Div class = "one" Two> </div>

So what is the final display effect of this Div style ?? Which one is repeated ??

<Div class = "one" Two> </div> the applied style is as follows:

Width: 200px;

Border: 10px solid #000;

Background: URL (http://www.jb51.net/2.jpg) No-repeat left top;

Because when two or more styles are applied, the style applied by the browser is based on the final priority principle of repeated attribute append.

That is to say, two or more style names are defined. The style applied by the browser is sequential. If repeated attribute values are defined, refer to the last definition, if two or more style names are applied, the attribute values that are not repeatedly defined are appended, and the duplicate attribute values are subject to the last one. Note that the order of the style is not the order of the Application name on the page, but the style order in the style table.

11. descendant selectors)

Using Child selectors is one of the reasons that affect their efficiency. The sub-selector can help you save a lot of class definitions. Let's look at the following code:

<Div>

<Ul>

<Li class = "subnavitem"> <a href = "http://www.jb51.net/article1/#" class = "subnavitem"> Item 1 </a> </LI>

<Li class = "subnavitemselected"> <a href = "http://www.jb51.net/article1/#" class = "subnavitemselected"> Item 1 </a> </LI>

<Li class = "subnavitem"> <a href = "http://www.jb51.net/article1/#" class = "subnavitem"> Item 1 </a> </LI>

</Ul>

</Div>

The CSS definition of this Code 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

<Ul id = "subnav">

<Li> <a href = "http://www.jb51.net/article1/#>" item 1 </a> </LI>

<Li class = "Sel"> <a href = "http://www.jb51.net/article1/#>" item 1 </a> </LI>

<Li> <a href = "http://www.jb51.net/article1/#>" item 1 </a> </LI>

</Ul>

The style definition is:

# Subnav {}

# Subnav Li {}

# Subnav {}

# Subnav. Sel {}

# Subnav. Sel {}

Using a sub-selector can make your code and CSS more concise and easier to read.

If a container contains multiple identical elements and these element styles are different, avoid using this method to create different classes, such:

<Ul class = "one"> <li> </LI> </ul>

<Ul class = "tow"> <li> </LI> </ul>

12. Do not quote the background image path

To reduce the number of bytes, we recommend that you do not quote the path of the background image because the quotation marks are not required. For example:

Background-image: URL ("Images

Margin: 0 auto;

}

However, ie5/win cannot correctly display this definition. We use a very useful technique to solve this problem: Use the text-align attribute. Like this:

Body {

Text-align: center;

}

# Wrap {

Width: 760px;

Margin: 0 auto;

Text-align: left;

}

Text-align: center of the first body. The rule defines that all the elements of the body in ie5/win are centered (other browsers only center the text), and the second text-align: left; is to place the text in # warp to the left.

17. Import and hide CSS

Because the browser of the old version does not support CSS, a common practice is to use the @ import technique to hide CSS. For example:

@ Import url(main.css );

However, this method does not work for ie4, which makes me a headache for a while. Later I used the following statement:

@ Import main.css;

In this way, CSS can be hidden in ie4, and 5 bytes are saved. For more information about the @ import syntax, see centricle's CSS Filter chart.

18. CSS hack

Sometimes, you need to define some special rules for IE browser bugs. Here there are too many CSS skills (Hacks). I only use either of them, whether Microsoft is better able to support CSS in the upcoming IE7 beta version, these two methods are the safest.

1. annotation Method

(A) hide a CSS definition in IE. You can use the child selector ):

HTML> body P {

 

}

(B) The following statement can only be understood by IE (hidden from other browsers)

* Html p {

 

}

(C) Sometimes you want IE/win to be valid While IE/MAC is hidden. You can use the backslash technique:

 

* Html p {

Declarations

}

 

(D) The following statement can only be understood by the IE 7 browser (hidden from other browsers)

* + Html p {

 

}

2. Conditional comments

Another method, I think, is better than CSS hacks, is to use Microsoft's proprietary attribute condition comments ). With this method, you can define some styles for IE without affecting the definition of the main style table. Like this:

<! -- [If IE]>

<LINK rel = stylesheet/CSS href = "http://www.jb51.net/style/ie.css"/>

<! [Endif] -->

More CSS hack files can be found on the Internet. However, many hack files do not comply with W3C standards, based on the above hack, 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 ;}

In this way, the width of IE6 is PX, that of IE7 is 95px, and that of Firefox is 90px.

19. debugging skills: How big is the layer?

When a CSS debugging error occurs, you need to analyze the CSS code line by line like a typographical engineer. I usually define a background color on the problematic layer, so that it is obvious that the layer occupies a lot of space. Some people suggest using border, which is acceptable in general, but the problem is that sometimes border will increase the element size. Border-top and boeder-bottom will destroy the vertical margin value, therefore, it is safer to use background.

Another frequently problematic attribute is outline. Outline looks like a boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute. All I know is safari, omniweb, and opera.

20. CSS Code Writing Style

When writing CSS Code, everyone has the habit of writing indentation, broken lines, and spaces. After continuous practice, I decided to adopt the following writing style:

. Classname {

Width: 100px;

}

When using the Union definition, I usually write a single row for each selector so that they can be found in the CSS file. Add a space between the last selector and braces {, and each definition also writes a line separately. The semicolon directly adds no space after the attribute value.

I used to add points after each attribute value. Although the rule allows the last attribute value to be followed by a semicolon, if you want to add a new style, it is easy to forget to add a semicolon to generate an error, therefore, it is better to add both.

Finally, close braces} write a single row. Space and line feed help and reading

 

Content from: script home www.jb51.net