CSS coding standard

Posted by john

3/22/2007

Related Tags:
css manuals css templates css download css fillet css vertical middling css games css float CSS Font CSS Border css Margin css Padding CSS Table css fonts css borders css editor css hack css transparent css clear css filter css rolling css li css dotted line css spaced css files css shadow css fonts css position css css navigation of the book asp css css Notes css inheritance css padding css gradual css grammar css custom templates css input css middling css important css ul css overflow css link css positioning proficient css expression css space css tab css map css display css margindiv css bold css zen garden css authoritative guides css css hover css mandatory for firms

First, the Basic norms writing

1, and all the possible use external css call <LINK href = "/ style / style.css" rel = "stylesheet" type = "text / css">

Re-write the definition of the first, followed by pseudo-category, since the definition of the final (of which a: link a: visited a: hover a: actived in accordance with the order to write) to facilitate their own and other people to read.

To ensure that different browsers on the name the same, the series points pt proposed to use to define and pixel px, and the general use of Chinese pt 9 pt 10 lines and 11 pt, commonly used Chinese px 10 lines and 12 pt 14.7 px is optimized name, bold words bold or 10 lines, and the general selection of 11 pt 14.7 px more appropriate name.

2, CSS recommended template:

<style Type="text/css">
<! --
body (font-size: 9pt; font-family: Arial, Helvetica, sans-serif; color: # 333333; text-align: center; margin: 0px;)
Ul (margin: auto;)
Img (border: 0px;)
A (font-size: 9pt; text-decoration: none; color: # FFFFFF;)
A: hover (font-size: 9pt; text-decoration: underline; color: # 990000;)
A.1 (font-size: 9pt; color: # 3366cc; text-decoration: none)
A.1: hover (font-size: 9pt; color: # FF9900; text-decoration: none)

. Colorblue, colorblue: hover (color: # 003366;)
. Blue (font-family: "10 lines." Font-size: 9pt; line-height: 20px; color: # 0099FF; letter-spacing: 5em)

. ColorRed, a.colorRed: hover (color: # FF0000;)
. ColorLime, a.colorLime: hover (color: # 00FF00;)
. ColorGreen, a.colorGreen: hover (color: # 008000;)
. ColorBlue, a.colorBlue: hover (color: # 0000FF;)
. ColorOrange, a.colorOrange: hover (color: # FFA500;)
-->
</ Style>

In order to ensure the compatibility of the browser, pages should be provided Background <body bgcolor = "# FFFFFF">

3, which notes written, example: / * header begin! * /

Second, CSS reference named

1, commonly used CSS naming rules:
Head: header
: Content / container
Mei: footer
Navigation: nav
Sidebar: sidebar
Columns: column

2, intuitive naming

When designing Web pages, as well as the need for a logo of a div, the most natural idea is to use elements of the page can describe the location of vocabulary to its name. This approach allows id category, as well as the names of as shown below:

Top-down group: top-panel

Horizontal: horizontal-nav

Left: left-side

-- Columns: center-column

Right: right-col

These are XHTML and CSS class name and id effective manner. These terms can be simple people and, by definition, meet the identification page elements and the corresponding css style needs.

But the problem is that such content pages with the names of the specific expression associated. These names reference to a particular page layout of the page elements in place, in addition to the use of this layout will appear inappropriate or even understandable confusion. At the same time, these names does not involve any document content structure. Therefore, the following is the type of CSS, as well as better name ID methods.

3, the structure of the name

The structure means that the expression / location information with the content of the complete separation - including appear in labeling (markup) in the name of the class and id.

Marked the relevant information is used to describe the structure of documents rather than appearance. This feature allows us to provide a simple way to change the CSS appearance of the different formats of content (content), as well as labeling (markup) reuse. When you understand this way, it is easy to use can be found on pages for the category and location id naming the way in dealing with such as audio (audio) format on the appearance it is very inappropriate. Therefore, in the document should be based on the purpose of use of a Position rather than to the type and structure of the naming id.

According to the structure shown in the following way on the type of id and name:

Some of the top eye-catching: branding

Navigation: main-nav

Main content sections: main-content

These names with intuitive naming the same manner as very understandable, but they describe the role of the page elements rather than location. This makes the code more in line with the use of a purely structural markers (structural markup) of the mind, that is, developers can not change the markings on the circumstances of the media variety show format for processing.

Even if you do not intend to in other media on the Web page format changes to the use of structured naming can also help you in the future of the site upgrade or redesign in more easily. For example, to avoid naming structure of the same when a div id right-column pages move to the left after the chaos brought about by. Div sidebar on the use of such naming it is more appropriate, because it appears in the pages of which side, the names of developers who are still intuitively understandable.

4, practices

Andy Clarke of 40 standardized by the respected Web design concept designed by the developers of the Web site's source code. Although the category name and id not reunification, but still found some of the frequently used name. Here are the most commonly used / id examples of the name of the list:

Header

Content

Nav

Sidebar

Footer

If you want to see the complete list can look at the most common naming convention Table

These common type, as well as whether the name id marks the birth of a standard or a generally accepted practice? Although it is my hope that, but I do not think so. I do hope that we can see a set of the day can see that the common page elements naming standards. At the same time, the use of standardized naming search page elements can be made on the Web site, as well as upgrading convenient, especially when required by different developers in different time for the development of the site to return the time to work.

Review:

The layout of the exterior div can name them in ways (such as header, footer), the other I think it should be with a description of the contents contained in the standard designation (such as menu, news)

5, custom named:

According to w3c website given, it is best Meaning named for example: it is important to highlight the news (like red)
There are two
. Red (color: red)
. Important news-(color: red)
Obviously the significance of the second convey more clearly, as far as possible not to use the significance is not clear, as the names of their own self-definition

Third, CSS style written order

1, show that attribute
* * Display list-style Float * * * position clear

2, own property
* * Margin Width * Height Padding * * * background border

3, text attributes
Font Color * * * * text-decoration text-align
* * Vertical-align white-space * * other text content

Standardized reference

This instruction is a development of norms, is a scripting language reference, this is not a static norms must strictly abide by the provisions of special circumstances to flexibility in the use of some sort of modifications. However, we must not arbitrarily change norms. If you have any questions, please contact me with a timely manner, I will promptly changes the relevant norms of sample code and documentation.

/ Basic requirements

1. Website in the root directory created images common temp three subdirectories, according to media need to create a subdirectory, put different images in the directory pages to use columns of the public picture, such as the company's logo, banner, menu, buttons, etc.; common subdirectory in the release css, js, php, and other public documents include; temp subdirectory release provided by the text, picture, and so on the original information in the media release flash subdirectory, avi, quick time multimedia documents.
2. In the root directory should, in principle, in accordance with the Home column structure, and a column to each create a directory, according to the need of each of the columns in the creation of a directory of media images and subdirectories to put this column proprietary picture and multimedia files, if the content of this column in particular, and to tell a lot of the lower sections, corresponding to the re-creation of other directory.
3. Temp files in the directory more often, the proposed name for the creation of a directory of the time, customers will have to provide the information sorted.

4. Unless there are exceptional circumstances, directory, file with the names of all the lowercase letters, numbers, underscores the portfolio, which shall not contain Chinese characters, spaces and special characters; directory name if possible in English as a guide, not as a last resort Do not use Pinyin as a directory name, experience has shown that directory with the name of Pinyin often even a month after themselves fail to understand it,

/ Scripting

We should have a consistent style of the script overall concept, meaning one month before and one month after you write the script style consistency, as well as with a working group of different developers to write scripts to maintain consistent style, because it is impossible for us never isolated development, you always have the potential and three months before their cooperation (your customer demands revision), often in different studios and colleagues developed a project, there may be asked to revise the development of service personnel The script, of course, you could have dropped a project to later colleagues.

1. html definitive document template:

<html>
<! --
Generator: Sub Design Studio (www.eastline.net.cn)
Creation Data: 2000-8-1
Original Author: eastline
-->
<head>
<title> Document title </ title>
<meta Http-equiv="content-type" content="text/html; charset=gb2312">
<meta Name="author" content="eastline">
Other meta marker

</ Head>
<body Bgcolor="#ffffff">
……
</ Body>
Added:
In order to ensure the next generation of Web site with standards-compliant xml web page, all the HTML tag attributes to a single or double quotation marks enclosed in quotation marks, that is, we should write <a href = "url"> rather than <a href = url >.

2. Allow full-text search pages, in order to make the Internet search engines can effectively search, in the Channel Home of the html <head> </ head> Keywords and should be included among Description meta tags, for example:

3. CSS document format sample code:

Here is particularly noteworthy that a: link a: visited a: hover a: actived the order must strictly as the above sample code, it will be more or less the problem. In addition, we provided the first re-defined, pseudo-category Secondly, the definition Finally, the ease of their own and others to read!

To ensure that different browsers on the name the same, the series points pt proposed to use to define and pixel px, and the general use of Chinese pt 9 pt 10 lines and 11 pt, commonly used Chinese px 10 lines and 12 px 14.7 px is optimized name, bold words bold or 10 lines, and the general selection of 11 pt 14.7 px more appropriate name.

Writing <table> mutual nested, in strict accordance with the norms for a separate <table>, <table> <tr> alignment, indent <td> 2-byte characters spaces, if in <td> have nested forms <table> 2-byte characters are indented spaces, if <td> In the absence of any nested forms </ td> marked the end should be <td> in the same line, not-for-line,

If we paid attention to the source code should not be in this code:

<td> <img Src="http://www.pcwiki.net/Html/class4/2006-3/30/"../images/sample.gif"">
</ Td>
It should be like this:

<td> <img Src="http://www.pcwiki.net/Html/class4/2006-3/30/"../images/sample.gif""> </ td>
This is because the browser equivalent to that for a space-byte characters, the above non-standard wording inadvertently increase equivalent to a space-byte characters, if indeed there are a byte characters need to increase space, it should be written like this:

<td> <img Src="http://www.pcwiki.net/Html/class4/2006-3/30/"../images/sample.gif""> </ td>
Belong to the same level of <table> necessarily Zuoshou Alignment, and allowed nothing in the empty cells exist, equivalent to a high degree of greater than 12 cells should px In "td> and </ td> between writing 1, if the height is less than 12 px, they should be and In "td> </ td> 1 * is inserted between the size of a transparent gif picture, it is because certain browsers that empty cells and would not be illegal explained. If the code sequence more chaos, can be adopted in DW3 command-> apply souce formatting to rearrange!

5. Width and height wording also have a unified standard, under normal circumstances only a form, write width In "table> labels, only his party forms height write In" table> labels, and more and more out of line forms, width and height, or write in the first line of the first column <td> labels. In short follow one principle: there is no more than one control with a cell size of the height and width to ensure that no one width and height are effective, that is, you change any code in a width and height values, which should be in browser see change. Not easy to do this one needs a longer period of time to practice and reflection.

/ General principles

1. Arranged forms, please all of you should carefully ponder the best programmes, as far as possible forms of control in the three-tier nested within, and should be avoided as far as possible <colspan> <rowspan> two marks, experience has shown that these two markers will bring many troubles.

2. A website to try to avoid a large table with the whole, all the elements are nested in the form of large, because the browser Element in the interpretation of the pages, are forms for each unit, if a page is Nested in the form of a big, it was very likely that the consequences is that when surfers at Knock, he must first face a blank for a long time, and then all of the content of the sites at the same time. If this to be done, please use <tbody> markings to be able to make the big block forms show.

3. Typesetting, we often encounter the need to indent the first line treatment, or do not use the entire space angle to achieve the desired effect, and standardized practices in the style sheet is defined in the p (text-indent: 2em;) and then to each section add <p> markings attention to, under normal circumstances, please do not omit </ p> marked the end.

4. Principle, we prohibit the use of <img width =? Height =?> Anthropogenic interference with the picture to show that the size, and the proposed labelling <img> Do not bring width and height two properties, it is because the production process, the picture often require repeated changes to avoid human intervention picture showed the size, as far as possible, play the function of the browser itself, but a side effect of this web site is not loaded when the picture, the picture will not leave stations size , may result in the process of loading pages in jitter (if inserted in the picture is a fixed size in the table, will not have this phenomenon), particularly when the larger picture, this phenomenon will be very obvious, When this will be expected to lead to significant jitter of the website will happen, we must be requested in the final attached to <img> width and height attributes.

5. Play to the maximum level of the browser automatic typesetting functions, in a period of complete text advised not to use <br> sub manual intervention.

6. Text between different languages there should be a box-byte characters, but to avoid the symbol before and the first bullet after the end of the symbols of Chinese characters except between the punctuation to use the whole angle punctuation, English letters and numbers in square brackets around the brackets should be used byte characters.

7. Name all the style sheet should be used to achieve, in the pages of a prohibited <font size =?> Marker.

8. Please do not appear in the Web page for more than one also minimize the use of the entire space angle (English character set, the entire space will be turned into hash angle), blank should make full use of text-indent, padding, margin, hspace, vspace gif and transparent picture to achieve.

9. Mixed in English, we will be in English and as far as possible the number defined as verdana and arial two fonts.

10. Spaced propose percentage definition used is the value of the two-spaced line-height: 120% / 150%.

11. Site in the path of all the relative path, the general link to a directory the default document links path not write full name, if we do not have this: <a href = "aboutus / index.htm"> should be this way : <a href="aboutus/">

12. Embedded graphics text of the use of larger fonts, graphics is not recommended to include in the text.

13. "Page size" is defined as page size of the sum of all documents, including HTML documents and all the embedded object. Users want faster rather than novelty site. The demodulator users, page size maintained at 34 K Following is appropriate.

/ File naming principle

1. Each directory should contain a default html files, with a unified index.htm

2. Uniform with the name of the English lowercase letters, numbers, and underscores combination.

3. Guided by the principle of naming First, make your own thinking and working groups for each of the members to facilitate understanding of the significance of each document, and the second is when we used in the folder "by name Pai case of" order, with a categories of documents can be arranged together, so that we find, modify, replace, and so on calculating load operation.

4. Below the "news" (which includes "Domestic News" and "World News") to illustrate this column html document naming principles:

☆ created in the root directory under the directory news

☆ first news of the default name index.htm

☆ all belong to the "national news" news were named: china_1.htm, china_2.htm,…

☆ all belong to the "international news" news were named: internation_1.htm, internation _2.htm,…

☆ If the file is the number of double-digit, please previous nine documents named: china_01.htm, china_02.htm to ensure that all the documents in the folder in the right sort.

5. Picture naming several norms guided by the following principles:

☆ name into craniocaudal February 2 parts separated by underscores.

☆ said that the first part of the big picture of this nature, such as advertising, signs, menus, buttons and so on.

☆ general:

Placed at the top of the page advertisements, decorative patterns, such as rectangular picture we named: banner
Signs of the picture we named: logo
Not in a fixed position on the page and links with the small picture we named button
In a certain position on the page in a row, the nature of the same picture we have of links column name: menu
Decorative pictures we named: pic
Non-title picture links that we name: title
In accordance with this principle and so forth.

☆ tail section to the specific meaning of that picture.

☆ Below are a few sample, we should be able to see a picture to understand the significance of:
Banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif
Title_news.gif logo_police.gif logo_national.gif pic_people.jpg
Pic_hill.jpg.

Css attributes and the general use of filters

Before finishing the article, although the standard does not support filters, but sometimes still feel it will be used, it again today to put forward, when there is a need for enquiries to be Alpha: Setting transparency; (Filter: alpha (opacity = opacity, finishop...

Decryption. Htm.html.shtm.shtml contact with the distinction

Each page or a web page has its fixed suffix were different suffix were corresponding to different file formats and different rules, agreements, and using the most common web page suffix were yes. Html and. Htm But this is only the most basic web page two file formats, and today we web page ...

ArcIMS learning HTML Viewer Notes: Javascript minutes

1. Another Frame in the JavaScript variables: Var can be used in other frameworks: Frame name. Variable name to call 2. In <Table> <TR> - Table Row <TD> - Table Data 3. <IMG> Elements&...

Common CSS code

Dreamweaver Qiao drag system can be full-screen images

We can use the mouse to Dreamweaver layer on the page, drag, but to drag on the screen difficult, Below is a way of accomplishing: Production steps: One for pictures, back.jpg name, as follows: Second, build a file named drag.htm htm, and write the f...

CSS and DIV Web Page Design

Categories

Tags Cloud

Links

Popular Articles

CSS coding standard

Standardized reference