CSS Basics 2

1 Basic Specifications
1.1 File Naming conventions
Basic style: Base.css
Global style: Global.css
Frame layout: Layout.css
Font style: Font.css
Link Style: Link.css
Plot style: Print.css

1.2 Common Classes Class specification
Header: Header contents: Content container: Container
Footer: Footer Copyright: Cpright Navigation: Nav
Paging: Pages Logo: message: MSG
Slogan: Banner title: Titles Sidebar: Sidebar
Icons: Icon notes: Note search: Searches
Button: BTN Login: Login Link: Link
Main navigation: Main-nav sub-navigation: Sub-nav info box: Manage

Description: The name of the common class should try to use common English words as the standard, to be easy to understand, and in the appropriate place to comment.
For class two naming, the combined writing mode is used, and the two words are connected in a horizontal "-" connection, such as:
Search box: Search-input
Search icon: Search-icon
Search button: search-btn

1.3 Deriving selectors
You can use a derived selector to define a style for the child elements in an element, while simplifying the naming and also making the structure more
Clarity, such as:

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

1.4 Auxiliary pictures with back chart processing
The "secondary pictures" here refer to those that are not part of the content to be expressed as pages, but only for retouching, spacing,
The picture of the reminder. It can be used to do the back chart processing, without changing the page in the case of CSS style to make changes, such as:

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

1.5 Structure and style separation
Only the structure of the document is written in the page, the style is written in the CSS file, and the structure is separated from the style by calling the CSS externally.

1.6 Structure of the document
The writing page CSS document should adopt the structured writing method, the logic is clear and easy to read. Such as:

<Divclass= "Main-nav"><ul><Li><ahref="#" >Home</a></Li><Li><ahref="#" >Introduced</a></Li><Li><ahref="#" >Service</a></Li></ul></Div>

/* Main navigation s*/

{width:100%; height:30px; background:url (images/mainmenu_bg.jpg) repeat-x;}  {float:left;  Line-height:30px; margin-right:1px; cursor:pointer;}

/* Main navigation e*/

1.7 Mouse gestures
In the XHTML standard, hand is only recognized by IE, and when the mouse gesture needs to be converted to "hand", the "hand" is changed to
"Pointer", namely Cursor:pointer;

1.8 Notes Writing Specification
A whole paragraph of the comment. Add notes at the beginning and end of each place, as shown in 1.6;
b Assist comments. Non-author maintenance when added to indicate the modification time, modified person and other identification information. In a zone note or a single line
The comments are based on the modified person and the modified time information. Such as:
Area notes
/* * * S comment content [modifier and modified time] */
. class{...}
. class{...}
/* * * * e*/
Single-line Comment
. class{/* comment Content [modifier and modification time] */
}

1.9 Style attribute code abbreviation
A different class has the same attribute and the attribute value abbreviation
For two different classes, but with some of the same or even all the same attributes and property values, you should
Merging abbreviations, especially when there are multiple different classes with the same attributes and attribute values, can reduce the amount of code
and easy to control. Such as:

