发表于： 2018-05-30 21:53:19
1 449
今天完成的事情：任务13
明天计划的事情： 任务14&15
遇到的问题：
收获：
css样式分离之再分离
实际上，CSS有几十种不同的属性，撇开一些不定参数（例如宽度，高度，颜色值）的样式，CSS的基础构成也是非常有限的，例如下面截取的的一小段CSS库样式（命名仅供参考）：
.l{float:left;}.r{float:right;}.cl{clear:both;}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}
.tdl{text-decoration:underline;}.tdn,a.tdl:hover,a.tdn:hover{text-decoration:none;}
.b{font-weight:bold;}.n{font-weight:normal; font-style:normal;}
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}
.fa{font-family:arial;}.ft{font-family:tahoma;}.fw{font-family:"微软雅黑"}.fs{font-family:'宋体';}
.rel{position:relative;}.abs{position:absolute;}.ovh{overflow:hidden;}
.dn{display:none;}.db{display:block;}.dib{display:inline-block;}.di{display:inline;}
.cur{cursor:pointer;}所以，理论上讲，几乎一半的样式效果，只需要上面这点CSS代码就可以了，例如，我们需要设置一个字体为“微软雅黑”，粗体，inline-block水平，相对定位的样式，则代码如下：
<strong class="fw dib rel"></strong>
样式的独立拆分，使得各种效果可以自由组合，这是有别于一个class类覆盖多个CSS属性的做法的。样式的独立拆分，精简的CSS文件，每个样式的重用性可谓发挥到的最大，同时，页面的后期维护变得异常轻松，样式冲突的可能性也是非常低的。实际上的CSS独立样式库不仅仅是上面展示的，还包括常见颜色，常见margin于padding值，清除浮动属性等。
返回列表
评论