文章: 阅读:

CSS 样式表

CSSCSS

前言

  • 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

  • 插入样式表的方法有三种:

    • 外部样式表（External style sheet）
    • 内部样式表（Internal style sheet）
    • 内联样式（Inline style）

1、外部样式表

  • 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

    1
    2
    3
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>

  • 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

  • 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

    1
    2
    3
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("/images/back40.gif");}

  • 不要在属性值与单位之间留有空格。

    1
    margin-left: 20 px;

  • 正确的写法是。

    1
    margin-left: 20px;

2、内部样式表

  • 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

    1
    2
    3
    4
    5
    6
    7
    <head>
        <style>
             hr {color: sienna;}
             p {margin-left: 20px;}
             body {background-image: url("images/back40.gif");}
        </style>
    </head>

3、内联样式

  • 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

  • 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

    1
    <p style="color: sienna; margin-left: 20px;">这是一个段落。</p>

4、多重样式

  • 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

  • 例如，外部样式表拥有针对 h3 选择器的三个属性：

    1
    2
    3
    4
    5
    h3 {
        color: red;
        text-align: left;
        font-size: 8pt;
    }

  • 而内部样式表拥有针对 h3 选择器的两个属性：

    1
    2
    3
    4
    h3 {
        text-align: right;
        font-size: 20pt;
    }

  • 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

    1
    2
    3
    color: red;
    text-align: right;
    font-size: 20pt;

  • 即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

4.1 多重样式优先级

  • 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

  • 一般情况下，优先级如下：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <head>
        <!-- 外部样式 style.css -->
        <link rel="stylesheet" type="text/css" href="style.css" />
        
        <!-- 内部样式，设置：h3{color:blue;} -->
        <style type="text/css">
            h3{color: green;}
        </style>
    </head>
    <body>
        <h3>测试！</h3>
    </body>

  • 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

4.2 多重样式优先级深入概念

  • 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

  • 优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

  • CSS 7 种选择器：

    • id 选择器
    • 类选择器
    • 伪类选择器
    • 属性选择器
    • 内联样式（伪元素选择器）
    • 通用选择器（通配选择器）（*）
    • 元素(类型)选择器（标签选择器）

  • CSS 优先规则：

    • 内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

  • !important 规则例外

    • 当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明, 无论它处在声明列表中的哪里。尽管如此, !important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

    • 一些经验法则：

      • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important。
      • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important。
      • Never 永远不要在全站范围的 css 上使用 !important。
      • Never 永远不要在你的插件中使用 !important。

  • 权重计算:

    • 内联样式表的权值最高 1000；
    • ID 选择器的权值为 100
    • Class 类选择器的权值为 10
    • HTML 标签选择器的权值为 1

  • CSS 优先级法则：

    • A 选择器都有一个权值，权值越大越优先；
    • B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
    • C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
    • D 继承的 CSS 样式不如后来指定的 CSS 样式；

    • E 在同一组属性设置中标有 “!important” 规则的优先级最大；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <head>
          <style type="text/css">
              #redP p {
                  /* 两个 color 属性在同一组 */
                  color: #00f !important; /* 优先级最大 */
                  color: #f00;
              }
          </style>
      </head>

      <body>
          <div id="redP">
              <p>Hello World!</p>
          </div>
      </body>

    • 结果：在 Firefox 下显示为蓝色；在 IE 6 下显示为红色。

  • 流行的 CSS 权重关系图

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:02


评论


文章目录
  1. 1. 前言
  2. 2. 1、外部样式表
  3. 3. 2、内部样式表
  4. 4. 3、内联样式
  5. 5. 4、多重样式
    1. 5.1. 4.1 多重样式优先级
    2. 5.2. 4.2 多重样式优先级深入概念
隐藏目录