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！

CSS3回炉计划-编码技巧相关推荐

css hack技巧_5种减少Hack的编码技巧
css hack技巧在本文中,我们将探讨五种方法,这些方法可以使用有效的编码来帮助垃圾回收器花费更少的CPU时间分配和释放内存,并减少GC开销. 较长的GC通常会导致我们的代码在回收内存时停止(也称 ...
5个编码技巧以减少GC开销
在本文中,我们将介绍五种方法,这些方法可以使用有效的编码来帮助垃圾回收器减少分配和释放内存的CPU时间,并减少GC开销. 较长的GC通常会导致我们的代码在回收内存时被停止(也称为"停止世界& ...
项目进度计划甘特图_甘特图做项目进度计划的技巧？
原标题:甘特图做项目进度计划的技巧? 甘特图怎么做项目进度计划?首先我们先了解一下,什么是甘特图. 甘特图(Gantt chart)又称为横道图.条状图(Bar chart),是由提出者亨利·L·甘特 ...
android编码技巧_我如何使用编码技巧使航空公司取代丢失的婴儿车
android编码技巧 by Kristóf Litavecz 通过克里斯托夫·利塔维奇(KristófLitavecz) 我如何使用编码技巧使航空公司取代丢失的婴儿车 (How I used my ...
编码技巧——使用Easypoi导出Excel、多sheet
本文主要介绍easypoi导出Excel的代码示例:自己之前手动实现过导出工具类<编码技巧--导出工具类>,基于实体和注解,通过反射来映射实体字段和exce列的关系:在部分工程里面看到了e ...
高级PHP工程师必备的编码技巧及思维（收藏）
好的开发者通常以代码质量来定义.在软件行业,写好的代码意味着在在测试,更新,扩展或者修复漏洞中省钱.本文,我将向你展示一些现实生活中技巧和想法的例子,来帮助你清理你的逻辑代码,重构它,让它变得更健壮和 ...
[回炉计划]当输入xxxxhub的时候，居然是这样
前言回炉计划第三篇,这是一个经典的前端面试题,考察范围非常的广,可深入的角度也非常的多.本篇文章的目的主要是回顾,所以内容和网络上流传的文章会有一定的重叠性. 过程过程大致分为以下几个步骤 DNS ...
程序员不要太过于看重编码技巧，相比而言思想更重要
太看重编码技巧,而不关注其思想,一般而言就是纯粹的coder. 注重思想,吸收里面的思想为你所用,我相信迟早会出成果的. 很多事情看上去没有多少关联,其实很多都是相通的. it界很多创新都是从生活中得 ...
c#编码技巧(三)：EventArgs的使用
c#编码技巧(三):EventArgs的使用如果有多个类要打印信息,如Student类,Teacher类,School类...如下代码.各类统一继承于EventArgs的话,那么传参就很方便了. u ...

CSS3回炉计划-编码技巧

CSS回炉计划-编码技巧