HTML + CSS coding specifications

ArticleDirectory

•  

Before any project or system development, you need to customize a development convention and rules, which is conducive to unified overall style of the project,CodeMaintenance and expansion. As web project development is decentralized, independent, and interactive, it is particularly important to customize a set of complete conventions and rules.

Section 1 naming of CSS style files

When creating a style sheet file, write a style by category to the following style sheet files and place them in the CSS Folder:

Main	Main.css	Text Style	Font.css
Table	Table.css	Topic	Themes.css
Print	Print.css	Patch	Mend.css

At the initial stage of the project, different types of styles are stored in different CSS files for the convenience of CSS coding and debugging, in the later stage of the project, different CSS files will be integrated into one CSS file for the sake of website performance, and can be compressed if necessary.

Section 2 naming of CSS Separators

All selection characters must consist of lowercase English letters or underscores (_). The style name must indicate the approximate meaning of the style (such as div1, div2, style1 ......), Refer to "style naming reference ". The use of CSS selectors only allows the use of the derived selector, class selector, and attribute selector, and their combination. The ID selector is strictly prohibited (ID is used for JavaScript writing ).

For example: Li span {...} TD. Fancy {...} Input [type = "text"] {…}

When the defined style names are complex, use underscores to separate layers, such as dcrm_logo {...} Dcrm_logo_ico {...}

Section 3 Naming and writing of images

The naming principle of an image is that the names of lower-case English letters are separated by underscores (_). The headers indicate the main categories of the image, such as advertisements, logos, menus, and buttons; the tail part indicates the concept of an image. When saving images in PS, use "file" à "storage for Web and device Formats ".

Advertisement	Banner	Flag	Logo
Link pictures	Button	Decorative chart	PIC
Title Image	Title
Banner_sohu.png banner_sina.png, menu_about_us.png?menu_job.png, title_news.gif, logo_police.gif, logo_national.gif 、pic_lele.jpg

Section 4 CSS comments writing specification 4.1 tips and Tag Information comments

This is the most common way to annotate, and you can leave prompts for yourself or other developers to avoid unnecessary confusions and troubles in the future. This kind of application Simplicity is the most important.

