HTML+CSS Writing Specifications

It is necessary to customize a development convention and rules before any project or system development, which facilitates the overall style unification, code maintenance and extension of the project. Because of the dispersion, independence and integration of Web project development, it is important to customize a set of complete conventions and rules.

The first section of the CSS style file naming

When creating a stylesheet file, categorize the styles into the following stylesheet files and place them uniformly in the CSS folder:

Main	Main.css	Text Style	Font.css
Form	Table.css	Theme	Themes.css
Print	Print.css	Patch	Mend.css

In the early stages of the project, different categories of styles will be placed in different CSS files, is for the convenience of CSS writing and debugging, in the late phase of the project for the performance of the site will be integrated with different CSS files to a CSS file, if necessary, can be compressed.

Section II Naming of CSS selectors

All selectors must have lowercase letters or "_" underscores, and the style name must be the approximate meaning of the style (forbidden to appear like Div1, Div2, Style1 ...). ), refer to the following "style naming reference". Using the CSS selector allows only derived selectors, class selectors, and property selectors, as well as their combined use, and it is strictly forbidden to use the ID selector (ID is for JavaScript writing).

such as: Li span {...} td.fancy {...} Input[type= "text"]{...}

When the defined style names are more complex, use underscores to separate levels, such as: dcrm_logo{...} dcrm_logo_ico{...}

The name and writing of the picture in the third section

The naming principle of the picture lowercase English letter name in the head and tail of the two parts, with "_" underline separated, the header indicates that the picture of large class properties such as ads, logos, menus, buttons, etc., the tail represents the concept of the picture. When the designer saves the picture in PS, use "file" à "save the format used for the web and device".

Advertising	Banner	Sign	Logo
Small linked pictures	button	Decorative drawings	Pic
Picture of the title	Title
Banner_sohu.png, Banner_sina.png, Menu_about_us.png, Menu_job.png, Title_news.gif, Logo_police.gif, Logo_ National.gif, Pic_people.jpg

Fourth section CSS Annotation writing specifications 4.1 hints and tag information comments

This is the most common way to note that you can leave a message for yourself or other developers to avoid unnecessary confusion and trouble later on. This application simplicity is of paramount importance.

