DIV Some commonly used naming rules and writing rules for CSS web page layout_html/css_WEB-ITnose

CSS style naming convention

1. File naming convention

Global style: global.css;
Frame layout: layout.css;
Font style: font.css;
Link style: link.css;
Print Style: print.css;

2. Common class/ID naming convention

Header: header
Content: content
Container: container
Footer: footer
Copyright: copyright
Navigation: menu
Main navigation: mainMenu
Sub-navigation: subMenu
Mark: logo
Slogan: banner
Title: title
Sidebar: sidebar
Icon: Icon
Note: note
Search: search
Button: btn
Login: login
Link: link
Information box: manage
…

Common classes should be named in common English as much as possible The words shall prevail, make it easy to understand, and annotate where appropriate. For secondary class/ID naming, the combined writing mode is adopted, and the first letter of the last word should be capitalized: such as "search box" should be named "searchInput", "search icon" should be named "searchIcon", "search button" "Named" searchBtn

For more knowledge about naming, you can refer to:
http://www.52css.com/search.asp?SearchContent=naming&searchType=title

CSS writing specifications and methods

1. Conventional writing specifications and methods

1. Select DOCTYPE:

XHTML 1.0 provides three DTD declarations to choose from:

Transitional: A DTD with very loose requirements, which allows you to continue to use the HTML4.01 logo (but must comply with the xhtml writing method). The complete code is as follows:

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

strict ( Strict): Strict DTD, you cannot use any presentation layer identifiers and attributes, such as
. The complete code is as follows:

-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Frameset: specially designed for frame page design DTD, if your page contains a frame, you need to use this DTD. The complete code is as follows:

-//W3C//DTD XHTML 1.0 Frameset//EN” “http ://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

The ideal situation is of course a strict DTD, but for most of us designers who are new to web standards It is said that transitional DTD (XHTML 1.0 Transitional) is currently the ideal choice (including this site, which also uses transitional DTD) because this DTD also allows us to use the identifiers, elements and attributes of the presentation layer, and it is easier to pass W3C. Code verification.

For DTD, you can refer to:
http://www.52css.com/search.asp?SearchContent=Document Type&searchType=title

2. Specify language and character set:

Specify the language for the document:



In order to be correctly interpreted by browsers and pass W3C code verification, all XHTML documents must declare the encoding language they use; such as:
Commonly used language definitions:


Standard XML document language definition:

Language definition for older browsers:

In order to improve the character set, it is recommended Use "utf-8".

3. Call the style sheet:

Call the external style sheet:

Page inline method: write the style sheet directly in the head area of ​​the page code. For example:


External calling method: Write the style sheet in a separate .css file, and then call it with code similar to the following in the head area of ​​the page.



In In a design that complies with web standards, it is recommended to use the external calling method, which can change the style of the page without modifying the page and only modifying the .css file. If all pages call the same style sheet file, then changing one style sheet file can change the styles of all files.

4. Choose appropriate elements:

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenu ul li {background:url(images/bg.gif;)}

关于选择器，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E9%80%89%E6%8B%A9%E5%99%A8&searchType=title

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

• 首页


• 介绍


• 服务

/*======Main Navigation=====*/
#mainMenu {
width:100%;
height:30px;
background:url (images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====End of main navigation=====*/

9. Mouse gestures:

in XHTML standard , hand is only recognized by IE. When you need to convert the mouse gesture into a "hand shape", replace "hand" with "pointer", that is, "cursor:pointer;"

2. Comment writing specifications

1. Interline comments:

is written directly after the attribute value, such as:

.search{
border:1px solid #fff;/ *Define the search input box border*/
background:url(../images/icon.gif) no-report #333;/*Define the background of the search box*/
}

2 , Entire paragraph comments:

Add comments at the beginning and end respectively, such as:

/*======Search bar=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====End of search bar= ====*/

For comments, you can refer to:
http://www.52css.com/search.asp?SearchContent=Comments&searchType=title

3. Style attribute code abbreviation

1. Different classes have abbreviations for the same attributes and attribute values:

When two different classes have some or even all the same attributes and attribute values, they should be combined and abbreviated , especially when there are multiple different classes with the same attributes and attribute values, merging abbreviations can reduce the amount of code and make it easier to control. For example:

#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height :30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}

There are overlaps in the attribute values ​​​​of two different classes, which can be abbreviated to:

#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}

2. Abbreviation of the same attribute:

The same attribute is based on its Attribute values ​​can also be abbreviated, such as:

.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no- repeat 50% 50%;
}

