你的位置:首页 > 软件开发 > 网页设计 > CSS揭秘(1)编码技巧——DRY

CSS揭秘(1)编码技巧——DRY

发布时间:2017-08-23 20:00:10
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

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。