1. CSS，指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。

2. CSS引入方式：

• 外部样式表<link rel="stylesheet" type="text/css" href="文件路径" />
• 内部样式表<style type="text/css"> …… </style>
• 行内样式表

说明：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

3.元素的id和class
id只允许出现一次，而class允许出现多次。（id就像你的身份证号，而class就像你的名字）

4. CSS选择器（常用）：
语法：
选择器 { 属性1 : 取值1; …… 属性n : 取值n; }

• 元素选择器：div{……}
• id选择器：#box{……}
• class选择器：.box{……}
• 后代选择器：father div{……}
• 群组选择器：h3,p{……}

5. 字体样式：

说明：

• font-family属性如果不指定字体，则会采用浏览器默认字体（即宋体）来显示。如果指定多种字体，则多个字体将按从左到右的优先顺序生效；在实际开发中，常用的中文字体有微软雅黑、宋体，常用的英文字体有**"Times New Roman "、Arial、Verdana**；
• font-size属性取值一般是“像素值”，不会采用“关键字”。在实际开发中，常用字体大小为12px、14px，很少用13px、15px等。
  -font-weight属性 在实际开发中，我们只会用到“font-weight:bold;”这一个属性值，其他的几乎用不上。
  -color属性取值有2种，一种是关键字，如red、green、blue等；另外一种是“16进制RGB值”，如#EEEEEE、#FBF9D0等。

6. CSS注释

/* 注释的内容 */

7.文本样式：

说明：

• text-indent属性技巧：想要实现段落首行缩进2个汉字的距离，text-indent值应该是font-size值的2倍
• text-align属性取值有left，center，right
• text-decoration属性取值有none（去除所有划线效果，默认），underline（下划线） ，line-through（中划线），overline（顶划线）。“text-decoration:none;”一般用于去除a元素的下划线
• line-height属性用来控制一行文本的高度
• 一般来说，text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上

8. 边框样式：

边框的简写形式：border:1px solid red;
局部边框样式：border-top（上边框），border-bottom（下边框），border-left（左边框），border-right（右边框）。
技巧：去除某一条边框（3种写法）
border-bottom:0px\0\none;

9. 列表样式：

说明：

• list-style-type属性是针对ol或者ul元素的，而不是li元素
• 在实际开发中，我们一般用“list-style-type:none;”来去除列表项符号。（经常用）
• 列表项图片语法：list-style-image:url(图片路径); 在实际开发中，对于列表项图标，更多的是使用“字体图标iconfont”来实现，而不是list-style-image属性。

10. 表格样式：

说明：一般情况下我们都只在table元素中定义caption-side、border-collapse、border-spacing。

11. 图片样式：

12. 背景样式：

说明：

• background-image语法：background-image: url(图片路径);
• background-repeat取值有repeat（两个方向同时平铺，默认）、repeat-x（只在水平方向平铺）、repeat-y（只在垂直方向平铺）、no-repeat（不平铺）
• 在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）

14. 超链接样式：
（1）超链接伪类：

说明：对于超链接伪类来说，我们只会用到2种状态：未访问时状态和鼠标经过状态a{……} a:hover{……}

（2）:hover伪类：可以定义任何一个元素在鼠标经过时的样式！注意，是任何元素！应用非常广泛，任何一个网站都会大量用到它，需要重点掌握。

（3）鼠标样式：

• 浏览器鼠标样式：cursor:取值;，在实际开发中，我们一般只会用到default（默认）、pointer、text这三个取值。
• 自定义鼠标样式：cursor: url(图片地址), 属性值;，其中鼠标图片后缀名一般都是**.cur**，可以使用Photoshop来制作。

15. 盒子模型：
（1）CSS盒子模型的组成部分：

说明：所有的元素都可以视为一个盒子，盒子模型是由内容区（content）、内边距（padding）、边框（border）以及外边距（margin）4大部分组成。

（2）宽高：元素的宽度（width）和高度（height）是针对内容区而言的。只有块元素才可以设置width和height，行内元素是无法设置width和height的。

（3）内边框（padding）与外边框（margin）：

• 局部样式：

padding\margin-top: 像素值;
padding\margin-right: 像素值;
padding\margin-bottom: 像素值;
padding\margin-left: 像素值;

• 简写形式：

padding\margin:像素值;
padding\margin:像素值1 像素值2;
padding\margin:像素值1 像素值2 像素值3 像素值4;

• 区别：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。

16. 正常文档流与脱离文档流：
（1）正常文档流，又称为“普通文档流”或“普通流”，是指将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
（2）脱离文档流，指的是脱离正常文档流。如果我们想要改变正常文档流，可以使用2种方法：浮动和定位。

17. 浮动布局：
（1） float属性取值：

（2）浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。
（3）清除浮动：clear:both;，清除该元素的兄弟元素浮动之后带来的影响。我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both;”来清除浮动。

18.定位布局：
（1）position属性取值：

（2）说明：

• top、bottom、left和right这四个属性不一定全部都用到，一般只会用到其中两个。
• 默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。