. Search { Border: 1px solid # FFF;/* border color */}

Note: There are 3 spaces and 1 space between the comment content and the preceding style statement.

4.2 modify style comments (time and related personnel)

/* _ Styles updated: Thu 4.8.08 @ 5:15 p. M. Author: hour Optional --------------------------------------------------------------------------------------------*/

4.3 document structure

/* _ Header Optional --------------------------------------------------------------------------------------------*/ . Search { Border: 1px solid # FFF;/* border color */ Color: #333;/* color */} /* _ Menu Optional --------------------------------------------------------------------------------------------*/ . Menul_ul { Border: 1px solid # FFF;/* border color */}

Note: There is a blank line between two relatively independent segments.

Section 5 CSS layout encoding standards and recommendations 5.1 create style table Indexes

The index definition in the style sheet header helps you and others figure out the relevant information of the style sheet file. It is usually a formatted CSS comment text written in main.css. Provides information about the author of the CSS file, defines the layout of the site, and records the file version number (which facilitates multi-author collaboration and future updates)

/* Configure /*--------------------------------------------------------------------------------------------- * Filename: main.css * Description: global CSS * Version: 1.0.0 () YYYY-MM-DD * Website: http://www.testsoft.com = Structure: ========================================================== ====== * Page width: 980px * Number of columns: 2 Optional --------------------------------------------------------------------------------------------*/

5.2 use of named anchor

The named anchor is used to plan the structure of the entire CSS file (just like bookmarks), so that the entire CSS file can be well organized. The named anchor is usually written in the index comment in the style sheet header. CSS itself does not have an internal anchor system, so I generally use the following tips. Copy the anchor you want to find in the header index and search for the CSS section in the entire document.

* = Structure: ========================================================== ======== $ __Header Definitions $ __Menu Global Site $ __Content everything within the content Optional -----------------------------------------------------------------------------------------------*/ /* _ Header Optional -----------------------------------------------------------------------------------------------*/ {... Header CSS definitions ...} /* _ Menu Optional ----------------------------------------------------------------------------------------------*/ {... Header CSS definitions ...}

5.3 Establish a good CSS encoding sequence

The final CSS style will overwrite all existing or conflicting styles defined earlier. For example, the following example:

P {color: red; Background: yellow ;} P {color: green ;}

The above section will eventually display a green font with a yellow background, because the color: Green defined in the last section overwrites the previously defined red. Why does the yellow background not disappear, that is because the second p definition does not conflict with it, so it is valid.

5.4 proper abbreviations

In CSS, multiple attribute definitions of the same type are often specified as one. CSS abbreviations make CSS documents more clean and concise. For the abbreviations and syntaxes, see relevant chapters.

5.5 CSS image combination (CSS Sprites Technology)

CSS Sprites technology: combines all the small images (icons) used into one image, and uses the CSS background attribute to control the display position and method of the image. The Application of CSS Sprites technology can greatly reduce the number of HTTP requests, reduce the pressure on the server, and shorten the time delay required to hover over and load images, so that the effect is smoother and there is no pause.

5.6 CSS combination and nesting

CSSCombination

You do not have to repeat multiple delimiters with the same attributes. You only need to use commas (,) to separate the delimiters.

H2 {color: red ;} . W3cbbs {color: red ;} . W3cbbs_52css {color: red ;} Then you can write H2,. w3cbbs,. w3cbbs_52css {color: red ;}

CSSNesting

If the CSS structure is good, there is no need to use too many classes or identifiers. This is because you can specify the Separator in the separator.

. Top {background-color: # CCC; padding: 1em ;} . Top H1 {color: # ff0 ;} . Top P {color: red; font-weight: bold ;}

Section 6 common CSS selection operator naming reference

Navigation	NAV	Page header	Header
Main navigation	Mainnav	Page subject	Main
Top navigation	Topnav	Content	Content
Subnavigation	Subnav	Footer	Footer
Menu	Menu	Copyright	Copyright
Sub-menu	Submenu	Login	Login
Flag	Logo	Sidebar	Sidebar
Advertisement	Banner	Search	Search
Scroll	Scroll	Tab	Tab
Tips	Tips	Partner	Partner
Join	Joinus	Title	Title
Register	Regsiter	Guide	Guild
News	News	Download	Download
Button	Button	Status	Status
Service	Service	Vote	Vote
Note	Note	Links	Friendlink
Prompt information	MSG

Note: The naming method uses the "category _ FUNCTION" method (. bar_news {}. bar_product {}).

Section 7 Div + CSS page layout

Table layout because code redundancy is outdated, HTML pages generally adopt simple code Div + CSS layout. html pages can be divided into top, main, and bottom, in Main, you can set left and right. These CSS names must be meaningful names. The following code is used:

<Body> <Div class = "body"> <Div class = "TOP"> </Div> <Div class = "Main"> <Div class = "Left"> </Div> <Div class = "right"> </Div> </Div> <Div class = "bottom"> </Div> </Div> </Body>

Currently, tables are mainly used to display data tables. Try to use as few tables as possible in the layout.

Section 8 HTML code writing specifications

The HTML code on the page must comply with the XHTML specifications. XHTML can be read by all devices that support xml. At the same time, before other browsers upgrade to support XML, XHTML enables us to write well-structured documents that work well on all browsers and are backward compatible.

XHTML and HTML are different:

1. XHTML elements must be correctly nested.

2. The XHTML element must be disabled.

3. The tag name must contain lowercase letters.

4. The XHTML document must have the root element.

For the 1st point: the most likely error is the combination of the <Table> label. The direct sub-element of <Table> can only be: <thead>, <tbody>, <tfoot>, and <tr>. The direct sub-elements of <thead>, <tbody>, and <tfoot> can only be: <tr>, the direct sub-elements of <tr> can only be <TD> and <TH>, and other labels can be placed in <TD> and <TH>. In addition, similar labels include <DL>, <ul>, <ol>, and <SELECT> ....

Some labels are not recommended, such: <B> <strong> <I> <em> <strong> <dfn> <code> <SAMP> <KBD> <var> <cite> ......, Some of these labels can be controlled in a unified manner using CSS, while others are not often used. Some labels have special meanings, such as:

Note the indentation when writing HTML code. Press Ctrl + E + D in vs to format the text.

Section 9 Definition of website basic CSS

Website CSS must have a unified architecture, reuse CSS, and minimize repeated CSS definitions. Basic CSS is commonly used CSS definitions, such:

. Clear { Clear: both; } . Bold { Font-weight: bold; } . Left { Text-align: left; } . Error { Color: red; } . Succeed { Color: green; } . Center { Text-align: center; } . Fleft { Float: left; } . Fright { Float: right; } . Left15 { Margin-left: 15px; } . Radius { Border-radius: 5px; }

The CSS element selector can define a uniform style for the same label. Some labels should be defined using element CSS, such:

Body { Font-size: 12px; Font-family: Arial; Margin: 0; Padding: 0; Color: # 403f3f; Background: URL ('../images/page_top.png') Repeat-x top # d1d2d2; } A, A: Link { Color: #2a5685; Text-Decoration: none; Line-Height: normal; } A: hover { Color: # e0303a; Text-Decoration: none; Cursor: pointer; } Ul { Margin: 0px; Padding: 0px; } HR { Height: 1px; Border: none; Border-bottom: # dcdddd 1px solid; } H1, H2 { Font-size: 1.5em; Color: #000; } H3 { Font-size: 1.2em; } H4 { Font-size: 1.1em; }

Section 10 CSS debugging experience

Currently, the browser basically has client debugging tools. Therefore, when designing or debugging a page, try to use such tools instead of modifying the source file, and then refresh the page, you can use the client tool to add, delete, and modify the CSS corresponding to HTML elements in a timely manner. You can also obtain the specific values of the layout of HTML elements, such:

During CSS debugging in the later stage of the project, we should focus on the HTML + CSS Code formed after the page is displayed to the browser, rather than the source file, because many elements on the page are not in the source file, are dynamically generated. For those dynamically generated HTML elements, see what CSS is used on them, and then modify their CSS or add new CSS.

For css3, if css3 can achieve better visual effects, use it without worrying about browsers that do not support css3. After all, css3 is a development trend, designers of static pages should also be familiar with the effects of css3 (such as rounded corners, text shadows ......), To replace the effect that needs to be achieved by using images.