. Main-nav{background:URL (.. /images/bg.gif);Border:1px solid #333;width:100%;Height:30px;Overflow:Hidden;}. Sub-nav{background:URL (.. /images/bg.gif);Border:1px solid #333;width:100%;Height:20px;Overflow:Hidden;}

Two different classes of attribute values have duplicates, just can be abbreviated as:

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

b abbreviation for the same attribute
The same attribute can also be abbreviated according to its property value, such as:

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

Abbreviation for border inside and outside C
The distance in the CSS about the inside and outside border is arranged in the order of [upper right bottom left], when these four attribute values are not the same,
can also be directly abbreviated, in a clockwise direction

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

It can be abbreviated as:

{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 attribute values can be abbreviated to two directly, such as:

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

Abbreviations are:

{margin:10px 5px;}

And when the upper and lower left and right four border property values are the same, you can be directly abbreviated to one, such as:

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

Abbreviations are:

. BTN {margin:10px;}

d abbreviation for color value
The color value code can be abbreviated when the RGB three color value values are the same. Such as:

{color:#ff3333;}

can be abbreviated as:

{color:#f33;}

1.10 Hack Writing code
Because different browsers do not have the same support for the standards, each browser may interpret the page differently, such as
IE in many cases there is a 3px gap with FF, for these differences, you need to use CSS hack to adjust,
Of course, in the absence of necessary circumstances, it is best not to write hack to adjust, to avoid the hack caused by the page problems.
A IE6, IE7, Firefox compatibility between the wording
[Notation One]
IE can recognize *;
Standard browsers (such as FF) do not recognize *;
IE6 can recognize *, but can not recognize the!IMPORTANT,IE7 can recognize *, but also to identify!important;
FF does not recognize *, but can identify!important;

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

{Background-color:#333/**/*background-color:#666! Important/**/*background-color:#999/*   */}

The general three are written in the following order: FF, IE7, IE6.

[Two]
IE6 can recognize "_", and IE7 and FF are not recognized, so when only for the difference between IE6 and IE7 and FF, can be written as:

{Background-color:#333/**/_background-color:#666 /**/}

[Three]
*+html and *html is the unique label of IE, Firefox does not support.

{Background-color:#333;}  {background-color:#666/**/{  Background-color:#555/** *

b Shielded IE browser
Select is the selector and is replaced as appropriate. The second sentence is unique to the Safari browser on your Mac.

{font:12px!important/** *font:12px! Important/** *

C IE6 can be identified
A property is separated from a value by a CSS comment, and the comment is preceded by a colon. Such as:

{/**/:none;}

D IE's if condition hack notation
All IE identification <!–[if ie]> only IE <! [End If]–>
Only IE5 identification <!–[if IE 5]> only IE 5.0 <! [End If]–>
IE5 and IE5.5 all identify <!–[if gt ie 5.0]> only ie 5.0+ <! [End If]–>
Only IE6 identification <!–[if lt ie 6]> only ie 6-<! [End If]–>
ie5.x ~ IE6 recognition <!–[if GTE ie 6]> only ie 6/+ <! [End If]–>
Only IE7 recognition <!–[if LTE IE 7]> only IE 7/-<! [End If]–>

1.11 Clear Float
In Firefox, when a child is floating, the height of the parent cannot completely wrap the entire child, at which point
This clears the floating hack to define the parent once, which resolves the problem. Such as:

{content:"."; Display:block; height:0; Clear:both; Visibility:hidden;}

2 Common compatibility issues

A DOCTYPE affects CSS processing
B ff:div setting Margin-left, Margin-right is already centered when auto, ie does not work
D ff:body settings text-align,div need to set Margin:au to (mainly margin-left,margin-right)
to center
E FF: After setting padding, the div will increase the height and width, but IE will not, so you need to use!important to set more
a Height and width
F FF: Support!important, IE is ignored, can be!important for FF special style
G div vertically centered: vertical-align:middle; adds line spacing to the same height as the entire div line-height:200px;
and insert the text. The disadvantage is to control the content do not wrap
H cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can
I FF: link with border and background color, need to set Display:block, and set Float:le FT guarantees no line break.
Refer to MenuBar, set the height of a and menubar to avoid the bottom edge display dislocation, if not set height, you can insert a space in the
menubar. The
J's box model in Mozilla Firefox and IE does not explain inconsistencies resulting in a 2px difference. Workaround:
div{
margin:30px!important;
margin:28px;
}
Note that the order of the two margin must not be written in reverse, so it is not possible to write only margin:**px!important;
K ul tag in Mozilla default is padding value, and in IE only margin has value, so first define the program code
ul{
margin:0;padding:0;
}
3 Additional Instructions
A check the CSS
Check for spelling errors, forgetting the end of the}, and so on. You can use CLEANCSS to check for spelling errors in your CSS. The
Cleancss is a tool to lose weight for CSS, but it can also check for spelling errors.

b Determine where the error occurred
If the error affects the overall layout, you can delete the div block individually until you delete a DIV block and the display is OK
The location where the error occurred. Use the Border property to determine the layout characteristics of an error element, and using the Float property layout is error-prone.
The element boundary is determined by adding the border attribute to the element, which causes the error to be

c float Element Be sure to specify the Width property
Many browsers have bugs when displaying a float element that does not have a width specified. So regardless of the float element content, certain
The width property for which to specify. When specifying attribute values, use EM instead of PX as a unit.

d float element cannot specify attributes such as margin and padding
IE has a bug when displaying float elements that specify margin and padding. Therefore, do not specify the float element with margin and
The Padding property (you can nest a div inside a float element to set margin and padding).
You can also use the Hack method to specify special values for IE.

E The sum of the width of the float element is less than 100%
If the width of the float element is 100%, some old browsers will not display properly. So the sum of the width is guaranteed to be less than 99%.

F Reset Default Style
Some properties, such as margin, padding, and so on, can be interpreted differently by different browsers. So before the development of the entire
Margin, padding is set to 0, list style is set to none, and so on.

G on the question of height
If you are adding content dynamically, it is best not to define it highly. The browser can automatically scale, and if it is static content,
The height is best set.

CSS Basics 2