CSS3回炉计划-编码技巧

---

CSS揭秘

总结了《CSS揭秘》中引言的编码技巧，未来将实现其中的所有例子，回炉重造我的CSS技术！

---

例子演示代码：

    .test{
        padding: 6px 16px;
        border: 1px solid #446d88;
        background: #58a linear-gradient(#77a0bb,#58a);
         /*linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。*/
        border-radius: 4px;
        /*圆角边框*/
        box-shadow: 0 1px 5px gray;
        color: white;
        text-shadow:0 -1px 1px #335166;
        font-size: 20px;
        line-height: 30px;
    }

效果图：

技巧-1

当某些值相互依赖时，应该把它们的相互作用关系用代码表示出来：

  font-size: 20px;
  line-height: 1.5;

技巧-2

绝对值很容易掌握，但是每次修改都会让人崩溃，改用百分比或者em单位就好多了：

   font-size: 125%;
   line-height: 1.5;

当父级的字号是16px：

当父级的字号是32px：

改变父级字号，按钮尺寸随着变化，但是不协调。

技巧-3

将长度值改为em单位，此时就要注意哪些效果该跟着按钮放大，哪些效果希望不变。

    padding: .3em .8em;
    border: 1px solid #446d88;
    background: #58a linear-gradient(#77a0bb,#58a);
    border-radius: .2em;
    box-shadow: 0 .05em .25em gray;
    color: white;
    text-shadow:0 -.05em .05em #335166;
    font-size: 125%;
    line-height: 1.5;

这样随着父级字号改变，按钮也会变得协调

技巧-4

有时候代码易维护和代码量少不可兼得，例如：在元素四周，除了左侧，添加宽10px的边框：

	border-with:10px 10px 10px 0;

只需要一条声明就可以了，但是如果日后改动边框宽度，就要同时改3个地方，可以拆成两条声明的话就容易多了：

	border-with:10px;
	border-left-with:0;

技巧-5

在css3-color中，增加了一个特殊的颜色关键字currentColor，它是从SVG哪里借鉴过来的，这个关键字并没有绑定一个固定的值，而是一直被解析成color，这个特性让它成为CSS中有史以来第一个变量（书中原话）
比如将所有水平分割线，自动的与文本的颜色保持一致，有了currentColor之后就可以这样写：

hr{
	height: .5em;
	backgroud: currentColor;
}

技巧-6

inherit可以用在用在任何CSS属性中，举例说明把表单元素字体设置与页面的其它部分相同，并不需要重复指定字体属性，只需要利用inherit的特性即可：

	input,select,button{font:inherit;}

技巧-7

合理的在CSS中使用简写，

	background:rebeccapurple;
	background-color:rebeccapurple;

第一项是简写，可以得到紫色rebeccapurple的纯色背景，但是如果使用的是某个展开的单个属性（background-color），那这个元素的背景可能被background-image声明替换为图片上的其它任何东西。
例子：

    background: url(tr.png) no-repeat top right /2em 2em,
                url(br.png) no-repeat bottom right /2em 2em,
                url(bl.png) no-repeat bottom left /2em 2em;

注意到background-size和background-repat的值被重复了三遍，尽管每层背景的这两个值确实是相同的。
如果职位某一个属性提供一个值，那它就会扩散并应用到列表中的每一项。因此。我们可以把这些重复的值从简写值中抽出来写成一个展开式属性：

    background: url(tr.png) top right,
                url(br.png) bottom right,
                url(bl.png) bottom left;
    background-size: 2em 2em;
    background-repeat: no-repeat;

现在我们只要修改一处就可以改变所有的background-size和background-repat了。

总结

总结并记录了《CSS揭秘》引言中比较常用的技巧，未来将会更新复现书中的每一个例子，希望同好们给个三连支持一波，咱们一起重新学习CSS！