. search{ border:1px solid #fff; /*border color*/}

Note: There are 3 spaces between the comment content and the preceding style statement, followed by 1 spaces

4.2 Modifying style annotations (time and related people)

/*__styles Updated:thu 4.8.08 @ 5:15 p.m. Author:hour --------------------------------------------------------------------------------------------*/

4.3 Document structure

/*__header --------------------------------------------------------------------------------------------*/ . search{ border:1px solid #fff; /*border color*/ Color: #333; /*color*/} /*__menu --------------------------------------------------------------------------------------------*/ . menul_ul{ border:1px solid #fff; /*border color*/}

Note: 1 lines are empty between the relatively independent 2-segment content.

Section fifth CSS layout coding standards and recommendations 5.1 setting up a style sheet index

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

/*--------------------------------------------------------------------------------------------- *filename:main.css *description:global CSS *version:1.0.0 (2009-12-28) yyyy-mm-dd *website:http://www.testsoft.com ==structure:=================================== = = = = = = ===== *page width:980px *number of Columns:2 --------------------------------------------------------------------------------------------*/

5.2 Use of named anchor points

Named anchors are used to plan the entire structure of the CSS file (just like bookmarks), so that the entire CSS file gets a good organization. Named anchors are also generally written in index comments on the header of the style sheet. CSS itself does not have an internal anchor system, so I generally use the following tips to complete. Copy the anchor point you want to find in the head index and look it up throughout the document to get the CSS section.

*==structure:=============================================== $__header Header Definitions $__menu Global Site $__content everything within the content -----------------------------------------------------------------------------------------------*/ /*__header -----------------------------------------------------------------------------------------------*/ {... Header CSS Definitions ...} /*__menu ----------------------------------------------------------------------------------------------*/ {... Header CSS Definitions ...}

5.3 Creating a good CSS encoding sequence

The last CSS style defined will overwrite any existing or conflicting styles that were previously defined, such as the following example:

p {color:red; background:yellow;} p {color:green;}

The above paragraphs will eventually appear in a green font with a yellow background, because the last defined Color:green will overwrite the previously defined red, as to why the yellow background does not disappear, because the second P definition does not have a conflicting definition, so it is still valid.

5.4 Appropriate abbreviations

Abbreviations are often used in CSS to designate multiple attribute definitions of the same type as one. The CSS abbreviation makes the CSS document cleaner and more concise, and the abbreviation syntax refers to the relevant chapters.

5.5 CSS image flattening (i.e. CSS sprites technology)

CSS Sprites technology: The use of all the small pictures (icons) into a picture, the use of CSS background properties, to control the location and manner of the image display. The application of CSS sprites technology can greatly reduce the number of HTTP requests, reduce the pressure on the server, and shorten the time lag required for hover loading pictures, so that the effect is smoother and will not be paused.

5.6 CSS Combination and nesting

CSS Combination

You don't have to repeat multiple selectors with the same attributes, you just need to separate the selectors with commas (,).

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

CSS Nesting

If the CSS structure is good, there is no need to use too many classes or identity selectors. This is because you can specify the selectors within the selector.

. top {padding:1em;} . Top h1 {color: #ff0;} . top p {color:red; font-weight:bold;}

Section Sixth common CSS selector naming reference

Navigation	Nav	Page Header	Header
Main navigation	Mainnav	Page body	Main
Top Navigation	Topnav	Content	Content
Sub-navigation	Subnav	Footer	Footer
Menu	Menu	Copyright	Copyright
Sub-Menu	Submenu	Landing	Login
Sign	Logo	Side bar	Sidebar
Advertising	Banner	Search	Search
Rolling	Scroll	tab page	tab
Little Tricks	Tips	Our Partners	Partner
Join	Joinus	Title	Title
Registered	Regsiter	Guide	GUIld
News	News	Download	Download
Button	button	State	Status
Service	Service	Vote	Vote
Comments	Note	Friendship Link	Friendlink
Prompt information	Msg

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

Seventh section div+css the layout of the page

Table layout because the code redundancy is obsolete, so the HTML page generally adopts the code concise DIV+CSS layout, the HTML page can be broadly divided into top, main and bottom, in main and can be left and right, these CSS names must be meaningful names. As in the following code:

<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 table is mainly used to show the data table, anyway, in the layout of the minimum use of table.

Eighth section HTML code Writing specification

The HTML code of the page must conform to the XHTML specification, XHTML can be read by all XML-enabled devices, and XHTML enables us to write well-structured documents that work well with all browsers, until the rest of the browsers are upgraded to XML support. And can be backwards compatible.

The difference between XHTML and HTML:

1. XHTML elements must be nested correctly.

2. XHTML elements must be closed.

3. The label name must be in lowercase letters.

4. The XHTML document must have a root element.

For 1th: The most likely error is that the direct child element of the,<table> with the <table> tag can only be:<thead>, <tbody>, <tfoot>, and <TR , while the direct child elements of <thead>, <tbody>, and <tfoot> can only be: <tr>, while the direct child elements of <tr> can only be <td> and <th> Other labels can be placed in <td> and <th>. In addition, similar tags are:<dl>, <ul>, <ol>, <select>

Some tags are not recommended for use, such as:<b><strong><i><em> <strong> <dfn> <code> <samp> <kbd ><var> <cite>, ..., because some of these tags can be used in CSS to control the unified, and some are not used frequently, some tags are special meaning, such as:

When writing HTML code, be aware of indentation and press Ctrl+e+d in VS to format text.

Nineth. Definition of web base CSS

Web site CSS must have a unified architecture, reuse CSS, to minimize the duplication of the definition of CSS. The basic CSS is the usual CSS definitions, such as:

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

CSS element selectors can have a uniform style definition for the same tag, and some tags should use element CSS definitions, such as:

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

Tenth section CSS Debugging experience

The current browser basically has a client debugging tools, so when the page design or debugging, try to use such tools, instead of changing the source files, and then refresh the page, using the Client tool can be used to add, delete, HTML elements corresponding to the CSS, you can also get the HTML element layout of the specific values, Such as:

CSS debugging at the end of the project should be focused on the page presented to the browser after the formation of the HTML+CSS code, rather than focus on the source file, because many elements on the page is not in the source file, is dynamically generated, for those dynamically generated HTML elements, look at the CSS above it is what, Then go to modify its CSS or add a new CSS.

For CSS3, if CSS3 can achieve better visual effects, then use, do not have to control those who do not support CSS3 browser, after all, CSS3 is a development trend, for static page designers should also be familiar with the CSS3 of those effects (such as rounded corners, text shadow ...). ), instead of using the image to achieve the previous effect.

HTML+CSS Writing Specifications