1. CSS 概述

  1. CSS 允许你创建一系列规则。
  2. CSS 创建的规则可以指定元素中的内容该如何显示。（例如，指定页面背景色为蓝色、字体为 Arial 字体等）

2. 设想每个元素周围都有一个盒子

  1. 在 HTML 中，每个元素的周围都有一个看不见的盒子。
  2. CSS 允许你创建规则，来控制每个盒子，以及盒子中的内容的呈现方式。
  3. 可以利用 CSS 在任何盒子周围添加边框，指定它的宽度和高度以及设定背景颜色，也可以控制盒子内的文本样式。

3. CSS 将样式规则和 HTML 元素相关联

  1. CSS 通过规则与 HTML 元素相关联的方式来工作。
  2. CSS 规则用来控制指定元素中的内容如何显示。
  3. 一条 CSS 规则包含两部分：一个选择器和一条声明。
  4. 选择器表明要应用规则的元素。同一条规则可以应用在多个元素上，前提是你需要将这些元素名用逗号隔开。
  5. 声明用来表明应该如何显示选择器指明的元素。声明可以分为两个部分（属性和值），并以冒号作为分隔符。
1
2
3

p {
    font-family: Arial;
}
  1. 上述 CSS 规则中，p 是声明，表示该规则应用于所有的 p 标签上，大括号内的 font-family: Arial; 是声明，表示应该用 Arial 字体来显示。

4. CSS 属性会影响元素的显示方式

  1. CSS 声明位于大括号中，而且每条声明都由两部分组成：属性和值，两者由冒号隔开。
  2. 可以在一条声明内指定多个属性，各属性之间用分号隔开。
1
2
3
4

h1, h2, h3 {
    font-family: Arial;
    color: yellow;
}
  1. 属性表明想要改变元素的那些方面，例如字体、宽度、高度等。
  2. 值用来指定想要在所选元素上应用的属性，例如指定字体颜色为蓝色。

5. 使用外部 CSS

  1. <link> 元素位于 <head> 元素中，用来告诉浏览器在何处寻找用于定义页面样式的 CSS 文件，它是一个空元素。
  2. href 表明 CSS 元素的路径。
  3. type 表示该页面链接到的文档类型，对于 CSS 而言，则值为 text/css。
  4. rel 表示 HTML 页面与被链接文件的关系，当链接到一个 CSS 文件时，该特性的值为 stylesheet。
  5. 一个页面可以使用多个 CSS 样式表，这时需要多个 <link> 元素。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!DOCTYPE html>
<html>
    <head>
        <title>使用外部 CSS</title>
        <link rel="stylesheet" href="hello.css" type="text/css" />
    </head>
    <body>
        <h1>你好</h1>
    </body>
</html>

1
2
3

h1 {
    color: red;
}

6. 使用内部 CSS

  1. 使用 <style> 元素可以在 HTML 页面中添加 CSS 规则。
  2. <style> 元素通常置于 <head> 中。
  3. <style> 元素应该设置 type="text/css 属性表示这些样式是在 CSS 中指定的。
  4. 也可以直接在元素标签中通过指定 style="xxx" 来指定样式，不过并不推荐。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html>
    <head>
        <title>使用内部 CSS</title>
        <style type="text/css">
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>你好</h1>
    </body>
</html>

7. CSS 选择器

  1. CSS 选择器区分大小写。
  2. 常用的 CSS 选择器如下：
选择器含义示例解释
通用选择器应用于文档中所有元素* {}应用于页面中所有元素
类型选择器匹配元素名于选择器相同的元素h1, h2, h3 {}应用于 <h1>、<h2>、<h3> 元素
类选择器匹配这样的元素：元素的 class 属性值于此选择器句点后的部分相同.note {} p.note {}应用于所有 class 属性值为 note 的元素；应用于 class 属性值为 note 的 <p> 元素
ID选择器匹配这样的元素：元素的 id 属性值与此选择器井号后的部分相同#intro {}应用于 id 属性值为 intro 的元素
子元素选择器匹配指定元素的直接子元素li>a {}应用于所有父元素为 <li> 的 <a> 元素
后代选择器匹配指定元素的后代元素(不一定是直接子元素)p a {}应用于所有位于 <p> 元素中的 <a> 元素，无论中间有没有嵌套其他的元素
相邻兄弟选择器匹配一个元素的相邻的兄弟元素h1+p {}应用于 <h1> 元素之后的第一个 <p> 元素
普通兄弟选择器匹配一个元素的兄弟元素，无论是否相邻h1~p {}如果有两个 <p> 元素均为 <h1> 的兄弟元素，那么对这些 <p> 元素都应用

8. CSS 规则优先级

  1. 当有两个或两个以上的 CSS 规则应用在同一个元素上，需要理解谁会最终被应用。
  2. 就近原则，当两个选择器完全相同，后出现的选择器优先级较高。
  3. 具体性原则，如果一个选择器比其他选择器更具体，那么优先级更高。
  4. 重要性，可以在任意属性值后面增加 !important 来强调这条规则比应用于同一元素的其他规则更重要。

9. 继承

  1. 如果在父元素上指定了 CSS 属性，那么它们将应用于大多数子元素上。
  2. 有些 CSS 属性会被子元素继承，例如 font-family，另外一些则不会，例如 background-color 和 border 属性。
  3. 可以将属性值设置为 inherit 来强制大多数元素从父元素继承属性值。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
    <head>
        <title>继承</title>
        <link rel="stylesheet" href="hello.css" type="text/css" />
    </head>
    <body>
        <h1>你好</h1>
        <h2>我是 An</h2>
    </body>
</html>

1
2
3
4
5
6
7
8

body {
    color: red;
    border: 1px solid;
}

h2 {
    border: inherit;
}

10. 小结

  1. CSS 处理 HTML 元素时都假设它们各自位于一个无形的盒子中，并通过规则来指定元素的外观。
  2. CSS 规则是由选择器和声明来组成的。
  3. 不同类型的选择器允许你将 CSS 规则应用于各种不同的元素。
  4. 声明由两部分组成：所要改变的元素属性以及这些属性的值。
  5. 尽管 CSS 规则可以置于 HTML 页面中，但是它们通常出现在单独的页面中。