CSS3: The missing manual 《css3秘笈》笔记+布局、设计优秀资源整理

最近一直在搞css，也没回学校，希望别把Js和算法的东西统统忘掉了。。。然后一直在实习，感觉还可以吧，就是一直捞不着有技术含量的活儿干，有时候挺心塞的。
长话短说，今天的任务是看完《css3： the missing maunal》，译作《css3秘笈》。这本书由浅入深，由于CSS算是系统学过一遍，所以有些东西可能就一带而过了，笔记以补充为主，整理了一些零碎的知识点，和好的网站，资源。

1、如何选择适当的语义化标签?

参考网站html5doctor

2、类和名的命名规则
字母，数字，-和_
必须以字母开头
区分大小写

3、一种趋势：多用类选择器，少用id选择器

4、伪类用:，伪元素用::
但如果继续用:，有利于ie8以下的浏览器识别。
::selection只有双冒号的版本，而且只能修改color和backgroud-color。
可以增加前缀使浏览器识别，如-moz-selection

5、: not() 的限制，只能用简单选择器，不能连用多个。

6、serif字体适用于长篇文字，包括times new roman,georgia,times
sans-serif字体适用于标题，包括arial, verdana, geneva, tahoma, trebuchet MS, century gothic
monospaced字体适用于计算机代码，每个字母都是等宽。courier new, lucida console, copperplate light, marker felt

arial black 和 impact字体只有一种形式，font-weight和font-style设置为normal

7、
@font-face

@font-face{    font-family: "League Gothic";    src: url("fonts.league_asdfhgothic.ttf")}

8、shadow的例子：
https://webexpedition18.com/articles/css3-text-shadow-property
真是 漂亮！
这个网站值得一看

9、 数字可以直接表示行高。
line-height: 1.5;
等于150% 或者 1.5em;

10、 通常用负的text-indent和正的margin值，使负文本缩进不会突出页面或者边沿。若设定为百分比值，以父元素的宽度为基准。

11、 font 属性必须包含font-size和font-family选项，且必须放在最后写。
指定行高加一个正斜杠 1.5em/150%
font-size/line-height

12、list-style-position 属性 ，设为outside时更突出列表的每一项，设为inside时则使列表宽度最大。利用padding-left属性可以调整项目符号与其文本见的距离。

13、 免费图表和项目符号
css2还提供了counting scope, counting increment.
这个功能很强大啊！
（dl 下面 有 dt dd，ol 下面 有 li）
给父元素counter-reset， 后面还可以跟个整数（integer），来表示从哪儿开始（integer + 1）。

ol{ counter-reset: li;}ol > li:before{content:counter(li);counter-increment:li;}

dl{counter-reset:my-counter;}dl dt:before{content:counter(my-counter);counter-increment:my-counter;position:absolite;}

demo1
demo2
list-style-image无法定位，所以应当换用background-image

14、margin padding 若设宽度，都是以父元素的宽度为基准衡量的。上下的top bottom的margin会发生折叠，两个碰在一起时，只有大的那个生效。左右边距则不会折叠，定位的也不会折叠。
padding 必须是正值，但margin可以不是。

15、行内元素的top bottom margin会失效，左右可以加空格

16、使用border时通常会添加padding

17、border-radius可以用百分比设定，也可以用40px/20px（即水平半径/垂直半径）设定，这两种都易导致椭圆形的圆角，浏览器会用元素宽度的百分比来算水平半径，高度的百分比来算垂直半径。

18、box-shadow的glow效果是通过在第三个值和颜色值之间加入阴影尺寸（speard）来达到的。会将阴影扩展指定的量。

div{width:100px;height:75px;background-color:lightyellow;border:1px solid black;box-shadow:inset 2px 2px 12px 4px yellow}

似乎黑白看得更清楚诶：

接下来不计数了，因为太难记了。

–width height 与 margin，padding不同，是以父元素的宽对宽，高对高为基准的。

–float两个各占屏幕50%的元素，采用box-sizing:border-box选项。让width中包含了padding， border。默认是content-box, 还有一个不常用的选项是padding-box。

–max-width和min-width
通常的做法是，用百分比设定了width/height，再用绝对值比如px设定了max-width/min-width

盒子模型宽度 = width > min-width ? width : min-width           = width >max-width ? max-width : width

–float不能完全用display:flex来代替，比如很多很多文字配两张图片的那种，仍然需要把图片左右float来达到文字包裹图片的效果。

–除了图片之外，所有标签的浮动元素都要设置宽度。编写html要注意浮动元素必须出现在任何包围浮动元素的内容之前。

–背景和边框如何在碰到Float元素时停下来？可以在有背景、边框的元素上设置overflow:hidden，或者在浮动元素的周围添加足够粗的，与背景色一致的边框。

–background的巨大威力：
http://www.csszengarden.com/219/ 这个做的不错，有空可以扒一扒

– 如何选取不同的图片：gif会失真，如果不需要用到动画，那稍后讲到的png8会更好更快；jpeg颜色算法好，但文字和大块纯色区会有光斑，适用于照片；png综合特性强，png24/32高质量但大，png32 支持 alpha透明

–background-image的url地址，如果是相对地址，则是相对于样式表的，而不是html。

–URL的三种方式
绝对路径：适用于不在一个服务器上的文件
相对根目录的路径：用/开头的表示网站的根文件夹，适用于存放在自己网站上的突破
相对路径：都挺好的，就是最好不要随便改变外部样式表的的存储路径，否则容易出错。

–可以用background:center center来控制水平居中一张背景图片。对repeat的图片来说，会调整其开始重复的起点位置。关键字还有 left right top bottom

–background通常不会被打印出来。如果计划让访问者打印网页，比如网站地图，logo，< img>还是要用啊。

–如果背景图片的size中有一个是px有一个是auto 图片会被拉缩到对应的px然后保持原始比例。

–线性渐变，径向渐变
http://lea.verou.me/css3patterns 参考网站
实际控制的是background-image
记得一定要加浏览器前缀！！！！一定要加！！
实际做的时候多试几次就知道咋回事了。

background-image:-webkit-radial-gradient(20% 40%,circle farthest-side,red,blue);//20% 40% 指的是元素左边20%处，上方40%处开始渐变，就是圆心的位置，circle可以去掉，那样的话就是一个椭圆形的渐变，circle则是一个正圆形的渐变，cloest-side是渐变从中心延伸到离中心点最近的那一边，同理cloest-corner,farthest-side,farthest-corner。径向渐变也可以repeating-radial-gradient(circle,red 20px,orange 30px,yellow 40px,red 50px)background-image:-webkit-repeating-linear-gradient(bottom left,#900 20px,#fc0 30px, #900 40px);// 第一个定义角度，或者说是从哪里开始指向。角度和position不同，比如45deg就是过元素中心的点，但角度是45deg,左侧是0，右侧是180，上是270deg，下是90deg，自己推算吧。然后可以插多个颜色，并以%或px定义宽度。注意宽度是递增的，从该角度其多少px是某一颜色，而不是某一颜色占的单独的宽度。

一个径向渐变重复的实例，很丑。。。

web将渐变都当做图片image处理，因此可以结合其他属性比如background-size/position等等。

鼎鼎有名的css渐变生成器
colorzilla