多语言展示
当前在线:1207今日阅读:27今日分享:41

CSS样式可重用的写法小结

CSS重用是为了提高开发效率和提升页面性能,但是重用与灵活之间存在一个度平衡的问题,以下是一些在日常开发中的经验1、提取常用属性,定义全局性CSS,比如一般我们开发中都会使用到一个公共全局性CSS,如下body {font-family:arial,B8BF53,serif;background:url(images/body_bg.gif) 0px 25px repeat-x #ededf0;font-size:12px; min-height:300px; }body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote{padding:0; margin:0;} table,td,tr,th{font-size:12px; padding:0;margin:0;}li{list-style-type:none;}table{ margin:0 auto;}我们把页面中相关元素都定义了一个全局属性,然后在需要的时候进行单个覆盖如 我们需要定义单独定义某个h1标签的外边距 之时.h1_title{margin:10px}html中引用样式 这样可以利用全局属性 还可以有单独的效果

2、定义一些十分灵活应用的样式,随时随地可以使用,比如颜色方面,比如链接方面,比如常用字号自字体。这些属性不必要在单独某个模块中去定义.cWhite,.cWhite:visited,.cWhite a{color:#fff;}.cYellow,.cYellow:visited{color:#ff0;}.cGreen,.cGreen:visited{color:#008000;}.cGray,.cGray:visited,.cGray a{color:#333;}.cDGray,.cDGray:visited,.cDGray a{color:#727171;}.cBlack,.cBlack:visited,.cBlack a{color:#000;}.cBlue,.cBlue:visited,.cBlue a{color:#1E50A2;}3、常用效果定义一些更微小的css模块 ,方便重用如.reg_box{ margin-left:20px; background:url(images/reg_bg.jpg) left top no-repeat; width:464px; overflow:hidden;width:230px; height:23px; }.reg_box .input1{line -height:23px;}reg_box .input2{ margin:36px 0 0 150px; border:none; }
推荐信息