week6---10月16日 CSS样式

一、复习

1、选择器的种类

2、作业讲解

二、新课

（一）伪类选择符

伪类是将条件和事件考虑在内的样式表类型，它不是真正意义上的类或标记对象，可以看作是从某一个标记中分解出来的子元素，伪类的名称是由系统定义的而不是用户随意指定。

       使用伪类作选择符可为一个标记的不同子状态指定样式表以添加特殊效果。

      CSS的伪类名不区分大小写，目前常见的伪类有：

• link     设置超链接文本在超链接尚未被访问时的样式(默认字符蓝色带下划线)
• visited 设置超链接文本已被访问过之后的样式(默认字符红色带下划线)
• hover  设置鼠标指向、经过、悬浮在某个标记上方时该标记的样式
• active 设置鼠标单击激活某个标记时该标记的样式
• focus 设置某个标记被选中(获得焦点)时该标记的样式
• first-child 设置某个标记被包含为其他标记的第一个子标记时的样式 

1．伪类选择符的使用

 使用伪类选择符一般先对伪类的父标记指定样式供所有伪类子元素继承：

    标记名                     { 样式规则; } — 对一类标记指定样式

    标记名.class类名      { 样式规则; } — 对某一部分指定样式

    标记名#id属性         { 样式规则; } — 对某个特定标记指定样式

    对伪类指定样式必须用冒号前缀父标记选择符作为伪类选择符：

    标记名[.样式类名 或 #id属性]:伪类名  { 样式规则; }

    伪类样式可以覆盖父标记定义的样式。

    可以使用群组选择符同时为多个伪类定义相同的样式：

    标记名[.样式类名]:伪类名1, 标记名[.样式类名]:伪类名2, …

    { 样式规则; } 

2．<a>标记的伪类选择符

超链接<a>标记可按顺序使用link、visited、hover、active等4种伪类选择符。

    如果对页面中的所有超链接标记都设置相同的伪类选择符则可定义以下样式表：

    a  { 样式规则1; }                 — 指定4个伪类可继承的共有样式

    a:link     { 样式规则2; }        — 单独指定尚未访问超链接的样式

    a:visited { 样式规则3; }        — 单独指定已访问过超链接的样式

    a:hover   { 样式规则4; }       — 单独指定鼠标指向超链接的样式

    a:active   { 样式规则5; }       — 单独指定单击激活超链接的样式

    某些浏览器要求必须按以上顺序定义样式表，其中不需要单独指定样式的可以省略—继承父标记<a>的样式或使用默认样式。对于使用相同样式的伪类可使用群组选择符。

    例如对尚未访问和已经访问过采用相同样式表：

    a:link, a:visited { 样式规则; }

（二）样式规则的优先级

标记内的内联CSS样式、内部样式表、外部样式表文件三种方法可以混合使用，子标记首先会继承父标记的样式，每个标记还可以使用各种选择符(群组、包含、相邻、属性、伪类)重复多次的定义样式。

   一个标记不论是继承还是自己重复定义多少个样式都可以叠加有效，如果同一个样式属性重复定义多次时则根据优先级的原则采用覆盖，即优先级高的样式覆盖优先级低的样式，这就是CSS中层叠的含义。

1、原则

继承父标记样式→样式表(标记名→class类→id选择符)

    →style内联样式规则

• 继承父标记的样式级别最低，可被标记自己的任何样式覆盖
• 标记内style定义的内联样式规则级别最高，可覆盖继承、内部或外部定义的任何样式表。
• 样式表的优先级根据选择符确定，原则是应用范围越大的选择符级别越低，限制条件越多—应用范围越小的优先级越高。
• 单一选择符(逗号隔开的群组选择符等价于多个单一选择符)样式表优先级顺序：标记名→class→id选择符
• 包含、相邻、属性、伪类等条件选择符都包含多个单一选择符，可以理解为每个单一选择符都有一个权值，而条件选择符是多个单一选择符的权值相加，比任何单一选择符的优先级要高。条件选择符相互比较的原则仍然按单一选择符的优先级(标记名→class→id)先对其中第一个选择符比较，如果相同再对第二个比较，以此类推。所有样式表的优先级顺序为：

    *通用选择符→标记名→class→id→标记名条件→class条件→id条件

2、优先级原则

l相同优先级的样式表以定义的顺序确定：先定义的优先级低，后定义的优先级高—后者覆盖前者。

l如果页面同时引用外部样式表文件、定义内部样式表时也按引用定义的顺序确定。

   注意：由于一般先引用外部样式再定义内部样式，所以有的教科书讲内部样式优先于外部样式，但如果先定义内部样式再引用外部样式，就应该说外部样式优先于内部样式了。

    *           { 样式规则0 }

    p           { 样式规则1 }

    #abc      { 样式规则4 }

    p.xyz      { 样式规则5 }

    .xyz       { 样式规则3 }

    p           { 样式规则2 }

   则对 <p id="abc"class="xyz" style="样式规则6">…</p>标记的层叠覆盖顺序为：*{ 样式规则0 }→p{ 样式规则1 }→p{ 样式规则2 }→.xyz{ 样式规则3 }→#abc{ 样式规则4 }→p.xyz{ 样式规则5 }→style="样式规则6"。 

3、使用!important改变优先权

         当某个样式属性可能会重复定义，但又不希望被优先级高的覆盖掉，可在样式属性之后用!important关键字提高到最高优先级，相当于锁定该属性防止以后被优先级高的样式表覆盖。

• 父标记用!important提高优先权的样式子标记继承后可以覆盖，即提高优先权对继承无效。
• !important必须写在样式属性“;”之前，如果写在样式属性“;”之后，如 color:blue; !important则!important无效而且还会与下一个样式属性(不论是否另起一行或有多少空行)混合使下一个样式属性失效。

实验操作