内容来自莫振杰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 ?字体样式属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
color	字体颜色

??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 ?文本样式属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写
line-height	行高
letter-spacing、word-spacing	字母间距、词间距

??（1）一般来说，text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上，我们只需要重点掌握其他几个即可；

??（2）除了上表这些，还有一个font-variant属性没有介绍。不过这个属性平常也用不上，因此我们也不需要去了解；

第15章 ?边框样式

????在CSS中，想要为元素定义边框，需要设置3个方面：边框宽度、边框外观、边框颜色。

表15-3 ?边框样式属性

属性	说明
border-width	边框宽度
border-style	边框外观
border-color	边框颜色

????其中，边框的简写形式如下：

border:1px solid red;

????如果想要定义局部边框样式，我们可以使用如下属性：

表15-4 ?边框局部样式属性

属性	说明
border-top	上边框
border-bottom	下边框
border-left	左边框
border-right	右边框

第16章 ?列表样式

????对于列表来说，常见的CSS属性有2个，如下表16-3所示：

表16-3 ?列表样式属性

属性	说明
list-style-type	定义列表项符号
list-style-image	定义列表项图片

????除了上面2个，可能我们还会看到list-style、list-style-position等属性，不过那些属性几乎用不上，可以直接忽略。从实际开发角度来看，这一章我们只需要记住“list-style-type:none;”这一个就够了，是不是非常简单呢？

第17章 ?表格样式

????在CSS中，对于表格样式设置包括：标题位置、边框合并、边框间距。

表17-3 ?表格样式属性

属性	说明
caption-side	表格标题位置
border-collapse	表格边框合并
border-spacing	表格边框间距

????这3个属性都是表格所独有的，而且都是在table元素中定义的。

第18章 ?图片样式

表18-4 ?图片样式属性

属性	说明
width	定义图片的宽度
height	定义图片的高度
border	定义图片的边框
text-align	定义图片水平对齐方式
vertical-align	定义文本相对于图片的垂直对齐方式
float	定义文字环绕效果

第19章 ?背景样式

??1、背景颜色

表19-4 ?背景颜色属性

属性	说明
background-color	定义背景颜色

??2、背景图片

表19-5 ?背景图片属性

属性	说明
background-image	定义背景图片地址
background-repeat	定义背景图片重复
background-position	定义背景图片位置
background-attachment	定义背景图片固定

????在实际开发中，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盒子模型的组成部分

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

第22章 ?浮动布局

??1、文档流

????在正常文档流中，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。

????为了更好地进行布局，我们有时候需要使用浮动或者定位来使得元素脱离文档流。

??2、浮动布局

????如果你想要实现两个或者多个块元素横向排列，就应该使用浮动。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。

??3、清除浮动

????我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both;”来清除浮动。

【后话】：float属性很简单，只有3个属性：left、right和both。但是浮动涉及的理论知识极其复杂，其中包括：块元素和行内元素、CSS盒子模型、脱离文档流、BFC、层叠上下文。如果一上来就介绍那么多，估计小伙伴们啥兴趣都没了。为了让大家有一个循序渐进的学习过程，我们把高级部分以及开发技巧放在了本书的姊妹篇《HTML与CSS进阶教程》中。

第23章 ?定位布局

????在CSS中，我们都是使用position属性来实现定位布局。定位布局有4种，如下表23-2所示：

表23-2 ?position属性取值

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值）

????默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。这里注意一个前提：默认情况下。

????【后话】：跟浮动布局一样，定位布局也是非常复杂的。这一章学到的只是一些基础知识而已，想要真正用好定位布局，我们还需要掌握更高级的开发技巧。对于高级部分以及开发技巧，我们《HTML与CSS进阶教程》再详细介绍。

cs