CSS样式管理笔记

80酷酷网    80kuku.com

  css|笔记 参考很多站点的方案,综合了自己的理解,注意最后修改时间。

仅仅是笔记,不是结论。希望各位都是能够独立思考的好青年。

style_global
* { font:12px Arial; color:#000;}

html { border:0; overflow-x:hidden; border-right:1px #fff solid;}
body { margin:0;}
body>table,body>div { margin-left:auto; margin-right:auto; clear:both;}

table,form,div,img,td,ul,li,dl,dt,dd { margin:0 auto; padding:0; border:0;}
div,td,li,dt,dd,h2,h3,h4,p { list-style-type:none; word-break:break-all; Width:fixed;}
b,strong { font-weight:bold;}

a { text-decoration:none;}
a:hover { text-decoration:underline;}
a:focus { -moz-outline-style:none;}

h2,h2 a     { font:bold 16px Arial;}
h3,h3 a     { font:bold 14px Arial;}
h4,h4 a     { font:bold 12px Arial;}
style_hack.clearer { height:1px; overflow:hidden; margin-top:-1px; clear:both;}
style_fonts.fs_10,.fs_10 *   { font-size:10px;}
.fs_12,.fs_12 *   { font-size:12px;}
.fs_14,.fs_14 *   { font-size:14px;}
.fs_16,.fs_16 *   { font-size:16px;}

.fw_n,.fw_ns,.fw_n * { font-weight:normal;}
.fw_b,.fw_bs,.fw_b * { font-weight:bold;}
.fw_h,.fw_hs,.fw_h * { font-weight:lighter;}

.ls_1,.ls_1 *    { letter-spacing:1px;}
.ls_2,.ls_2 *    { letter-spacing:2px;}
.ls_3,.ls_3 *    { letter-spacing:3px;}
.ls_4,.ls_4 *    { letter-spacing:4px;}
.ls_5,.ls_5 *    { letter-spacing:5px;}

.td_un a:link,.td_un a:visited { text-decoration:underline;}
  .td_un a:hover { text-decoration:none;} /* link */
.td_nu a:link,.td_nu a:visited { text-decoration:none;}
  .td_nu a:hover { text-decoration:underline;} /* hover */
.td_nn a:link,.td_nn a:visited { text-decoration:none;}
  .td_nn a:hover { text-decoration:none;} /* none */

.td_u,.td_us,.td_u * { text-decoration:underline;}

.c_fff,.c_fff *    { color:#fff;} /* white */
.c_999,.c_999 *    { color:#999;} /* gray */
.c_f00,.c_f00 *    { color:#f00;} /* red */

.lh_16,.lh_16 *   { line-height:16px;}
.lh_18,.lh_18 *   { line-height:18px;}
.lh_20,.lh_20 *   { line-height:20px;}
.lh_22,.lh_22 *   { line-height:22px;}
.lh_24,.lh_24 *   { line-height:24px;}
.lh_26,.lh_26 *   { line-height:26px;}
.lh_28,.lh_28 *   { line-height:28px;}
.lh_30,.lh_30 *   { line-height:30px;}
style_display
.f_l    { float:left;}
.f_r    { float:right;}
.f_n    { float:none;}

.ta_c    { text-align:center;}
.ta_l    { text-align:left;}
.ta_r    { text-align:right;}

.c_l      { clear:left;}
.c_r      { clear:right;}
.c_b      { clear:both;}

.d_i    { display:inline;}
.d_b    { display:block;}
.d_n    { display:none;}

.o_h    { overflow:hidden;}
.va_t    { vertical-align:top;}
.center    { margin-left:auto; margin-right:auto;}

.f_la,.f_lb,.f_ls { text-align:right;}
.f_la a,.f_lb b,.f_ls span { float:left;}

.m_0    { margin:0px;}
.m_5    { margin:5px;}
.m_10    { margin:10px;}

.mt_0    { margin-top:0px;}
.mt_5     { margin-top:5px;}
.mt_10    { margin-top:10px;}
.mt_15    { margin-top:15px;}
.mt_20     { margin-top:20px;}
.mt_30    { margin-bottom:30px;}
.mb_0    { margin-bottom:0px;}
.mb_5     { margin-bottom:5px;}
.mb_10     { margin-bottom:10px;}
.mb_15    { margin-bottom:15px;}
.mb_20     { margin-bottom:20px;}
.mb_30    { margin-bottom:30px;}
.mr_5     { margin-right:5px;}
.mr_10     { margin-right:10px;}
.mr_15    { margin-right:15px;}
.mr_20     { margin-right:20px;}
.mr_30    { margin-right:30px;}
.ml_5     { margin-left:5px;}
.ml_10     { margin-left:10px;}
.ml_15    { margin-left:15px;}
.ml_20     { margin-left:20px;}
.ml_30    { margin-left:30px;}

.p_0    { padding:0px;}
.p_5     { padding:5px;}
.p_10    { padding:10px;}

.pt_0    { padding-top:0px;}
.pt_1    { padding-top:1px;}
.pt_2    { padding-top:2px;}
.pt_3    { padding-top:3px;}
.pt_4    { padding-top:4px;}
.pt_5     { padding-top:5px;}
.pt_10     { padding-top:10px;}
.pt_15    { padding-top:15px;}
.pt_20     { padding-top:20px;}
.pb_0     { padding-bottom:0px;}
.pb_1    { padding-bottom:1px;}
.pb_2    { padding-bottom:2px;}
.pb_3    { padding-bottom:3px;}
.pb_4    { padding-bottom:4px;}
.pb_5     { padding-bottom:5px;}
.pb_10     { padding-bottom:10px;}
.pb_15    { padding-bottom:15px;}
.pb_20     { padding-bottom:20px;}
.pr_1    { padding-right:1px;}
.pr_2    { padding-right:2px;}
.pr_3    { padding-right:3px;}
.pr_4    { padding-right:4px;}
.pr_5     { padding-right:5px;}
.pr_10     { padding-right:10px;}
.pr_15    { padding-right:15px;}
.pr_20     { padding-right:20px;}
.pl_1    { padding-left:1px;}
.pl_2    { padding-left:2px;}
.pl_3    { padding-left:3px;}
.pl_4    { padding-left:4px;}
.pl_5     { padding-left:5px;}
.pl_10     { padding-left:10px;}
.pl_15    { padding-left:15px;}
.pl_20     { padding-left:20px;}

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: