样式规则

h1 { color : red ; font-size : 25px; }

h1 选择器 color、font-size 属性

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。属性和属性值用 : (冒号)多个键值对用 ；(分号)

字体样式属性

font-size : 字号大小

相对长度单位说明em相对与带你给钱对象内文本的字体尺寸px像素，最常用绝对长度单位说明in英寸cm厘米mm毫米pt点

font-family：字体

p{ font-family:"微软雅黑";}

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

Unicode字体

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

解决 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的

font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。

可以通过escape()来测试属于什么字体

名称英文名UNICODE编码宋体simsun\5B8B\4F53………

font-weight ：字体粗细

font-weight属性用于定义字体的粗细，其可用属性值： 1.normal、 2.bold、 3.bolder、 4.lighter、 5. 100~900（100的整数倍）。 PS:数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式

font : 综合设置字体样式（最常用）

基本语法

选择器 {font: font-style font-weight font-size/line-height font-family;}

注意： 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔kai。

选择器

1.标签选择器

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2.类选择器

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

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签调用的时候用 class=“类名” 即可。

3.多类名选择器

给标签指定多个类名，从而达到更多的选择目的

<div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蝉</div>

4.id选择器

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

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

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

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。 其实类选择器就如我们的名字，全中国由怎么多人，同名的肯定会存在，比如王明、李娜； 但是id选择器就如我们身份证上的身份证号，每一个人都由属于我们的身份号。

所以说，id选择器和类选择器最大的不同在于使用次数

5.伪类选择器

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

:link /* 未访问的链接 */ :visited /* 已访问的链接 */ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 */

写的时候尽量不要颠倒，按照 lvha 的顺序。 LV哈！

a { // a是标签选择器，所有的链接 font-weight :700; font-size:16px color:red } a:hover { // :hover 是链接伪类选择器 鼠标经过 color:red ； //鼠标经过的时候，变色 }

5.1.结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 【n 可以是数字、关键词或公式】 li:first-child { /* 选择第一个孩子 */ color: pink; } li:last-child { /* 最后一个孩子 */ color: purple; } li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */ color: skyblue; }

5.2.目标伪类选择器(CSS3)

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

:target { color: red; font-size: 30px; }