CSS选择艺术以及CSS文本样式
CSS选择的艺术
1.css规则由两部分构成：选择器，声明（声明由属性和值构成且末尾跟一个分号）
2.css注释：/*……*/
3.CSS样式的引用
（1）行内样式（内联样式）
例如：<p style="color:red;">……</p>
（2）内部样式表（嵌入样式）
例如：<style type="text/css">
……
</style>
（3）外部样式表：把CSS样式代码写在独立的一个文件夹中
引入外部文件：<link href="XX.css" rel="stylesheet" type="text/css"/>
（4）导入式
@import “外部css样式”
4.CSS使用方法区别
类别 引入方法 位置 加载
行内样式 开始标签内style html文件内 同时
内部样式 <head>中<style>内 html文件内 同时
链入外部样式 <head>中<link>引用 · CSS样式文件 页面加载时，
与html文件分离 同时加载CSS样式
导入式 在样式代码最开始处 · CSS样式文件与 在读取完html文件之
@import · html文件分离 后加载
5.使用链入外部样式的好处
（1）CSS和HTML分离
（2）多个文件可以使用同一个样式文件
（3）多文件引用同一个css文件，css文件只需下载一次
6.CSS使用方法优先级
行内样式>内部样式>外部样式
说明：（1）链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
（2）最后定义的优先级最高（就近原则）
7.CSS选择器
（1）类选择器：class
（2）ID选择器：id
（3）群组选择器：集中统一的设置样式
（4）全局选择器：所有标签设置样式
（5）css后代选择器：
例如：<p><em>……</em></p>
p em{font-size:40px;}（中间使用空格隔开）
（6）伪类选择器：
链接伪类：链接的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态
伪类 说明
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬停状态
:active 激活的链接
伪类，:hover和:active
1.:hover用于访问的鼠标经过某个元素时
2.:active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）
链接伪类的顺序
:link>:visited>:hover:active
说明：
1.a:hover必须置于a:link和a:visited之后，才有效
2.a:active必须置于a:hover之后，才有效
3.伪类名称对于大小写不敏感
8.CSS的继承和层叠
（1）CSS继承
a.从父元素那继承部分CSS属性
b.好处，节省代码
（2）CSS层叠
a.可以定义多个样式
b.不冲突时，多个样式可以层叠为一个
c.冲突时，按不同样式规则优先级来应用样式
9.CSS选择器优先级
行内样式>内部样式>外部样式
说明：（1）链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
10.CSS权值
CSS优先级规则
同一样式中:
（1）.权值相同：
就近原则（离被设置元素越近优先级越高）
（2）.权值不同
根据权值来判断CSS样式
哪种CSS样式权值高，就使用哪种样式
11.选择器权值
（1）标签选择器：权值为1
（2）类选择器和伪类：权值为10
（3）ID选择器：权值为100
（4）通配符选择器：权值为0
（5）行内样式：权值为1000
12.权值规则
（1）统计不同选择器的个数
（2）每类选择器的个数乘以相应的权值
（3）把所有的值相加得出选择器的权值
13.CSS样式命名规则
（1）采用英文字母、数字以及"-"和"_"命名
（2）以小写字母开头，不能以数字和"-"、"_"开头
（3）命名形式：单字，连字符，下划线和驼峰
CSS文本样式
1.HTML、CSS、JavaScript之间的关系
-HTML是网页内容的载体
-CSS样式是表现（外观控制）
-JavaScript是行为，用来实现网页特效效果
2.CSS文字样式属性
·字体：font-family
字体集：
-Serif
-Sans-serif
-Monospace
-Cursive
-Fantasy
·文字大小：font-size
·文字颜色：color
·文字粗细：font-weight
-normal
-bold
-bolder
-lighter
-100~900
（1）字体变形：font-variant
font-variant:normal | small-caps
·文字样式：font-style
3.文本对齐方式
（1）text-align:left | right | center | justify
注：只对于块级元素有效
4.行高：line-height:长度值 | 百分比
5.设置元素内容的垂直方式：vertical-align
语法：
vertical-align：baseline | sub | super | top | text-top
middle | bottom | text-bottom | 长度 | 百分比
6.其他文本样式
word-spacing:设置元素单词之间的间距
letter-spacing:设置元素字母之间的间距
text-transform:设置元素内部文本的大小写，capitalize | uppercase |
lowercase | none
text-decoration:设置元素内文本的装饰，underline | overline | line-through | blink | none