DIV Commonly used writing specifications for CSS web page layout_html/css_WEB-ITnose

Reprinted from: http://blog.onlygrape.com/divcss-4/257

CSS 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 conventions

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://blog.onlygrape.com/css-div-layout-seo/8

CSS writing specifications and methods

1. Conventional writing specifications and methods

1. Select DOCTYPE:

XHTML 1.0 provides three DTD declaration options Options:

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:

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

The ideal situation is of course a strict DTD, but for most of us who are new to the web For standard designers, 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 presentation layer identifiers, elements and attributes. It is easier to pass W3C code verification.

2. Specify language and character set:

Specify language for 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 versions of browsers:

In order to improve the character set, it is recommended to use “utf-8”.



3. Calling the style sheet:

Call the external style sheet:

In-page method: writing the style sheet directly in the page code head area. 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. Select appropriate elements:

Select HTML elements based on the structure of the document, rather than based on the style of the HTML elements. For example, use the P element to contain paragraphs of text, not for line breaks. If you can't find the appropriate element when creating the document, you can consider using a universal div or span;

Avoid the excessive use of divs and spans. A small amount of appropriate use of div and span elements can make the document structure clearer and more reasonable and easy to use styles;

Use tags and structural nesting as little as possible, which not only makes the document structure clear, but also makes it easier to use styles. Keeping the file small not only improves user download speed, but also makes it easier for browsers to interpret and display the document;

5. Derived selector:

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

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

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 the 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:

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 , whole paragraph comment:

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= ====*/

3. Style attribute code abbreviation

1. Abbreviations for different classes with the same attributes and attribute values:

For two different classes, but some or even all of the same attributes and attribute values When there are multiple classes, they should be merged 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:

Same attribute It can also be abbreviated according to its attribute value, 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. The abbreviation of the inner and outer borders:

In CSS, the distance between the inner and outer borders is according to the top and right , bottom and left. When the values ​​of these four attributes 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;
) >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;

}

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;}

Four. Hack writing specifications

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 one:

IE can recognize *; standard browser (such as FF) Cannot recognize *;
IE6 can recognize *, but not !important,

IE7 can recognize *, but can also recognize !important;

FF cannot recognize *, but can recognize !important;

According to For the above expression, the CSS hack under the same category/ID can be written as:

.searchInput {
background-color:#333;/*All three are possible*/
*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;} /*Visible on safari*/

Recognizable by IE6:

Here we mainly use CSS comments to separate an attribute and value, 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
It can be recognized by IE5.0 or IE5.5:
Only IE 5.0
Only IE6 can recognize:
Only IE 6-
IE6 and IE5 below IE6. Recognized by all if lte IE 7]> Only IE 7/-


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;
}