CSS3

第一节：CSS介绍

1.1 CSS产生的原因

以前的结构和样式很混乱，解决以前样式和结构混在一起的问题

CSS的出现，拯救了混乱的HTML，让我们的 页更加丰富多彩

CSS最大的贡献就是：让HTML从样式中解脱苦海，实现了HTML专注去做 结构呈现。而样式交给CSS

1.2 CSS初识

CSS（Cascading Style Sheets）

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式

1.3 CSS样式规则

格式：

样式规则：

1. 选择器用于指定CSS样式作用的HTML对象，花括 内是该对象设置的具体样式
2. 属性和属性值以“键值对”的形式出现
3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4. 属性和属性值之间用英文”:”连接
5. 多个键值对之间用英文”;”进行区分

可以用段落和表格的对齐的演示

第二节：CSS字体样式属性

font-size：字 大小

font-size属性用于设置字 ，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少

“>p{}

可以同时指定多种字体，中间以逗 分隔，表示如果浏览器不支持第一种字体，则会尝试下一个，直到找到合适的字体

常用技巧：

1. 现在 页中普遍使用14px+
2. 尽量使用偶数的数字字 。IE6等老式的浏览器使用奇数会有bug
3. 各种字体之间必须使用英文状态下的逗 隔开
4. 中文字体需要加英文状态下的引 ，英文字体一般不需要加引 。当需要设置英文字体时，英文字体名必须位于中文字体名之前
5. 如果字体名中包含空格、#、$等符 ，则该字体必须加英文状态下的单 引 或双引 ，例如
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正常显示

CSS Unicode字体

在CSS中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8等）不匹配时会产生乱码的错误。xp系统不支持类似微软雅黑的中文

**方案一：**可以使用英文来替代：

使用font属性时，必须按上面的语法格式按顺序书写，不能更换顺序，各个属性之间以空格隔开

**注意：**其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

第三节：CSS选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）

基础选择器

3.1 标签选择器（元素选择器）

标签选择器是指用HTML标签名称作选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，其基本语法格式如下：

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式

3.2 类选择器

类选择器使用”.”（英文点 ）进行标识，后面紧跟类名，其基本语法格式为：

标签调用的时候用即可

类选择器最大的优势是可以为元素对象定义单独或相同的样式

命名的小技巧：

1. 长名称或词组可以使用中横线来为选择器命名

2. 不建议使用”_”下划线来命名CSS选择器

   输入的时候少按一个shift键

   原因：浏览器兼容问题（比如_tips的选择器命名，在IE6是无效的）

   能良好区分javaScript变量命名（JS变量命名是用”_”）

3. 不要用纯数字、中文等命名，尽量使用英文字母来表示

3.3 多类名选择器

在类选择器的基础上，标签调用的时候用即可

注意：

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关
2. 各个类名中间用空格隔开

3.4 id选择器

id选择器使用”#”进行标识，后面紧跟id名，其基本语法格式为：

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对用于文档中某一具体元素。用法基本和类选择器相同

  id选择器和类选择器的区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许出现相同名字的class

类选择器（class）好比人的名字，是可以多次重复使用的。

id选择器好比人的身份证 码，是唯一确定的

**总结：**类选择器和id选择器的区别就是在使用次数上

3.5 通配符选择器

通配符选择器用”*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本格式为：

*:指所有标签，即页面内所有元素

**注意：**这个通配符选择器，在以后工作时很少用到，认识就行

伪类选择器

首先，这也是一个选择器，伪类选择器用于向某些选择器添加特殊效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素

基本格式：

3.6 链接伪类选择器

主要针对于

• **：**未访问的链接

• **：**已访问的链接

• ：鼠标移动到链接上

• **：**选定的链接，当我们点击没松开鼠标的时候

  注意写的时候，它们的顺序尽量不要颠倒，按照lvha的顺序。 love hate记忆法或lv包包非常hao

3.7 结构（位置）伪类选择器

• ：选取属于其父元素的首个子元素的指定选择器

• ：选取属于其父元素的最后一个子元素的指定选择器

• ：匹配属于其父元素的第N个子元素，不论元素的类型

• ：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n可以是数字、关键字或公式

  • n为”odd“时，表示选择所有的奇数孩子标签
  • n为”even“时，表示选择所有的偶数孩子标签
  • n为”n“时，表示选择所有的孩子标签
  • n为”2n“时，表示选择所有的偶数孩子标签
  • n为”2n-1（+1）“时，表示选择所有的奇数孩子标签
  • …”3n“表示**0、3、6、9…**孩子标签

  **注意：**以上的n数值与和有关，，从前向后数，从后向前数

3.8 目标伪类选择器

：目标伪类选择器，可用于选取当前活动的目标元素

复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更精准更精细的目标元素标签

3.9 交集选择器

交集选择器由两个选择器构成，其中一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如。

记忆技巧：

交集选择器是并且的意思，即…又…的意思

比如：p.one选择的是：类名为.one的段落标签

用的相对较少，不太建议使用

3.10 并集选择器

并集选择器（CSS选择分组器）是各个选择器通过逗 连接而成的，任何形式的选择器（包括标签选择器、class类选择器和id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或相同部分，就可以利用并集选择器为他们定义相同的CSS样式。

如：

记忆技巧：

并集选择器和的意思，只要是逗 分隔开的，所有选择器都会执行后面样式。

3.11 后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

3.12 子元素选择器

子元素选择器只能作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符 左右两侧各保留一个空格

这里的儿子指的是亲儿子而不包含孙子、重孙子之类的

属性选择器

**属性选择器：**选取标签带有某些特殊属性的选择器

伪元素选择器

1. ：文本的第一个单词或字（如中文、日文、韩文等）
2. ：文本第一行
3. ：可改变选中文本的样式，当我们选择文字的时候可以变换的样式
4. ：在E元素内部的开始位置创建一个元素，该元素为行内元素，且必须要结合content属性使用
5. ：在E元素内部的结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用

CSS书写规范

空格规范

【强制】选择器与{之间必须包含空格

示例：

【强制】属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格

示例：

选择器规范

【强制】当一个rule包含多个selector时，每个选择器声明必须独占一行

示例：

【建议】选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确

示例：

属性规范

【强制】属性定义必须是另起一行

【强制】属性定义后必须以分 结尾

第四节：CSS外观样式及应用

4.1 color：文本颜色

color属性用于定义文本的颜色，其取值方式有以下3种：

1. 预定义的颜色值，如red、green、blue等
2. 十六进制，如#FF0000、#FF6600、#29D794等。实际工作中，十六进制是最常用的定义颜色的方式
3. RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)

注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分

以后颜色尽量使用十六进制，我们提倡简写格式：#FFFFFF #FFF

4.2 line-height：行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

4.3 text-align：水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性，其可用属性为：

• **left：**水平对齐（默认值）
• **right：**右对齐
• **center：**居中对齐

4.4 text-indent：首行缩进

text-indent属性用于设置文本的首行缩进，其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位

em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度