CSS Mastery Advanced Web Standards Solutions Second Edition
Author:Andy Budd
I have been addicted to reading this book for a few days.It is just like chatting with a wise man.The feeling is so great. ^ 。^
I strongly recommend you read this book.
首先，我想说，我真的为这本书着迷。近期读这本书，就像在和一位智者对话，又或者像是在和一个志同道合的朋友聊天，它耐心的把我在学习和实践的过程中所积攒的疑惑和思考的问题一 一解答。这本书不是一本CSS入门书，建议有CSS基础的同学阅读，相信你会和我一样，惊喜的发现这本书里蕴藏的宝藏。由于第二版是2010年出版的，那个时候CSS3还没有得到各大浏览器很好的支持，所以有些内容现在已经不适用了，但是，这本书更多的是教会我了解技术发展的历史，了解在那个技术受限的年代，作者是如何去思考和解决问题的。就像大漠老师说的，技术重于技巧。在我看来，只有知其然以及知其所以然，把基础打牢固了，才能创造出新的东西。而不是通过百度，谷歌去解决眼前一时的问题，解决了之后也不知道为什么这样就解决了。
Chapter 1 基础知识
- 意义的重要性（也就是现在大家说的语义化）
- 一个ID名只能应用于页面上的一个元素，而同一个类名可以应用于页面上任意多个元素。
- 在分配ID和类名时，一定要尽可能保持名称与表现方式无关。（自己在去年刚开始自学css时，也喜欢依据表现来命名，比如：.red 。现在想起来，好傻好天真，哈哈）自己习惯使用驼峰命名法，比如.andyBudd，关于命名的写法，CSS魔法发表了一篇博客：https://github.com/cssmagic/blog/issues/42
- 类应该应用于概念上相似的元素，这些元素可以出现在同一页面上的多个位置，而ID应该应用于唯一的元素。
- 为了减少不必要的标记，应该只在没有现有元素能够实现区域分割的情况下使用div。
- 使用FireFox,可以下载和安装各种插件，对代码进行有效性验证。
Chapter2 为样式找到应用目标
- 常用的选择器包括类选择器、ID选择器、标签选择器、伪类选择器，通用选择器（*），高级选择器包括子选择器、相邻同胞选择器、属性选择器。
- 后代选择器由其他两个选择器之间的空格表示。
- 同一个元素可能有两个或更多的规则，通过层叠来处理这种冲突。
- 选择器的特殊性分为4个等级：a,b,c,d。
- 如果样式是行内样式，那么a=1
- b等于ID选择器的总数
- c等于类、伪类和属性选择器的数量
- d等于类型选择器和伪元素选择器的数量
如：style=“” 特殊性：1,0,0,0 计算值：1*10^3=1000;
#content() 特殊性:0,1,0,0 计算值：1*10^2=100；
div p{} 特殊性:0,0,0,2 计算值：2*10^0=2;
5. 当你遇到CSS规则没起作用时，很可能是出现了特殊性冲突。
6. 当引用多个CSS文件时，如果对于同一个元素应用了多个规则，那么后引入的CSS文件起作用。
7. 继承就是应用样式的元素的后代会继承样式的某些属性，比如字号。
8. 规划、组织和维护样式表
- 设计代码结构
- 导入样式表比链接样式表慢。
- 在CSS文件中添加必要的注释，可以方便自己和他人维护代码。
- 如果CSS文件很长，那么寻找特定的样式会很困难。这种情况下可以在每个注释头中添加一个标志，搜索这个标志和注释头中的前几个字母，就可以立即找到要寻找的文件部分。如：/* @group general styles*/
- 删除注释和优化样式表。
Chapter 3 可视化格式模型
标准盒子模型
width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型
width不是内容的宽度，而是内容、内边距和边框的宽度总和。
现在CSS3的box-sizing属性可以定义要使用哪种盒子模型，
box-sizing:content-box; //原理如同标准盒子模型
box-sizing:border-box; //原理如同IE盒子模型
outline属性
outline （轮廓）是绘制于元素周围的一条线，位于边框（border）边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，不影响元素的大小或定位，不影响页面的布局，因此轮廓有助于修复bug。
外边距叠加
参考：http://www.cnblogs.com/snowinmay/archive/2013/04/28/3048997.html
当两个或更多垂直外边距相遇时，他们将形成一个外边距，这个外边距的噶度等于两个发生叠加的外边距的高度中较大者。
- 当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加。
- 当一个元素包含另一个元素时（假设没有内边距或边框将外边距分隔开），它们的顶或底外边距也会发生叠加。
- 外边距甚至可以与本身发生叠加。假设有一个空元素，它有外边距，但是没有边框或内边距。在这种情况下，顶外边距与地外边距就碰到了一起，它们会发生叠加。
-只有普通问答流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
关于如何解决这个外边距叠加的问题，知乎：http://www.zhihu.com/question/19823139
-使用*将margin和padding值设置为零来覆盖浏览器样式会对option等元素有不利影响。因此要使用全局reset把内边距和外边距显示的设置为零更安全。
定位概述
元素分为块级元素和行内元素。常见的行内元素包括<span> <a> <input>等。通过display属性可以改变元素框的类型。常见的属性值有：inline,inline-block,block，table-cell等。
css中有3种基本的定位机制：普通流、浮动和绝对定位。
普通流
普通流中元素框的位置由元素在HTML中的位置决定。块级元素从上到下一个接一个的垂直排列，行内元素在一行中水平排列。
相对定位、绝对定位、固定定位
- 相对定位 如果一个元素进行相对定位，它是以它在文档流中的初始位置为参照点。如果将top设置为20px，那么它就会相对于原位置向下移动20px。在使用相对定位时，元素仍然占据原来的空间。
- 绝对定位的元素的位置与文档流无关，因此不占据空间。绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块（个人觉得是body啊）。
- 绝对定位的元素与文档流无关，所以他们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的叠放次序，z-index的值越高，框在栈中的位置就越高。(这里可以结合ps中的图层的叠放次序来理解)
- 相对于已相对定位的祖先元素对框进行绝对定位时，在IE6中有一个Bug,相对定位的祖先元素必须已经设置尺寸。
- 固定定位 固定元素的包含块是视口，这使我们能够创建总是出现在窗口中相同位置的浮动元素。IE6不支持固定定位。
浮动
- 浮动定位的元素脱离文档流，不占据空间，就像一个隐形人~
- 框的文本内容会受到浮动元素的影响，会移动以留出空间。如：创建浮动框使文本可以围绕图像。
- 浮动元素脱离了文档流，不影响周围的元素，但是，对元素进行清理实际上为前面的浮动元素留出了垂直空间。
- 因为浮动元素不占据空间，所以容器元素不包围他们。为了让容器元素包围住浮动元素，需要清理浮动。清理浮动的方法有四种：
- 添加一个进行清理的空元素，但是这样就添加了无意义的标签。
- 浮动容器元素，但是下一个元素会受到这个浮动容器的影响。
- 对容器设置overflow:hidden
- 给容器元素添加一个clear类(IE6中不起作用)
1 .clear:after{ 2 content:"."; 3 height:0; 4 visibility:hidden; 5 display:block; 6 clear:both; 7 }
Chapter4 背景图像效果
背景图像基础
- 页面内容的高度是无法预测的，当我们想要给这个页面添加渐变的背景图像时，可以做一个由上到下的线性渐变，逐渐变化到一个固定的颜色。于是，我们只需要创建一个笃固定高度的背景图片，然后把背景颜色与渐变底部的颜色相同即可。
- 使用背景图像创建项目符号
- 设置背景图像的位置可以使用像素或百分数。这里比较容易理解错误的是使用百分数进行背景定位的工作方式。如图所示，在一个父容器为500px的正方形里，设置背景图片位置为50% 50%，那么就是父容器和背景图片的中心重合。我们往往容易误以为是背景图片的左上角与父容器的中心位置重合。
圆角框
在以前没有border-radius属性的年代，前端工程师是怎么做出圆角效果的呢？很简单，他们就是利用背景图片。创建两个圆角框图片，一个图片应用于框的顶部，另一个用于底部。这样做出来的效果是宽度固定的圆角框。因为图片的宽度是规定的。那怎么做出可变宽度的圆角框效果呢？利用滑动门技术。因为一个图像在另一个图像上滑动，将它的一部分隐藏起来了。这个方法四个图像。（读到书的这个部分的时候，觉得人类真的很聪明哇~）还有另一个概念是山顶角，说实话，没怎么看懂，看到蒙版这个词的时候，想念PS了 T T使用多背景图像实现圆角框比较容易。如下所示：
1 .box{ 2 background-image: url(../img/mtop-left.gif),url(../img/mtop-right.gif),url(../img/mbottom-left.gif),url(../img/mbottom-right.gif); 3 background-repeat: no-repeat; 4 background-position: top left,top right ,bottom left,bottom right; 5 }
还可以使用CSS3的border-image实现圆角框和更丰富的边框效果。这个属性优点就是可以根据一些简单的百分比规则把图像划分为9个单独的部分，浏览器会自动的使用适当的部分作为边框的对应部分。这种技术叫做九分法缩放。但是现在IE8、9、10不支持。border-image的使用详见：http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image详解、应用及jquery插件/
投影
- 使用投影图像
- box-shadow
不透明度
使用opacity设置不透明度最主要的问题是，不仅对背景生效，还会对元素的内容生效。仔细看下图，透过Johnny文本可以看到下面的文本。RBGa就是为了解决这个问题而设计的
的。
使用RGBa后：
如果你还没有发现上面两个图的区别，请用放大镜，哈哈哈~~
PNG格式的图片也支持alpha透明度，但是呢，IE6不能很好的支持。
CSS视差效果
这是一个有意思的效果，多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。这种现象叫视差滚动。
这里有一些视察滚动效果很棒的网站收藏链接。http://www.cnblogs.com/lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html
图像替换
当CSS不能实现我们想要的文本效果时，就需要使用文本的图像。图像替换就是使用CSS隐藏文本并在它的位置显示一个背景图像。这样的话，搜索引擎仍然可以搜索到HTML文本，而且如果禁用CSS，文本仍然会显示。但是，这种方法对于屏幕阅读器可能是无效的。
Chapter5 对链接应用样式
- 为了尽可能提高页面的可访问性，在定义鼠标悬停状态时，最好在链接上添加:focus伪类。在通过键盘移动到链接上时，这让链接显示的样式与鼠标悬停时相同。（但是我发现不设置focus时，效果一样啊）
- 选择器的次序很重要。按以下次序应用链接样式：a:link,a:visited,a:hover,a:focus,a:active(简记为：L V H F A)。为什么次序变了就达不到预期的效果呢？这是有层叠造成的。当两个规则的特殊性相同时，后定义的规则优先。
- 从易用性和可访问性的角度说，通过颜色之外的某些方式让链接区别于其他内容是很重要的。这是因为许多有视觉障碍的人很难区分对比不强烈的颜色，尤其是在文本比较小的情况下。
- 为链接目标设置样式 使用包含片段标识符的链接链接到页面的特定部分。实现方法是在href的末尾添加一个#字符，然后加上要链接的元素的ID。CSS3允许使用:target伪类为目标元素设置样式。代码如下。
- 通过提醒用户注意离站链接或可下载的文档，让他们明确地了解在单击链接时会发生的情况，避免不必要的回溯操作和烦恼。
- 链接应该只用于get请求，绝不要用于post请求。
- 创建类似按钮的链接的方法很多，Pixy样式的翻转，CSS3的text-shadow,box-shadow,border-radius,box-reflect(倒影)，-webkit-gradient（渐变）。代码如下。
- CSS精灵的好处：减少服务器请求；提高可维护性。
- 纯CSS工具提示。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>为链接目标设置样式</title> 6 <style type="text/css"> 7 .comment{ 8 width:800px; 9 height:300px; 10 border:1px solid gray; 11 background-color: lightgray; 12 margin-bottom: 30px; 13 padding: 5px; 14 } 15 .comment:target{ 16 background-color: yellow; 17 } 18 </style> 19 </head> 20 <body> 21 <h1>Comments</h1> 22 23 <div class="comment" id="comment1"> 24 <h2>Comment #1</h2> 25 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam facilisis sapien ut ante. Curabitur pretium, risus sed tristique porttitor, nisl urna feugiat sem, quis laoreet velit dui in est. In hac habitasse platea dictumst. In a ligula. Donec dapibus. Praesent eu nulla ut tortor facilisis volutpat. Duis aliquet, elit et aliquam vehicula, est nibh pulvinar magna, non venenatis libero nisi sit amet mauris. Quisque volutpat mi vel dolor. Ut vitae mauris. Mauris felis enim, rhoncus in, feugiat posuere, venenatis ut, lorem.</p> 26 <p><a href="#comment2">comment2</a></p> 27 </div> 28 29 <div class="comment" id="comment2"> 30 <h2>Comment #2</h2> 31 <p>Nulla facilisi. Nullam nisl libero, pulvinar non, ultricies non, luctus et, dui. Vestibulum elementum metus ut ligula. Donec blandit. Sed a diam. Maecenas accumsan. Suspendisse placerat est sit amet augue. Pellentesque sit amet ante ut velit semper feugiat. Curabitur sed mi in turpis congue congue. In consectetuer bibendum tellus. Phasellus magna. Proin laoreet metus et quam. Proin id ante. Vivamus ipsum justo, pharetra eget, auctor at, aliquet nec, tellus. Ut scelerisque viverra magna. Mauris sit amet nisl in eros porta faucibus.</p> 32 <p><a href="#comment3">comment3</a></p> 33 </div> 34 35 <div class="comment" id="comment3"> 36 <h2>Comment #3</h2> 37 <p>Praesent odio lacus, malesuada vel, congue sit amet, porttitor quis, nibh. Etiam viverra lacus et dolor. Fusce diam nulla, molestie sit amet, commodo ut, feugiat vitae, ipsum. Ut vehicula posuere odio. Ut elit nunc, laoreet et, lacinia eget, pretium a, tortor. Phasellus consequat lectus. Curabitur fermentum, neque sed feugiat hendrerit, lectus orci molestie orci, ut commodo justo nulla non nisl. Vivamus sed libero. Maecenas quam pede, vulputate sit amet, euismod ut, viverra in, massa. Sed a sem.</p> 38 <p><a href="#comment1">comment1</a></p> 39 </div> 40 41 </body> 42 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>创建类似按钮的链接-使用CSS3实现翻转</title> 6 <style type="text/css"> 7 p { 8 margin: 5em; 9 } 10 11 a { 12 font-size: 30px; 13 font-weight: 500; 14 } 15 16 a.btn { 17 display: block; 18 width: 6.6em; 19 height: 1.4em; 20 line-height: 1.4; 21 text-align: center; 22 text-decoration: none; 23 /*文本阴影，四个参数依次是：水平平移，垂直平移，模糊度，阴影颜色*/ 24 text-shadow: 2px 2px 2px #66a300; 25 font-weight: 600; 26 border: 1px solid #66a300; 27 /*边框的圆角*/ 28 border-radius: 6px; 29 /*渐变*/ 30 background-image: -webkit-gradient(linear,left top,left bottom,from(#abe142),to(#67a400)); 31 background-color: #8cca12; 32 /*边框的阴影*/ 33 box-shadow: 3px 3px 3px #ccc; 34 35 /*创建盒子的倒影*/ 36 -webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent), 37 to(white)); 38 color: #fff; 39 } 40 41 a.btn:hover { 42 background-color: #f7a300; 43 text-shadow: 2px 2px 2px #ff7400; 44 border-color: #ff7400; 45 background-image: -webkit-gradient(linear, left top, left bottom, from(#f7a300), to(#ff7400)); 46 47 } 48 49 a.btn:active { 50 background-color: #a7a7a7; 51 text-shadow: 2px 2px 2px #868686; 52 border-color: #868686; 53 background-image: -webkit-gradient(linear, left top, left bottom, from(#a7a7a7), to(#868686)); 54 55 } 56 </style> 57 </head> 58 <body> 59 <p> 60 <a href="#" class="btn">Book Now »</a> 61 </p> 62 63 </body> 64 </html>
Chapter6 对列表应该用样式和创建导航条