Basic knowledge of DIV + CSS web page layout, divcss

Basic knowledge of DIV + CSS web page layout, divcss

CSS naming rules

I. File naming rules

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

Ii. Naming rules for common classes/IDS

Webpage: header
Content
Container: container
Footer: footer
Copyright: copyright
Navigation: menu
Main navigation: mainMenu
Subnavigation: subMenu
Logo: logo
Banner
Title: title
Sidebar: sidebar
Icon
Note: note
Search: search
Button: btn
Login: login
Link
Information Box: manage
......

 

Frequently Used classes should be named based on common English words as much as possible, so that they are easy to understand and can be annotated in appropriate places. For the second-level class/ID naming, the composite writing mode is used, and the first letter of the last word should be written as follows: for example, the "search box" should be named "searchInput", "Search icon", and "Search button" should be named "searchBtn ".

CSS writing specifications and Methods

I. general writing specifications and Methods

1. Select DOCTYPE:

XHTML 1.0 provides three types of DTD declarations:

Transitional: requires a very loose DTD, which allows you to continue using the HTML4.01 logo (but it must conform to the xhtml syntax ). The complete code is as follows:

 

Strict: a Strict DTD is required. You cannot use any identifier or attribute of the performance layer, such
. The complete code is as follows:

 

Framework: a dtd designed specifically for the Framework page. If your page contains a framework, you need to use this DTD. The complete code is as follows:

 

The scenario is strictly a DTD, but for most of our designers who are new to web standards, the Transitional DTD (XHTML 1.0 Transitional) is an ideal choice currently (including this site, is also a transitional DTD ). Because this DTD also allows us to use the identifier, element, and attribute of the presentation layer, it is easier to pass W3C code verification.

2. Specify the language and character set:

Specify the language for the document:

 

To be correctly interpreted by the browser and validated by W3C code, all XHTML documents must declare the encoding languages they use. For example:
Common Language definitions:

Standard XML document language definition:

Language definition for browsers of earlier versions:

To improve the character set, we recommend that you use UTF-8 ".

3. Call the style sheet:

External style sheet call:

Page embedding: The style sheet is directly written in the head area of the page code. For example:

<Style type = "text/css"> <! -Body {background: white; color: black;}-> </style>
External call method: Write the sample table in an independent .css file, and then use the code similar to the following in the page head area.

<Link rel = "stylesheet" rev = "stylesheet" href = "css/style.css" type = "text/css" media = "all"/>

In the design that complies with the Web standard, it is recommended to use external call methods. You can change the page style without modifying the page but only modifying the .css file. If all pages call the same style sheet file, you can change the style of all files by changing the style sheet file.

4. Select appropriate elements:

Select HTML elements based on the document structure, rather than the HTML element style. For example, use the P element to contain text paragraphs, rather than for line breaks. If appropriate elements cannot be found during document creation, you can consider using a common div or span;

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

Use as few labels and structure nesting as possible, which not only makes the document structure clear, but also keeps the file small, while improving the user download speed, it is also easy for the browser to interpret and present the document;

5. Derivative selector:

You can use the derived selector to define a style for the child element in an element, which simplifies the name and makes the structure clearer, for example:

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

6. Secondary Image Processing with a back image:

"Secondary images" here refer to images that are not part of the content to be expressed on the page, but only used for modification, interval, and reminder. You can use the CSS style to modify the back image without modifying the page, for example:

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

7. structure and style separation:

Only the structure of the document is written on the page, and the style is written in the css file. The CSS style sheet is called externally to separate the structure from the style.

8. Structured Writing of documents:

CSS documents on the page should be written in a structured manner, with clear logic and easy to read. For example:

<Div id = "mainMenu">
<Ul>
<Li> <a href = "#"> homepage </a> </li>
<Li> <a href = "#"> introduction </a> </li>
<Li> <a href = "#"> service </a> </li>
</Ul>
</Div>

/* = 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;
}
/* ===== Main navigation end ===== */

9. Mouse gestures:

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

Ii. annotation writing specifications

1. Line comment:

Directly after the property value, such:

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

2. comments for the entire segment:

Add comments at the beginning and end, for example:

