Joke's Blog World

CSS学习笔记（三）

发表于 | 分类于

四、CSS的特殊性、继承和层叠

CSS的特殊性（也称优先级）、继承和层叠通常被称为CSS的三大特性。

4.1 特殊性

CSS的特殊性解决的是当我们对同一个元素设置了不同的 CSS 样式，那么到底最后作用于元素是哪个样式呢？例如下面的规则：

1
2
3
4
5
h1 {color: red;}
body h1 {color: green;}
h2.grape {color: purple;}
h2 {color: silver;}

最终，元素 h1 显示的是 green，而 h2 显示的是 purple。原因在于每个选择器都有它的特殊性。对于每个规则，用户代理(浏览器)会计算选择器的特殊性(权值)，这样规则中选择器对应的声明就有了相应的特殊性(权值)。当有两个或者多个属性声明作用于一个元素时，就可以根据这个特殊性(权值)来决定哪条声明奏效，特殊性(权值)越高，则相应的声明就会被应用。

选择器的特殊性是由选择器本决定的。选择器的具体特殊性(权值)，如下：

  1. ID选择器的特殊性(权值)为：0，1，0，0
  2. 类选择器、属性选择器或者伪类的特殊性(权值)为：0，0，1，0
  3. 元素或者伪元素的特殊性(权值)为：0，0，0，1
  4. 结合符和通配符没有特殊性(权值)

注意：
内联样式的特殊性(权值)为：1，0，0，0

计算一个组合选择器的特殊性(权值)的时候，在计算不同选择器的数量以及其对应的特殊性(权值)后再相加，例如：

1
2
3
4
5
6
7
8
9
10
div ul li {color:red;}   /* 0,0,0,3    3个元素选择器 */
div.nav ol li {color:purple;}   /* 0,0,1,3   1个类选择器，3个元素选择器 */
a:hover {color:blue;}  /* 0,0,1,1   1个伪类选择器，1个元素选择器 */
div.navlinks a:hover {color:yellow;}  /* 0,0,2,2    1个类选择器，1个伪类选择器，2个元素选择器 */
.affix.top{background:silver}  /* 0,0,2,0    多类选择器 注 */
input[type="text"] {font-style:italic;} /* 0,0,1,1    1个属性选择器，1个元素选择器 */
input[name="sex"][type="radio"] {background:silver;}  /* 0,0,2,1    2个属性选择器，1个元素选择器 */
#title em {font-weight:12px;}  /* 0,1,0,1    1个 ID 选择器，1个元素选择器 */
h1#title em {font-weight:14px;} /* 0,1,0,2    1个 ID 选择器，2个元素选择器 */
* {background:silver;}  /* 0,0,0,0    1个通用选择器 */

4.2 继承

CSS的某些样式是具有继承性的，那么继承到底是什么意思呢？CSS中，继承是一种规则，它允许样式不仅应用于某个指定的元素，而且应用于其后代元素。例如,应用了下面CSS样式的h1元素：

1
h1 {color: gray;}

1
<h1>Welcome to <em>NanJing</em></h1>

h1元素应用了一个颜色，那么，这个颜色将应用到h1中的所有文本，甚至应用到h1元素的子元素中的文本。

注意：

  1. CSS的某些样式是具有继承性的。在CSS中，大多数框模型属性(包括外边距、内边距、背景和边框)都不能被继承。如果可以继承，那么，文档将会变得混乱不堪。
  2. 在CSS的特殊性规则中，继承的声明根本没有任何特殊性，而使用通配选择器的声明具有0, 0, 0, 0特殊性。当二者冲突时，通配选择器胜，会导致继承失效。正因为如此，一般不建议使用 (*)。例如：
    1
    2
    * {color: red;}
    h1 {color: gray;}
1
2
3
4
5
6
7
8
9
10
11
12
<h1>Welcome to <em>NanJing</em></h1>
```  
最后的结果如下图所示：  
![短路继承](http://ogcpvdyqb.bkt.clouddn.com/%E7%BB%A7%E6%89%BF%E7%9F%AD%E8%B7%AF.png)
### 4.3 层叠
CSS中，层叠解决的是这样一个问题：如果特殊性相等的两个规则同时应用到同一个元素，到底哪个规则会被应用呢？例如，以下的规则：
```CSS
h1 {color: red;}
h1 {color: blue;}

4.3.1 层叠规则

