学习HTML和CSS用的是一本叫《HTML5与CSS3基础教程》，人民邮电出版社的，这已经是第八版。整本书已经学完，感觉这本书思路清晰，代码也很翔实，入门书算是选对了，这本书里有很多超前的观点，尽管这无疑增加了复杂性，但从长远的角度来讲，还是值得的！当然，学到后面，前面遇到的很多概念和标签都记不大请，所以有必要从头开始，回头看，整理思路，写下来是个很好的办法。

继续前面的。从这里开始，逐步接触到CSS的魅力与强大。这也是"渐进增强"观念的深化。

前面已经讲了，HTML是"超文本标记语言"，根据语义，添加合适的标签，而CSS，也叫"层叠样式表"，是用来控制文本的显示效果。本质上讲，HTML的内容，显示出的应该与文本格式无异，正是由于一些标签默认有一些CSS格式，像<strong>,<em>之类的，当然，我们也可以通过修改CSS，自由的控制标签的显示效果。

1. 样式表中的每条规则都由"选择器"和"声明块"构成。声明块由"{}"包裹，每个声明由"键-值"构成，键值中间以"："隔离，声明与声明之间用"；"隔离。如：

   h1 {color:red; background-color:yellow;}

   注意：可以在样式表中添加空格和制表符，提高可读性，不影响最终效果。最后的分号不要省略！

2. 添加注释，与C语言一样，用/* */包裹即可。注释是很好的组织工具，便于后期的维护，通常将相关规则放在一起，形成分组，每组的前面放置描述性的注释，如：

   /*GLOBAL NAVIGATION ----------------------------------------*/ …………rules…….

3. 理解继承：当你为某些标签添加CSS属性后，不仅该元素，包括其后代元素，都会发生改变，这无疑很大程度上减少了编写CSS的难度，不必为每一个元素添加CSS属性，"继承"的思想尤为重要。当然，也并不是所有的属性都会继承，但都可以通过inherit值强制转换。

   

4. 当规则发生冲突时：这时就体现"层叠"的意义了。通常我们使用的是外联样式表，如果对于同一个属性，有多条规则，浏览器的显示，首先，以你写的为准，默认样式就被屏蔽，除此之外，通过考虑特殊性、顺序和重要性来判断具体应用哪条规则。

   特殊性是指指定选择器的特殊程度，冲突时应用特殊性强的，特殊性由高到低：#someID>.someClass.someOtherClass>.someClass>p。建议：多使用类选择器，减少ID选择器，原因是ID选择器灵活性比较低。

   顺序：这个比较简单，晚出现的优先级高，会把前面的规则覆盖。

   重要性：优先级的巅峰——！important，会覆盖其他任何规则，写法例如：

不推荐使用！

1. 属性的值：每个CSS属性对于接受的值有不同的规定。

   Inherit:可以使该元素某属性的值与父元素该元素的值相同，显式的表现出来。

   预定义的值：大多数属性都有一些可供使用的预定值，如float属性可以为left、right或者none，一定不能加引号。

   长度和百分数：长度一定要有单位（px或em，1em表示与该元素字号相等，响应式Web设计经常用到，还有rem，相对于html元素字体大小。Pt这个单位基本只出现在为打印准备的样式表中），百分数（如65%）的使用很像em，通常是相对于父元素的。上述单位中，最常使用的是em，百分数和px，rem使用的越来越多。

   纯数字：很少使用，最常见的是line-height,z-index和opacity，一定不能加单位

   URL：有些CSS属性允许指定一个文件（大多是图像）的URL，如background-image:url(file.ext)，其中file.ext是目标资源的路径和文件名，注意：相等URL是相对于样式表的位置而非HTML文件的位置，切记！切记！文件名可以不加引号，不要留空格，尤其是url与前括号！

   CSS颜色：表现方式比较多，可以用预定义的关键字或以十六进制，RGB、HSL、RGBA、HSLA，最后两种可以指定alpha，即透明度。

   

    

   RGB是通过指定红绿蓝的量来构建自己的颜色，可以使用百分数或者0~255之间的值。如：color:RGB(89, 0, 127);

   十六进制数是在RGB的基础上，将这些数字转化为十六进制，再在前面加一个"#"，如：color：#59007f，分别对应红绿蓝，如果数字重复，如#ff3344可缩写为#f34

   RGBA在RGB的基础上增加了alpha属性用来调节透明度，本身是个介于0到1之间的小数，越接近0就越透明

   HSL是CSS3才引入的，对应的是色相、饱和度和亮度，色相的取值在0~360，饱和度和亮度的取值均为百分数，在0%~100%

   

    

    

   总结：这些只是CSS入门最基础的一些东西，暂时还没有涉及到具体的使用。只有理解了规则，才能更好的使用规则！照目前学习的过程，CSS比HTML更难控制，自由度更高，效果更好。当然，这些都是建立在具有良好语义的HTML的基础上，始终牢记：渐进增强。

HTML+CSS学习笔记（五）