网站用户体验整合设计-网站用户体验--根据项目需求定义常用CSS2基本定义例子

网站用户体验--根据项目需求定义常用CSS2基本定义例子

Post by 张美工, 2008-6-2, Views:

网站用户体验--根据项目需求定义常用CSS2基本定义例子

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

常被忽略，但我总喜欢加上@charset "gb2312"; [转载著名:W3C网页标准学院!]

全局宏观定义 [转载著名:w3c.web600.net]

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 */ [转载著名:W3C网页标准学院]

全局微观定义

各容器和表单，主要控制文字、图片
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;} [转载著名:http://w3c.web600.net]

文字-加粗与下划线

.f_b {}
.fs_b,.f_b * { font-weight:bold;}
.f_u {}
.fs_u,.f_u * { text-decoration:underline;} [转载著名:w3c.web600.net]

文字-链接下划线效果

.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;} /* 永久无 */ [转载著名:W3C 网页标准学院]

文字-大小

[转载著名:http://w3c_web600_net]

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

文字-颜色 [转载著名:w3c.web600.net]

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

图片-边框 [转载著名:W3C 网页标准学院]

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

上一篇: 用户体验--CSS常用小技巧

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总