CSS中所谓的层叠，就是让多个来源的样式叠加在一起，然后结合样式的特殊性、继承性，确定最终应用的样式。在《CSS权威指南》这本书中指出，确定最终应用的样式，CSS2.1有4条层叠规则：

  1. 找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
  2. 按显示权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的规则。按来源对应用到给定元素的所有声明进行排序。共有3种来源：创作人员、读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有!important标志的的读者样式要强于所有其他样式，包括有!important标志的创作人员样式。创作人员的样式和读者样式斗都比用户代理的默认样式强。
  3. 按特殊性对应用到给定元素的所有声明进行排序，有较高特殊性的元素权重要大于有较低特殊性的元素。
  4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它权重就越大。如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

简单的来说，上述的规则意思是：对于一个指定的元素，将应用于该元素的所有规则，先按规则的显式权重和来源进行排序。如果相同，则比较规则的特殊性。若特殊性也相同，则比较规则的顺序。

4.3.2 层叠总结

一、按权重和来源排序

在《CSS权威指南》中，样式的来源可以分为3类：1、创作人员 ( 即内联式样式、嵌入式样式、外部式样式 ); 2、读者 ( 即用户自定义样式 ); 3、用户代理 ( 即浏览器样式 )。

按照上述分类的样式，权重由大到小的顺序依次为：

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理声明

按照上述分类的样式，根据来源的排序为：

  1. 创作人员（内联式样式、嵌入式样式、外部式样式）
  2. 读者（用户自定义样式）
  3. 用户代理（浏览器样式）

二、按特殊性排序

如果一个元素应用了多个彼此冲突的声明，而且他们的权重声明相同，则按照特殊性排序，特殊性值（权值）高的被应用。

三、按顺序排序

如果两个规则的权重、来源和特殊性完全相同，那么，在样式表中后出现的一个会被应用。

注意：
由于内联式样式表的特殊性，CSS中有推荐的链接样式顺序。一般建议按link-visited-hover-active（LVHA）的顺序声明连接样式。如下所示：

1
2
3
4
:link {color: blue;}
:visited {color: purple;}
:hover {color: red;}
:active {color: orange;}

五. CSS中的单位、颜色、字体、文本

5.1 CSS中的单位

CSS中的单位有：%（百分数）、in（英寸）、cm（厘米）、mm（毫米）、pt（点）、pc（派卡）、em（1em等于等于当前字体的尺寸）、ex（1ex是一个字体的x-height,而x-height通常是字体尺寸的一半）、px（像素，即计算机屏幕上的一个点）。

总结：

  1. 在《CSS权威指南》中，in（英寸）、cm（厘米）、mm（毫米）、pt（点）、pc（派卡）被称为绝对长度单位。在 Web 设计中，几乎很少使用绝对长度单位。
  2. 在《CSS权威指南》中，em（1em等于等于当前字体的尺寸）、ex（1ex是一个字体的x-height,而x-height通常是字体尺寸的一半）、px（像素，即计算机屏幕上的一个点）被称为相对长度单位。

5.2 CSS中的颜色

在CSS中，颜色有前景和背景色，可以为任何元素设置。CSS中，关于颜色的表示有4种方式：颜色名、RGB、16进制、HSL（CSS3）。

说明：

1
一般来说，前景是元素的文本，不过前景还包括元素周围的边框。

5.2.1 用颜色名表示颜色

在CSS 2.1 中，CSS规范定义了17个标准颜色名。包括HTML 4.01中定义的16个颜色，并外加一个橙色：

1
2
3
aqua     fuchsia    lime      olive     red       white
black    gray       maroon    silver    yellow    blue
green    navy       purple    teal      orange

color

5.2.2 用RGB表示颜色

RGB颜色即计算机通过组合不同的红色、绿色和蓝色分量来创造颜色。使用RGB来表示颜色，有两种表示方法：百分数记法、整数三元组记法。例如，用RGB来表示白色：

1
2
rgb(100%,100%,100%)   百分数记法
rgb(255,255,255)    整数三元组记法

5.2.3 用16进制表示颜色

16进制记法，即将三个介于00-FF的16进制数连起来表示一种颜色。例如，白色用16进制来表示是：

1
#FFFFFF

5.2.4 用HSL表示颜色

HSL是不同于RGB的色彩模式，HSL分别表示色调、饱和度、亮度，通过这三个参数来表示不同颜色。其中：

  • H(Hue色调)：表示一个色相环，从0到360度取值，0(或360)是红色，120是绿色，240是蓝色；
  • S(Saturation饱和度)：表示颜色的纯度，取值从 0.0% 到 100.0%，数值越大，颜色中的灰色越少，颜色越接近纯色；
    L(Lightness亮度)：表示颜色的明暗，取值也是 0.0%——100.0%，0%是彻底变暗（黑），100%彻底变亮（白），50%正常亮度。

5.3 CSS中的URL、关键字

5.3.1 URL

CSS中，URL用来引用一个资源，这个资源可以是图片、样式表。URL有绝对URL和相对URL之分：

  • 绝对URL

    1
    2
    绝对URL的格式一般是：url(protocol://server/pathname)
    例如：url(http://ogcpvdyqb.bkt.clouddn.com/color.png)

  • 相对URL

    1
    2
    相对URL的格式一般是：url(pathname)
    例如：url(color.png)

说明： 使用相对URL，则说明引用资源的页面和资源在同一个服务器上。

5.3.2 关键字

关键字：用来描述某个属性的值的词。例如，常见的 none、normal 等。

  • 关键字-inherit：在CSS2.1中，inherit 关键字是所有属性共有的。inherit 使一个属性的值与其父元素的值相同。

5.4 CSS中的字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。在CSS中，有两种不同类型的字体类型：特定字体系列、通用字体系列。

  • 特定字体系列：如 Times、Verdana、Helvetica或Arial等；
  • 通用字体系列：CSS 定义了5种通用字体，Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体；

5.4.1 字体系列的使用

在CSS中，可以使用属性 font-family 来定义文本的字体系列。

  1. 给元素指定通用字体系列，例如：
    1
    body {font-family: sans-serif;}

说明：
所谓字体系列，是因为 sans-serif 包含多个字体，这些字体组成一个系列。当指定 sans-serif 系列字体，用户代理（浏览器）会根据用户端实际拥有的字体来进行适配。例如用户端实际安装了 Helvetica 字体，body 元素就会应用 Helvetica 字体。

  1. 给元素指定字体，例如：
    1
    h1 {font-family: Georgia;}

除了使用通用的字体系列，还可以通过 font-family 属性设置更具体的字体。但相应的，这样设置指定的字体的同时会产生另外一个问题，如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。
所以，强烈建议在所有 font-family 规则中都提供一个通用字体系列，这样在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。例如：

1
2
3
h1 {font-family: Georgia, serif;}
h2 {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

如果用户没有安装 Georgia 字体，但安装了 Times 字体（serif 字体系列中的一种字体），用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。

注意： 当字体名中有一个或者多个空格（如 New York），或者这些字体名包括 # 或 $ 之类的符号，使用 font-family 属性时，需要在声明中加引号。

5.4.2 字体的其它属性

除了指定字体系列，常用的字体属性还有：字体的加粗（font-weight）、字体的大小（font-size）、字体的风格（font-style）、字体的变形（font-variant）、字体的拉伸（font-stretch）、字体的调整（font-size-adjust）。

  1. 字体加粗（font-weight）：

    1
    font-weight:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

  2. 字体的大小（font-size）：

    1
    font-size: xx-small | x=small | small | medium | larage | x-large | xx-large | smaller | larager | <length> | <percentage> | inherit

  3. 字体的风格（font-style）：

    1
    font-style: italic | oblique | normal | inherit

  4. 字体的变形（font-variant）：

    1
    font-variant: small-caps | normal | inherit

  5. 字体的拉伸（font-stretch）：

    1
    font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

  6. 字体的调整（font-size-adjust）：

    1
    font-size-adjust: <number> | none | inherit

  7. font 属性：这是一个简写属性，作用是把所有针对字体的属性设置在一个声明中。

    1
    font: [[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-bar | inherit

例如：

1
h1 {font:italic bold 12px/30px arial,sans-serif;}

5.5 CSS中的文本属性

文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。CSS中，文本属性有：缩进文本（text-indent）、水平文本对齐（text-align）、行高（line-height）、垂直对齐文本（vertical-align）、字间隔（word-spacing）、字母间隔（letter-spacing）、文本转换（text-transform）、文本装饰（text-decoration）、文本阴影（text-shadow）、处理空白格（white-space）、文本方向（direction）或者（unicode-bidi）。

  1. 缩进文本（text-indent）

    1
    text-indent: <length> | <percentage> | inherit

  2. 水平对齐（text-align）

    1
    2
    CSS2.1  text-align: left | center | right | justify | inherit
    CSS2    text-align: left | center | right | justify | <string> | inherit

  3. 行高（line-height）

    1
    line-height: <length> | <percentage> | <number> | normal | inherit

  4. 垂直对齐文本（vertical-align）

    1
    vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

  5. 字间隔（word-spacing）

    1
    word-spacing: <length> | normal | inherit

  6. 字母间隔（letter-spacing）

    1
    letter-spacing: <length> | normal | inherit

  7. 文本转换（text-transform）

    1
    text-transform: uppercase | lowercase | capitalize | none | inherit

  8. 文本装饰（text-decoration）

    1
    text-decoration: none | [underline || overline || line-through || blink] | inherit

  9. 文本阴影（text-shadow）

    1
    2
    3
    4
    text-shadow: none | [<color> || <length><length><length>?,]* [<color> || <length><length><length>?] | inherit
    例如：
    h1 {text-shadow: yellow 2px 2px 2px;}
    p {text-shadow: 0 0 4px silver;}

  10. 处理空白格（white-space）
    white-space

    1
    white-space: normal | pre | nowrap | pre-wrap | pre-line

  11. 文本方向（direction）

    1
    direction: ltr | rtl | inherit

  12. 文本方向（unicode-bidi）

    1
    unicode-bidi: normal | embed | bidi-override | inherit

说明：
对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

六. CSS中的背景、表格、列表、生成内容与轮廓

6.1 背景

元素的背景是指前景之下直到边框外边界的所有空间，内容框和内边距都是元素背景的一部分，并且边框画在背景之上。

  1. 背景色（background-color）：这个属性接受任何合法的颜色值，默认值是 transparent（透明）。

    1
    background-color: <color> | transparent | inherit

  2. 背景图像（background-image）：这个属性允许向任何元素应用背景图像，默认值是 none。

    1
    background-image: <uri> | none | inherit

  3. 背景重复（background-repeat）

    1
    background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

  4. 背景定位（background-position）

    1
    2
    3
    background-position: [[<percentage> | <length> | left | center | right][<percentage>] | <length> | top | center | bottom]?] || [[left | center | right] || [top | center | bottom]] | inherit
    例如：
    p {background-image: url(logo.gif);background-repeat: no-repeat;background-position: top right;}

  5. 背景关联（background-attachment）：如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。通过背景关联这个属性，可以防止这种滚动。默认值是 scroll（滚动）。

    1
    background-attachment: scroll | fixed | inherit

6.2 表格

  1. 设置表标题

    1
    caption-side: top | bottom

  2. 设置表单元格边框

    1
    border-collapse: collapse | separate | inherit

  3. 设置边框间隔

    1
    border-spacing: <length><length>? | inherit

  4. 处理空单元格

    1
    empty-cells: show | hide | inherit

  5. 设置表大小

    1
    table-layout: auto | fixed | inherit

6.3 列表

  1. 列表类型：要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。要修改用于列表项的标志类型，可以使用属性 list-style-type：

    1
    2
    CSS2.1  list-style-type：disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit
    CSS2    list-style-type：disc | circle | square | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | lower-greek | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | none | inherit

  2. 列表项图像：使用 list-style-image 属性可以为列表项设置一个图像标志。

    1
    list-style-image: <uri> | none | inherit

  3. 列表标志位置：CSS2.1 可以通过属性 list-style-position 确定标志出现在列表项内容之外还是内容内部。

    1
    list-style-position: inside | outside | inherit

  4. 简写列表样式：为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。

    1
    [<list-style-type> || <list-style-image> || <list-style-position>] | inherit

6.4 生成内容

在CSS2 和 CSS 2.1 中，生成内容是指由浏览器创建的内容。例如，列表标志就是生成内容。为了向文档中插入生成内容，可以使用 :before 和 :after 伪元素结合 content 属性来生成内容。

1
content: normal | [<string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote]+ | inherit

content 的内容一般可以为以下四种：

  1. none： 不生成任何值；
  2. attr： 插入标签属性值；
  3. url： 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）；
  4. string： 插入字符串。

补充：

  1. 引号：使用 quotes 可以为不同的内容加上合适的引号。
    1
    quotes: [<string> <string>]+ | none | inherit
  1. 计数器：使用计数器可以创建包含数字序号的内容。
    1
    2
    3
    4
    重置（counter-reset）：设置计数器的起点。
    counter-reset: [<indentifier><integer>?]+ | none | inherit
    递增（counter-increment）：设置可以递增的计数器。
    counter-increment: [<indentifier><integer>?]+ | none | inherit

6.5 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  1. 设置轮廓样式

    1
    outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

  2. 设置轮廓宽度

    1
    outline-width: thin | medium | thick | <length> | inherit

  3. 设置轮廓颜色

    1
    outline-color: <color> | invert | inherit