根据项目需求定义 常用CSS2基本定义例子

网络整理 - 07-26

大部分定义根据项目需求定制,并不适合每个网站,提出一种思路,抛砖引玉。
主要兼容MOZ & IE6。好多年不用IE5.x了,而且也没测试环境,工作和自己项目都已不考虑IE5;
定义名主要采用单字母识别。主要是自己使用,减少代码,语意描述显然不是很好;
大量采用包含选择符增加定义重用,定义写法上重复都为合写,可读性同样不是那么好;
链接部分定义适用于触发不换色,只增加下划线;
欢迎提出意见。可能部分定义对兼容有潜在的影响,个人使用不断更新。
语言定义

常被忽略,但我总喜欢加上@charset "gb2312";

全局宏观定义

html,body标签,以及MOZ的模块兼容
html,body { margin:0 auto; font:12px Arial,Helvetica,sans-serif,宋体; line-height:150%; TEXT-ALIGN:center; overflow-x:hidden; color:#000;}
body>table,body>div { margin-left:auto; margin-right:auto; clear:both;} /* M0Z */

全局微观定义

各容器和表单,主要控制文字、图片
table,div,tr,th,td,ul,li,img,form,h2,h3,h4 { font:12px Arial,Helvetica,sans-serif,宋体; 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,宋体;}

全局链接定义

触发出现下划线,链接颜色不变
a { font:12px Arial,Helvetica,sans-serif,宋体; color:#000; text-decoration: none;}
a:hover { text-decoration:underline;}

文字-标题

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

文字-加粗与下划线

.f_b {}
.fs_b,.f_b * { font-weight:bold;}
.f_u {}
.fs_u,.f_u * { text-decoration:underline;}

文字-链接下划线效果

.a_vl a:link,.a_vl a:visited { text-decoration:underline;}
.a_vl a:hover{ text-decoration:none;} /* 触发无 */
.a_hl a:link,.a_hl a:visited { text-decoration:none;}
.a_hl a:hover{ text-decoration:underline;} /* 触发有 */
.a_nl a:link,.a_nl a:visited { text-decoration:none;}
.a_nl a:hover{ text-decoration:none;} /* 永久无 */

文字-大小

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

文字-颜色

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

图片-边框

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