Novice to CSS: Common specification for CSS page layouts

CSS Naming conventions

A． File Naming conventions

Global style: GLOBAL.CSS;
Frame layout: layout.css;
Font style: Font.css;
Link style: link.css;
Print style: print.css;

Two． Common class ID naming code

Header: Header
Contents: Content
Container: Container
Footer: Footer
Copyrights: Copyright
Navigation: Menu
Main navigation: MainMenu
Sub-navigation: submenu
Logo: Logo
Slogan: Banner
Titles: Title
Side sidebar: Sidebar
Icons: Icon
NOTES: note
Search on: Search
Button: BTN
Login: Login
Links: Link
Information box: Manage
......

The naming of commonly used classes should be based on common English words as much as possible, and be easy to understand and annotate in the appropriate place. For class two classes ID named, the combination writing mode, the first letter of the next word should be capitalized: such as "search box" should be named "Searchinput", "Search icon" named this "Searchicon", "Search button" named "Searchbtn

CSS writing specifications and methods

I. General writing specifications and methods

1. Select doctype:

XHTML 1.0 offers three types of DTD declarations to choose from:

Transition (Transitional): A very loose DTD that allows you to continue using HTML4.01 's identity (but to conform to the XHTML notation). The complete code is as follows:

Strict (Strict): Requires a strict DTD, you can not use any of the performance layer of identity and attributes, such as
。 The complete code is as follows:

Framework (Frameset): A DTD specifically designed for frames page design, if your page contains frames, you need to use this DTD. The complete code is as follows:

Ideally, of course, a strict DTD, but for most of us who have just come in contact with Web standards, the transition DTD (XHTML 1.0 Transitional) is the ideal choice (including this site and the transition DTD). Because the DTD also allows us to use the identity, elements, and attributes of the presentation layer, it is also easier to pass the code checksum of the consortium.

2. Specify language and Character set:

Specify a language for the document:

In order to be properly interpreted and validated by the browser, all XHTML documents must declare the encoding language in which they are used;
Common Language Definitions:

Standard XML Document Language definition:

Language definition for older browsers:

To improve the character set, it is recommended to use "Utf-8".

3. Call Style sheet:

External style sheet calls:

Page inline: Just write the style sheet directly in the head area of the page code. As：

External invocation Method: Write the stylesheet in a separate. css file, and then invoke it in the page head, similar to the following code.

In a design that conforms to the Web Standard, it is recommended that you use an external tune, and you can change the style of the page without modifying only the. css file. If all pages call the same style sheet file, changing a style sheet file can change the style of all files.

4. Choose the right element:

Select HTML elements based on the structure of the document instead of the HTML element's style. For example, use the P element to contain text paragraphs instead of wrapping them. If you cannot find the appropriate element when you create the document, consider using a generic div or span;

Avoid transitions using div and span. Small, appropriate use of DIV and span elements makes the structure of the document more clear and reasonable and easy to use style;

Use tags and structure nesting as little as possible, not only to make the document structure clear, but also to keep the file small, in order to improve the user download speed, but also easy to browser interpretation of the document and the view;

5. Derivation selector:

You can use a derivation selector to define a style for a child element in an element, simplifying the naming and making the structure clearer, such as:

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

6, auxiliary picture with back figure processing:

The "auxiliary picture" here refers to pictures that are not part of the content to be expressed as a page, but are only used for retouching, spacing, and reminders. It can be done in the background image processing, without changing the situation of the page through the CSS style to make changes, such as:

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

7, structure and style separation:

In the page, write only the structure of the document, and the style in the CSS file, the external call CSS style sheet to achieve the separation of the structure and style.

8, the structure of the document writing:

Page CSS documents should be structured writing style, logic clear and easy to read. As：

/*===== Leading 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;
}
/*===== Leading Air end =====*/

9. Mouse gesture:

In the XHTML standard, hand is only recognized by IE, and when it is necessary to convert the mouse gesture to "hand", "hand" is replaced with "pointer", that is, "cursor:pointer;"

Two． Note Writing specification

1. Notes between lines:

Write directly after the property value, such as:

. search{
BORDER:1PX Solid #fff/* Define search Input Frame border * *
Background:url (. /images/icon.gif) No-report #333/* Define the background of the search box * *
}

2, whole paragraph note:

Add notes at the beginning and end of each place, such as:

/*===== Search Strip =====*/
. Search {
border:1px solid #fff;
Background:url (. /images/icon.gif) No-repeat #333;
}
/*===== Search bar End =====*/

Three． Style Property Code abbreviation

1, different classes have the same attributes and attribute values of the abbreviation:

For two different classes, but where some of the same properties and property values are identical or even all identical, they should be abbreviated, especially if there are multiple different classes with the same attributes and property values, the merged abbreviations can reduce the amount of code and be easy to control. As：

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

The property values of two different classes have duplicates, which can be abbreviated as:

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

2, the same attribute of the abbreviation:

The same property can be abbreviated based on its property values, 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, internal and external border of the abbreviation:

The distance in the CSS about the inside and outside borders is arranged in the order of the top, right, bottom, and left, and can be abbreviated directly when the values of these four properties are not the same 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;
}

If the top and bottom, left and right border property values are the same, the property value can be abbreviated to two directly, such as:

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

The abbreviation is:

. btn {margin:10px 5px;}

And when the property values of the top and bottom four borders are the same, you can abbreviate them directly into one, such as:

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

The abbreviation is:

. btn{margin:10px;

4, the color value of the abbreviation:

When RGB three color values are the same, the color value code can be abbreviated. As：

. menu {color: #ff3333;}

can be abbreviated as:

. menu {color: #f33;}

Four． Hack writing specification

Because different browsers for the support of the standards of the Web, the browser for the interpretation of the page is not the same, such as IE in many cases with FF 3px Gap, for these differences, you need to use the hack of CSS to adjust, of course, in the absence of the necessary circumstances, It is best not to write hack to make adjustments, to avoid problems caused by hack.

1, IE6, IE7, Firefox compatibility between the wording:

Writing a:

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

Writing two:

IE6 can be recognized as "_", and IE7 and FF are not recognized, so when only for the difference between IE6 and IE7 and FF, you can write this:
. searchinput {
Background-color: #333/* Universal * *
_background-color: #666/* Only IE6 identifiable * *
}

Writing three:

*+html and *html is the unique label of IE, Firefox is not supported.
. searchinput {background-color: #333;}
*html. searchinput {background-color: #666;} /* Only ie6*/
*+html. searchinput {background-color: #555;} /* Only ie7*/

Screen IE Browser:

Select is a selector and is replaced as appropriate. The second sentence is unique to the Safari browser on the Mac.

*:lang (en) Select {font:12px!important}/*ff Dedicated * *
Select:empty {font:12px!important}/*safari Visible * *

IE6 identifiable:

This is primarily a CSS annotation that separates a property from a value, which is commented before the colon.

The Select {display/*ie6 does not recognize */:none;}

ie if condition hack:

All IE can be identified:

Only IE
Only IE5.0 can identify:
Only IE 5.0
IE5.0 shifting IE5.5 can be identified:
Only IE 5.0+
Only IE6 identifiable:
Only IE 6-
IE6 as well as the ie5.x below IE6 are recognizable:
Only IE 6/+
Only IE7 identifiable:
Only IE 7/-

2, clear float:

In Firefox, when the children are floating, then the height of the parent can not fully wrap the entire child, then use this clear floating hack to define the parent, then this problem can be solved.

Select:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}