Most of the definition of CSS based on the requirements of the project customization, not suitable for each site, put forward a way of thinking.
- Mainly compatible with Moz & IE6. For many years without ie5.x, and also did not test the environment, work and their own projects have not considered IE5;
- The definition name mainly uses the single letter recognition. The main is to use their own, reduce the code, the semantic description is not very good;
- The use of a large number of inclusion selectors to increase the definition of reuse, the definition of the repetition of the writing is closed, the readability is also not so good;
- The link section definition is suitable for triggering no color change, adding only underscores;
- Comments are welcome. Possible partial definitions have a potential impact on compatibility, and personal use is constantly updated.
language Definition
Often overlooked, but I always like to add @charset "gb2312";
Global macro Definition
Html,body tags, and Moz module compatibility
html,body {margin:0 auto; font:12px Arial,helvetica,sans-serif, song body; line-height:150%; Text-align:center; Overflow-x:hidden; Color: #000;}
body>table,body>div {margin-left:auto; Margin-right:auto clear:both;}/* m0z *
Global Microscopic definition
Each container and form, the main control text, picture
Table,div,tr,th,td,ul,li,img,form,h2,h3,h4 {font:12px Arial,helvetica,sans-serif, Song Dynasty; margin:0; padding:0; border:0; Color: #000;}
div,td,ul,li,h2,h3,h4 {list-style-type:none; word-break:break-all; width:fixed; text-align:justify; Text-justify:inter-ideograph; line-height:150%; border:0;}
Input,select,textarea {color: #000; font:12px Arial,helvetica,sans-serif, song Body;}
Global Link Definition
The underline is triggered and the link color is unchanged
A {font:12px arial,helvetica,sans-serif, song body; color: #000; text-decoration:none;}
a:hover {text-decoration:underline;}
Text-title
H2,h2 a {font-size:16px; font-weight:bold;}
H3,h3 a {font-size:14px; font-weight:bold;}
H4,h4 a {font-size:12px; font-weight:bold;}
text-Bold and underline
. F_b {}
. fs_b,.f_b * {font-weight:bold;}
. F_u {}
. Fs_u,.f_u * {text-decoration:underline;}
text-Link underline effect
. A_VL A:LINK,.A_VL a:visited {text-decoration:underline;}
. A_VL a:hover{Text-decoration:none}/* Trigger no */
. a_hl a:link,.a_hl a:visited {text-decoration:none;}
. A_HL a:hover{Text-decoration:underline}/* Trigger has/*
. a_nl a:link,.a_nl a:visited {text-decoration:none;}
. A_nl a:hover{Text-decoration:none}/* Permanent no * *
text-size
. f_s_10,.f_s_10 * {font-size:10px;}
. F_s_12,.f_s_12 * {font-size:12px;}
. f_s_14,.f_s_14 * {font-size:14px;}
. f_s_16,.f_s_16 * {font-size:16px;}
Text-Color
. a_c_black,.a_c_black * {color: #000;}
. A_c_gray,.a_c_gray * {color: #666;}
. a_c_white,.a_c_white * {color: #fff;}
. a_c_red,.a_c_red * {color: #f00;}
picture-Border
. B_black {}
. bs_black,.b_black img {border:1px #000 solid;}
. B_gray {}
. bs_gray,.b_gray img {border:1px #999 solid;}
. B_white {}
. bs_white,.b_white img {border:1px #fff solid;}
Pictures-Banner ads
Common width banner, including longitudinal external patches, compatible with Moz
. ban,.ban_white,.ban_black {width:760px}
. ban img {margin:5px auto;}
. ban_white img {margin:5px auto; border:1px #fff solid;}
. ban_black img {margin:5px auto; border:1px #000 solid;}
List-row height
. l_16,.l_16 * {line-height:16px;}
. l_18,.l_18 * {line-height:18px;}
. l_20,.l_20 * {line-height:20px;}
. l_22,.l_22 * {line-height:22px;}
. l_24,.l_24 * {line-height:24px;}
. l_26,.l_26 * {line-height:26px;}
. l_28,.l_28 * {line-height:28px;}
. l_30,.l_30 * {line-height:30px;}
List-height
. l_h_18,.l_h_18 * {height:18px;}
. l_h_20,.l_h_20 * {height:20px;}
. l_h_22,.l_h_22 * {height:22px;}
List-cell width
. l_t_20 {}
. l_t_20 td {width:20%;}
. l_t_25 {}
. l_t_25 td {width:25%;}
List-Patches
Horizontal patches for lists
. L_p_5 {}
. l_p_5 * {padding-left:5px;padding-right:5px;}
. l_pr_5 {}
. l_pr_5 * {padding-right:5px;}
floating-position, offset, align
Combination definition, control position left and right, control floating list, cell top, picture, form horizontal alignment
. t_l,.t_l * {text-align:left;}
. t_c,.t_c * {text-align:center;}
. t_r,.t_r *,.f_la,.f_lb,.f_ld,.f_ls {text-align:right;}
. F_l,.f_la a,.f_lb b,.f_ld Div,.f_ls span {float:left;}/* F_la f_lb f_ld * *
. f_r {Float:right}
. v_t {Vertical-align:top}
. v_m,.v_m_o,.v_m_o * {vertical-align:middle;}
Interval-Internal patches
Common internal patch combination definition
. p_5 {padding:5px}
. p_t_5 {padding-top:5px}
. p_l_5 {padding-left:5px}
. p_r_5 {padding-right:5px}
. p_ape_5 {padding-top:5px;padding-bottom:5px}/* Apeak/*
. p_lev_5 {PADDING-LEFT:5PX;PADDING-RIGHT:5PX}/* level *
. p_10 {padding:10px}
. p_t_10 {padding-top:10px}
. p_l_10 {padding-left:10px}
. p_r_10 {padding-right:10px}
. p_ape_10 {padding-top:10px;padding-bottom:10px}/* Apeak/*
. p_lev_10 {padding-left:10px;padding-right:10px}/* level *
Spacer-External patches
Common external patch combination definition
. m_t_5 {margin:5px Auto 0 auto;}
. m_a_5 {margin:5px Auto;}
compatible
Moz layer automatic extension, clear float, Moz center
. h_h {height:0; clear:both overflow:hidden; margin:0 Auto;}//* m0z *
. C_c {Clear:both}
. c_m,.c_l_m,.c_l_m Div {margin:0 auto;}/* m0z *