/* = Search Results = */
. Search {
Border: 1px solid # fff;
Background: url (../images/icon.gif) no-repeat #333;
}
/* ===== Search end ===== */

Iii. Abbreviation of style attribute code

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

For two different classes, but some of them are the same or even all of them are the same attributes and attribute values, the abbreviations should be merged, 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 easy 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;
}

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

# MainMenu, # subMenu {
Background: url (../images/bg.gif );
Border: 1px solid #333;
Width: 100%;
Overflow: hidden;
}
# MainMenu {height: 30px ;}
# SubMenu {height: 20px ;}

2. abbreviations of the same attribute:

The same attribute can also be abbreviated based on its attribute value, for example:

. Search {

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 the outer and outer borders:

In CSS, the distance between the inside and outside borders is arranged in the order of top, right, bottom, and left. When these four attribute values are different, they can be abbreviated directly, for example:

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

It can be abbreviated:

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

If the top, bottom, left, and right border attribute values are the same, the attribute values can be abbreviated as two, for example:

. Btn {
Margin-top: 10px;
Margin-right: 5px;
Margin-bottom: 10px;
Margin-left: 5px;
}

Abbreviation:

. Btn {margin: 10px 5px ;}

When the attribute values of the top, bottom, and left borders are the same, you can simply abbreviated them as one, for example:

. Btn {
Margin-top: 10px;
Margin-right: 10px;
Margin-bottom: 10px;
Margin-left: 10px;
}

Abbreviation:

. Btn {margin: 10px ;}

4. Abbreviation of color value:

The color value code can be abbreviated to the color value code when the three color values of RGB are the same. For example:

. Menu {color: # ff3333 ;}

Abbreviations:

. Menu {color: # f33 ;}

Iv. hack writing specifications

Because different browsers have different W3C standards, different browsers have different interpretations of the page. For example, IE has a 3px gap with FF in many cases. For these differences, it is necessary to adjust the css hack. Of course, it is best not to write the hack to adjust it when there is no need to avoid page problems caused by the hack.

1. Compatibility Between IE6, IE7, and Firefox:

Statement 1:

IE can recognize *; standard browsers (such as FF) cannot recognize *;
IE6 can recognize *, but cannot recognize it! Important,
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;
According to the above expression, the CSS hack of the same class/ID can be written:
. SearchInput {
/* All three are allowed */
* Background-color: #666! Important;/* Only IE7 */
* Background-color: #999;/* Only IE6 and IE6 */
}
Generally, the writing sequence is FF, IE7, and IE6.

Statement 2:

IE6 can recognize "_", while IE7 and FF cannot be identified. Therefore, when only the difference between IE6 and IE7 and FF can be written as follows:
. SearchInput {
/* General */
_ Background-color: #666;/* Only IE6 can be recognized */
}

Statement 3:

* + Html and * html are unique tags of IE, which are not currently supported by Firefox.
. SearchInput {}
* Html. searchInput {background-color: #666;}/* Only IE6 */
* + Html. searchInput {background-color: #555;}/* Only IE7 */

Shield Internet Explorer:

Select is a selection character, which is replaced according to the situation. The second sentence is unique to the safari browser on MAC.

*: Lang (zh) select {font: 12px! Important;}/* FF dedicated */
Select: empty {font: 12px! Important;}/* safari visible */

IE6 recognizable:

Here we mainly use CSS annotations to separate an attribute and a value, and comment it before the colon.

Select {display/* IE6 not recognized */: none ;}

Statement of the if condition hack of IE:

All IE identifiable:

<! -[If IE]> Only IE <! [End if]->
Only IE5.0 can recognize:
<! -[If IE 5.0]> Only IE 5.0 <! [End if]->
IE5.0 for IE5.5 can both be identified:
<! -[If gt IE 5.0]> Only IE 5.0 + <! [End if]->
Only IE6 can recognize:
<! -[If lt IE 6]> Only IE 6-<! [End if]->
IE5.x under IE6 and IE6 can be identified:
<! -[If gte IE 6]> Only IE 6/+ <! [End if]->
Only IE7 can recognize:
<! -[If lte IE 7]> Only IE 7/-<! [End if]->

2. Clear floating:

In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating HACK can be used to define the parent level.

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