CSS－secrets 读书笔记（1）

开头先写点别的，今天终于离开了生活了一年的国家。 心里有点对未来的期待，终于不是个学生了。 出国一年， 获得的收获可能就是终于想通了以后想干什么吧， 人总要有一项技术傍身，进可成名立万，退可养家糊口。 今天登机前终于有一家投了简历的公司联系我了，也算一个好消息。前几天发现了一本写CSS很好的书，叫做CSS－secrets。 可惜的是网上并没有中文版，只用英文本。不过语句比较易懂。 写下笔记，以供查阅。
－赫尔辛基飞往北京
－GL R.T

Chapter 1 Introduction

1.最小化代码重复度

当需要修改一个属性的时候，尽量只需要最小限度的修改

看以下代码

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

如果我们要修改font－size的话，那么line-height也要对应的进行修改。 如果把代码改写为，
font-size: 20px;
line-height: 1.5;

我们想修改代码的时候，只需要修改font-size一个属性就可以了。 所以，当两个标签有联系的时候，尽量让他们的value也有相关性。
扩展： 如果我们要改变父元素的font-size，那么子元素的font-size自然也要跟着改变。 那么代码又可以改写为：

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

注意，有时也需要用具体数值，判断使用什么的方法是哪些元素需要随着div变化，哪些不会。

2.可维护性vs简洁性

有时候可维护性和简洁性是互相排斥的。 如果我们要做一个只有左边边框为0的border，

border-width:   10px, 10px, 10px, 0;

但是我们想要修改边框宽度的时候，要修改3个数值。

如果注重可维护性，

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

3.currentColor

currentColor 属性可以把颜色设置为CSS里的第一个颜色变量。

hr｛    height： .5em;    background: currentColor;｝

4.继承
继承可以极大的简化代码，它可以用在任意的CSS属性里，通常继承父元素的属性。 例如，继承form，

input， select， button｛font： inherit;｝

继承链接，

a{color: inherit;}

5.相信你的眼睛，而不是数值

6.On Responsive Web Design
尽量多的对网页进行测试。每个媒体询问都会给css加东西，不要轻易的添加它们，要正确地去使用它们。它们应该是最后用的在尝试过其它方法之后。
一些方法去避免：
使用百分比
当需要使用一个固定的宽度时，使用max-width.
当背景颜色需要覆盖整个包容器的时候，使用background-size: cover;
当用行，列去排列元素的时候，让列数可以随宽度变化。（使用display: inline-block）
当使用多列文本的时候，使用column-width代替column－count

7.理智的使用简略表达式
下面的两行CSS是不完全相等的，

background: rebeccapurple;background-color: rebeccapurple;

简略表达式会始终给你一个rebeccapurple的背景颜色。然后background-color会在遇到其它元素时停下。

8.是否要使用预处理
（没听说过，看不懂，跳过看后面有介绍。）

Chapter2 Backgrounds&Borders

1.半透明边框

利用rgba()和hsla()可以制作出半透明效果，但是它们主要用来制作背景。原因如下：
一些老的浏览器不会认识到这是一种新的颜色形式，像处理图片一样处理它们，只在背景中使用它们。
对于背景更容易提供撤回功能。
如果使用在别的地方，不能直接应用。

例子：

border: 10px solid hola(0,0%,100%,.5);background: white;

边框消失了！！！

原因时背景只自动延伸到了边框区域。 为了解决这个问题，CSS3中引入了background-clip。默认值是border-box。如果想让background延展到内部，那么代码改写为

border: 10px solid hola(0,0%,100%,.5); background: white; background-clip: padding-box;

2.多边框

实现办法1: box－shadow
很少有人知道box－shadow有第四个参数，扩散半径。它可以使阴影变得更大。0offset和0blur可以用阴影制造一个边框。由于我们可以在一个shadow上加另一个shadow，所以可以实现多边框。

实现办法2: outline
如果只需要2个边框，可以使用outline在border外面再加一个边框。

3.可变背景位置
有时候，我们想让背景从另一角落开始而不是左上。
方法1: 扩展背景位置
在CSS3，background－position允许设置边距。

background-position: right 20px bottom 10px;

方法2: background-origin 法
看如下代码，
padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;

每次修改padding，便要修改position，太麻烦了。 我们经常写 top left，但是，到底是哪个元素的top left。 在box model中有4个box，margin，border，padding，content。默认的，background position是padding。 因此图像不会使背景变的模糊。background-orgin可以对这个设置进行改变。

padding: 10px;
background: url(“code-pirate.svg”) no-repeat #58a bottom right;
background-organ: content-box;

这和之前的代码的效果一样，但是更加简洁。

方法3: calc()
我们想让背景距离底部10px距离右边20px。如果一定要用top left，那么我们可以用calc().
background-position: calc(100%-20px) calc(100%-10px)

4.内边框
有时候，我们只想让内边框是圆滑的，而外边框是尖的。
最简单的办法就是用一个div嵌套进另一个div。 不过这样是比较麻烦的。
解决办法： 使用shadow，但是对扩散半径有限制。（我觉得div套div就挺好，书上写了怎么求最小半径了，有兴趣的自行查阅。 我觉得有点奇技淫巧的感觉，不推荐。）

5.条纹背景
假设我们使用2种颜色来制造，
background: linear-gradient(#fb3, #58a);

修改代码
background: linear-gradient(#fb3 20%, #58a 80%).

可以看到，上20%和下20%都是纯色。
如果设置为50%，那么便上下分界。
缩小上下的高度
background： linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
如果设置第二个颜色的位置为0，那么下一个颜色会在上一个颜色结束时开始。
background： linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

如果设置成竖直，只需要加入to right属性就可以。 文章后面踢到了如何实现45度角。需要的时候自行查阅。