div css naming convention_html/css_WEB-ITnose

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文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

• 首页


• 介绍


• 服务