Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )
The basic principle
CSS styles can be broken down into three categories: custom styles, redefined HTML styles, link status style.
-
New CSS style style designers custom affect this region style to be used for performing partial page styling. . "" Style name + "style effects corresponding words or abbreviations described in the" Example: ".shadow"
text style style name ".no" + "font" + "Spacing" + "Color abbreviation" Example: ".no12", ".no12-24" -
Righteousness HTML styles for designers to redefine existing HTML tag style, is set to affect all of the label style for style definitions in a unified web labels. Style name "the HTML tags" Example: hr {border: 1px dotted # 333333}
-
State style designers set of particular style link different states, the influence of this style is the link region.
This style of writing there are two kinds: a.nav: link nav.a: link first only modifies <a> label; the second can be modified for all other tags contain <a> labels.
Loaded in the style pages must be linked with the way <link rel = "stylesheet" type = "text / css" href = "style / style.css">
Attention to detail
Collaborative development and division: i based on the respective module, while the page according to a similar procedure, the general framework previously written file, is assigned to the internal structure of the front end of the art to achieve expression & Behavior &; css file sharing base.css written by i, collaborative development process each page should be sure to introduction, this document contains reset and the head of the base style, this file can not be arbitrarily modified.
Using class and the id: id is unique and is the parent, and can be repeated class is a child, so the id is only used on a large block, can be used in repeated use of high class and the sub-stage; id in principle, all named after the distribution framework document for me, except as a JavaScript hook reserved.
JavaScript is reserved for naming hooks, please js_ start, such as: js_hide, js_show.
class and id named: large frames named such class header / footer / wrapper / left / right of In 2 Uniform Naming of i other style name lowercase English & Numerals & _ combined named as i_comment, fontred, width200. ; avoid the use of Chinese pinyin, try to use a simple word combinations; in short, to be named semantics, simple technology.
Avoid class name and id (this provision is important, if not understand, please communicate with i).
a, written by the dependent avoid, see Example D;
B, take the parent element id / class named part naming, see Example D;
C, high reuse are named, starting underlined own code, such i_clear;
d, a, b two, applied to the page in frame 2 has been completed, e.g., to page code has been built in the framework 2 <div id = "mainnav"> </ div> add new div element,
By a nomenclature: <div id = "mainnav"> <div class = "firstnav"> ... </ div> </ div>,
Writing style: #mainnav .firstnav {...}
B Press nomenclature: <div id = "mainnav" > <div class = "main_firstnav"> ... </ div> </ div>,
style of writing: .main_firstnav {...}
css properties writing order, it is recommended to follow the layout positioning properties -> own Properties -> Text Properties -> Other properties according to their own habit of writing this entry, but try to ensure that similar properties together to write property list: layout positioning properties include: margin. , padding, float (including clear), position (corresponding to the top, right, bottom, left), display, visibility, overflow and the like; own attributes include: width & height & background & border; text attributes include: font, color , text-align, text-decoration, text-indent and the like; other attributes comprising: list-style (pattern list), vertical-vlign, cursor, z-index (stacking order), zoom, etc. these attributes I listed. only the most commonly used, it is not the whole;
Before writing the code to consider and increase the reuse pattern;
Html full use of their property and inheritance reduce the amount of code style principles, such as:
<Ul class = "list"> <li> Here is a list of titles <span> 2010-09-15 </ span> </ ul>
定义ul.list li{position:relative} ul.list li span{position:absolute; right:0}
You can achieve the right home date display
Stylesheet Chinese font name, be sure to turn the code into unicode code, in order to avoid coding errors garbled;
Please use as a background image sprite technology, reduce http requests, taking into account the multiplayer collaborative development, production sprite by module;
When using the tag table (avoid using table tags), do not use width / height / cellspacing / cellpadding other properties directly defined performance table, should use its own private table structure and performance attributes separated as much as possible, such as thead, tr, th, td, tbody, tfoot, colgroup, scope; (cellspaing and cellpadding the css control method: table {border: 0; margin: 0; border-collapse: collapse;} table th, table td {padding: 0;}, base. css file, I will initialize the table style)
Elimination of <meta http-equiv = "X-UA-Compatible" content = "IE = 7" /> IE8 compatible;
Pictures do with png image, so the picture format png-8 format, if the png-8 really affect the picture quality or which have translucent effect, please define the background as separate ie6:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
Avoid using the compatibility attributes, such as text-shadow || css3 related attributes;
Reduce impact performance attributes, such as position: absolute || float;
Note must be added a large block pattern, an appropriate amount of cell block notation;
Code indentation and format: It is recommended to write a single line, according to their own habits, i will optimize the post-unification process;
Naming Rules
Head: header
Content: content / container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Peripheral control overall page layout width: wrapper
Right and left: left right center
Log Article: loginbar
Logo: logo
Advertising: banner
Main page: main
Hot: hot
News: news
Download: download
Sub navigation: subnav
Menu: menu
Sub-menu: submenu
Search: search
Links: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tab: tab
Article list: list
Message: msg
Tips: tips
Section title: title
Added: joinus
Guide: guild
Services: service
Registration: regsiter
Status: status
Voting: vote
Partners: partner
(B) Note the wording:
/* Footer */
Content Area
/* End Footer */
(C) id name:
(1) Page Structure
Container: container
Header: header
Content: content / container
Main page: main
Footer: footer
Navigation: nav
Sidebar: sidebar
Column: column
Peripheral control overall page layout width: wrapper
Right and left: left right center
(2) Navigation
Navigation: nav
Main navigation: mainbav
Sub navigation: subnav
Top Navigation: topnav
Edge navigation: sidebar
Left Navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Sub-menu: submenu
Title: title
Abstract: summary
(3) Function
Logo: logo
Advertising: banner
Login: login
Log Article: loginbar
Registration: regsiter
Search: search
Ribbon: shop
Title: title
Added: joinus
Status: status
Button: btn
Scroll: scroll
Tab: tab
Article list: list
Message: msg
Current: current
Tips: tips
Icon: icon
Notes: note
Guide: guild
Services: service
Hot: hot
News: news
Download: download
Voting: vote
Partners: partner
Links: link
Copyright: copyright \
Basic style:
/* CSS Document */
body {margin:0; padding:0; font:12px “\5B8B\4F53”,san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}
The first, followed by pseudo-class redefinition, custom finally, easy to read yourself and others!
Font consistency across browsers, recommended font size is defined by the number of points pt and pixels px, pt Times New Roman general use of Chinese 9pt and 11pt, px general use of Chinese 12px Arial and 14.7px which is optimized font size, bold or italicized plus when coarse, generally used font size of 11pt and 14.7px suitable. When the English-text, as far as possible we will be in English and digital verdana and arial defined as two fonts.