内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结
第11章 CSS简介
1、HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。
2、CSS的出现就是为了改造HTML单调的默认外观。
3、CSS引入方式有3种：外部样式表、内部样式表、行内样式表。
4、在实际开发中，一般都是使用外部样式表
第12章 CSS选择器
1、id和class
（1）id就像你的身份证号，而class就像你的名字。同一个页面中，id只允许出现一次，而class允许出现多次
（2）id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作的
2、CSS选择器
在CSS中，最常用的选择器有5种：元素选择器、id选择器、class选择器、后代选择器、群组选择器。
第13章 字体样式
在CSS中，常用字体样式属性如下表所示。其中，font-style属性几乎用不上，我们可以直接忽略。
表13-4 字体样式属性
1、font-family
font-family如果不指定字体，则会采用浏览器默认字体（即宋体）来显示。如果指定多种字体，则多个字体将按从左到右的优先顺序生效；
在实际开发中，常用的中文字体有微软雅黑、宋体，常用的英文字体有"Times New Roman "、Arial、Verdana；
2、font-size
font-size属性取值一般是“像素值”，不会采用“关键字”。在实际开发中，常用字体大小为12px、14px，很少用13px、15px等。
3、font-weight
在实际开发中，我们只会用到“font-weight:bold;”这一个属性值，其他的几乎用不上。
4、color
color属性取值有2种，一种是关键字，如red、green、blue等；另外一种是“16进制RGB值”，如#EEEEEE、#FBF9D0等。
【后话】：在这一章的学习中，大家可能都感觉到本书的不同之处了。在这本书中，我们会根据实际工作开发，然后在各个章节中穿插各种非常棒的技巧。最重要的是，我们会告诉小伙伴们哪些属性该记忆，哪些压根儿用不上，这可以大大提高学习效率。因为笔者我嘛，曾经作为初学者时，就有过痛苦的经历。当初都是一头扎进去，什么都学，过一段时间又忘，然后又接着复习。没想到最后自己大量实践的时候，发现很多知识点都用不上！白白浪费了大量时间和精力。希望笔者的这些心血与经验，能够换取大家的时间。人生苦短，时间更多应该用来追逐自己喜欢的东西，而不是在一些弯路上白白浪费。
第14章 文本样式
在CSS中，常用的文本样式如下表14-5所示：
表14-5 文本样式属性
（1）一般来说，text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上，我们只需要重点掌握其他几个即可；
（2）除了上表这些，还有一个font-variant属性没有介绍。不过这个属性平常也用不上，因此我们也不需要去了解；
第15章 边框样式
在CSS中，想要为元素定义边框，需要设置3个方面：边框宽度、边框外观、边框颜色。
表15-3 边框样式属性
其中，边框的简写形式如下：
border:1px solid red;
如果想要定义局部边框样式，我们可以使用如下属性：
表15-4 边框局部样式属性
第16章 列表样式
对于列表来说，常见的CSS属性有2个，如下表16-3所示：
表16-3 列表样式属性
除了上面2个，可能我们还会看到list-style、list-style-position等属性，不过那些属性几乎用不上，可以直接忽略。从实际开发角度来看，这一章我们只需要记住“list-style-type:none;”这一个就够了，是不是非常简单呢？
第17章 表格样式
在CSS中，对于表格样式设置包括：标题位置、边框合并、边框间距。
表17-3 表格样式属性
这3个属性都是表格所独有的，而且都是在table元素中定义的。
第18章 图片样式
表18-4 图片样式属性
第19章 背景样式
1、背景颜色
表19-4 背景颜色属性
2、背景图片
表19-5 背景图片属性
在实际开发中，background-attachment用得比较少，只需简单了解一下就行。
第20章 超链接样式
1、超链接伪类
对于超链接伪类来说，我们只会用到2种状态：未访问时状态和鼠标经过状态。
语法：
a{…}
a:hover{…}
其中，“:hover伪类”可以定义任何一个元素在鼠标经过时的样式，这是一个经常使用的开发技巧。
2、鼠标样式
在CSS中，鼠标样式的定义有2种，一种是“浏览器鼠标样式”，另外一种是“自定义鼠标样式”。这2种方式都是使用cursor属性来定义。
第21章 盒子模型
在CSS中，页面所有元素都可以看成是一个盒子。每一个盒子是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
图21-20 CSS盒子模型
表21-2 CSS盒子模型的组成部分
第22章 浮动布局
1、文档流
在正常文档流中，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
为了更好地进行布局，我们有时候需要使用浮动或者定位来使得元素脱离文档流。
2、浮动布局
如果你想要实现两个或者多个块元素横向排列，就应该使用浮动。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。
3、清除浮动
我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both;”来清除浮动。
【后话】：float属性很简单，只有3个属性：left、right和both。但是浮动涉及的理论知识极其复杂，其中包括：块元素和行内元素、CSS盒子模型、脱离文档流、BFC、层叠上下文。如果一上来就介绍那么多，估计小伙伴们啥兴趣都没了。为了让大家有一个循序渐进的学习过程，我们把高级部分以及开发技巧放在了本书的姊妹篇《HTML与CSS进阶教程》中。
第23章 定位布局
在CSS中，我们都是使用position属性来实现定位布局。定位布局有4种，如下表23-2所示：
表23-2 position属性取值
默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。这里注意一个前提：默认情况下。
【后话】：跟浮动布局一样，定位布局也是非常复杂的。这一章学到的只是一些基础知识而已，想要真正用好定位布局，我们还需要掌握更高级的开发技巧。对于高级部分以及开发技巧，我们《HTML与CSS进阶教程》再详细介绍。