3. Abbreviation of inner and outer borders:

In CSS, the distance between inner and outer borders is in the order of top, right, bottom and left. To arrange, when the four attribute values ​​​​are different, they can also be abbreviated directly, such as:

.btn {
margin-top:10px;
margin-right:8px;
margin -bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}

can be abbreviated as:

.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

And if the border attribute values ​​​​of the top and bottom sides, left and right sides are the same, the attribute values ​​​​can be directly abbreviated to two, such as:

.btn {
margin-top:10px ;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}

is abbreviated as:

.btn { margin:10px 5px;}

When the attribute values ​​of the top, bottom, left and right borders are the same, they can be directly abbreviated into one, such as:

.btn {
margin-top :10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}

is abbreviated as:

. btn{margin:10px;}

4. Abbreviation of color value:

When the three RGB color values ​​are the same, the color value code can be abbreviated. For example:

.menu { color:#ff3333;}

can be abbreviated as:

.menu {color:#f33;}

About abbreviations You can refer to:
http://www.52css.com/search.asp?SearchContent=Abbreviation&searchType=title

IV. Hack writing standards

Because different browsers have different support for W3C standards, each browser also interprets and renders the page differently. For example, in many cases, there is a 3px gap between IE and FF. These differences require the use of CSS hacks to make adjustments. Of course, it is best not to write hacks to make adjustments unless necessary, to avoid page problems caused by hacks.

1. Compatible writing method between IE6, IE7 and Firefox:

Writing method 1:

IE can recognize it*; standard browsers (such as FF) cannot recognize it* ;
IE6 can recognize *, but not !important,
IE7 can recognize *, and can also recognize !important;
FF cannot recognize *, but can recognize !important;
According to the above expression, The CSS hack under the same category/ID can be written as:
.searchInput {
background-color:#333;/*All three can be used*/
*background-color:#666　!important; / *Only IE7*/
*background-color:#999; /*Only IE6 and below*/
}
Generally the writing order of the three is: FF, IE7, IE6.

Writing method two:

IE6 can recognize "_", but neither IE7 nor FF can recognize it, so when only focusing on the difference between IE6, IE7 and FF, you can write it like this:
.searchInput {
background-color:#333;/*General*/
_background-color:#666;/*Only recognized by IE6*/
}

Writing method three:

*html and *html are IE-specific tags and are not supported by Firefox yet.
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*IE6 only*/
* html .searchInput {background-color:#555 ;}/*Only IE7*/

Block IE browser:

select is the selector, change it according to the situation. The second sentence is unique to the Safari browser on MAC.

*:lang(zh) select {font:12px !important;} /*Special for FF*/
select:empty {font:12px !important;} /*Safari visible*/

Recognizable by IE6:

Here mainly separates an attribute and value through CSS comments, and the comments are before the colon.

select { display /*IE6 does not recognize*/:none;}

IE’s if condition hack writing method:

All IE recognizes:

Only IE
Only IE5.0 can recognize:
Only IE 5.0
IE5.0 can be recognized by IE5.5:
Only IE 5.0
Only IE6 can recognize:
Only IE 6-
IE6 and IE5.x below IE6 can recognize:
Only IE 6/
Only IE7 can recognize:


For CSS HACK and BUG, ​​you can refer to:
http://www.52css.com/search.asp?SearchContent= HACK&searchType=title
http://www.52css.com/search.asp?SearchContent=BUG&searchType=title

2. Clear float:

In Firefox, when all children When it is floating, the height of the parent cannot completely cover the entire child. Then use this HACK to clear the floating to define the parent once, which can solve this problem.

select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}