div css naming convention_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

CSS writing specifications and methods

1. Conventional writing specifications and methods

1. Select DOCTYPE:

XHTML1.0 provides There are 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:

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

Frameset: Specifically for The DTD used in frame page design. If your page contains a frame, you need to use this DTD. 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 design of web standards For engineers, transitional DTD (XHTML1.0Transitional) 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.div-css.net/search.asp?SearchContent=Document Type&searchType=title

2. Specify the 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:

To improve Character set, it is recommended to 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: The style sheet is written in a separate .css file, and then called in the head area of the page with code similar to the following.

In compliance with In the design of 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 the user's download speed, but also makes it easier for the browser to interpret and display the document;

5. Derived selector:

You can use the derived selector to give a The sub-element definition style within the element simplifies naming and also makes the structure clearer, such as:

.mainMenuulli{background:url(images/bg.gif;)}

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

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

#logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}

7、结构与样式分离：

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

8、文档的结构化书写：

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

首页

介绍

服务

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

In the XHTML standard, hand only Recognized by IE, when you need to convert the mouse gesture into a "hand shape", replace "hand" with "pointer", that is, "cursor:pointer;"

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

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

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

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:1pxsolid#333;
width:100;
height:30px ;
overflow:hidden;
}
#subMenu{
background:url(../images/bg.gif);
border:1pxsolid#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:1pxsolid#333;
width:100;
overflow:hidden;
}
#mainMenu{height:30px;}
#subMenu{height:20px;}

The same attribute 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:5050;
}
.search{
background:#333url(../images/icon.gif)no-repeat5050;
}

In CSS, the distance between the inner and outer borders is arranged in the order of top, right, bottom and left. When these four attribute values are different, it can also Direct abbreviation, 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;
}

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

.btn{
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left: 5px; When the values are the same, they can be directly abbreviated into one, such as:

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.

*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 like this:
.searchInput{
background-color: #333;/*General*/
_background-color:#666;/*Only recognized by IE6*/
}

* html and *html It is a tag unique to IE and is not supported by Firefox.
.searchInput{background-color:#333;}
*html.searchInput{background-color:#666;}/*IE6 only*/
* html.searchInput{background-color:#555 ;}/*Only IE7*/

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

Here we mainly use CSS comments to separate an attribute and value, and the comments are before the colon.

OnlyIE
Only IE5.0 can recognize:
OnlyIE5.0
IE5.0 can be recognized by IE5.5:
OnlyIE5.0
Only IE6 Recognizable:
OnlyIE6-
IE6 and IE5.x below IE6 can be recognized:
OnlyIE6/
Only recognized by IE7:
OnlyIE7/-

For CSSHACK and BUG, you can refer to:
http://www.div-css.net/search.asp?SearchContent=HACK&searchType=title
http://www.div-css.net/search .asp?SearchContent=BUG&searchType=title

In Firefox, when all children are floating, the height of the parent cannot completely cover the entire child. level, then use this floating HACK to define the parent once, then this problem can be solved.

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

Article source: Div-Css.net Design Network Reference: http://www.div-css.net/div_css/news/div-css-wangyebuju- jiqiao.asp