1.DRY——尽量减少改动时要编辑的地方是代码可维护的最大要素之一。2.实例: 1 .content button{ 2 padding: 6px 16px; 3 border: 1px solid #446d88; 4 background:#58a line ...
1.DRY——尽量减少改动时要编辑的地方是代码可维护的最大要素之一。
2.实例:
1 .content button{ 2 padding: 6px 16px; 3 border: 1px solid #446d88; 4 background:#58a linear-gradient(#77a0bb,#58a); 5 border-radius:4px; 6 box-shadow:0 1px 5px gray; 7 color: white; 8 text-shadow: 0 -1px 1px #335166; 9 font-size:20px;10 line-height:30px;11 12 }
以上CSS样式是对一个button进行样式的定义,存在以下几个问题:
(1)当我们想让按钮更大时,可以改变f ont-size 属性,通过改变字体来让按钮变大,但是相应的,行高 line-height 也需要改变。(行高=字体大小*1.5)
(2)font-size 定义为绝对长度值,当我们把父级的字号加大时,相应的子元素的字号也需要变大,才会协调。(所以将font-size改为百分比或是em单位比较好。)
(3)相应的,当要放大一个按钮时,padding ,border-radius等属性的尺寸也需要变化。(所以将尺寸改为百分比或是em单位比较好。)
(4)这里要注意的事,有些尺寸不需要改变的,eg:border的1px边框,是不必随着按钮的变大而加粗的,所以还是绝对长度。
(5)background:#58a linear-gradient(#77a0bb,#58a);——可以把半透明的黑色或是白色叠加在主色调上,即可以产生主色调的亮色和暗色变体。
通过以上思考,作者将代码修改如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test01</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 .content{ 8 width: 600px; 9 height: 600px;10 margin: 100px auto;11 border:1px solid pink;12 }13 .content button{14 padding:.3em .8em;15 border:1px solid rgba(0,0,0,.1);16 background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);17 font-size: 125%;18 border-radius: .2em;19 box-shadow: 0 .05em .25em rgba(0,0,0,.5);20 color: white;21 text-shadow: 0 -.05em .05em rgba(0,0,0,.5);22 23 }24 .content .b2{25 font-size: 200%;26 background-color: red;27 }28 </style>29 </head>30 <body>31 <div class="content">32 <button class="b1">Yes!</button>33 <button class="b2">Yes!</button>34 </div>35 </body>36 </html>
通过上面的修改:我们只要通过覆盖background-color和font-size就可以得到不同的颜色的大小的按钮。
相关知识点:
(1)px,em,rem
(2)hsla
(3)transparent
(4)rgba
(5)linear-gradient
原标题:CSS揭秘(1)编码技巧——DRY
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。