肉渣教程

CSS 插入方式

上一节 下一节

CSS的三种插入方式

插入CSS样式表有三种方式，如下所示：

  • 通过<link>元素来引入外部样式表；
  • 以<style>标签在HTML源码内插入内部样式表；
  • 通过HTML元素的style属性来设置行内样式表。

引入外部样式表

使用外部样式表，非常方便就可以改变整个站点的风格样式。因为往往一个站点的多个页面都共用同一个外部样式表。

而引入外部样式表，则是通过在head元素中插入link元素，如下例所示：

<head>
<link rel="stylesheet" type="text/css" href="XXX.css">
</head>


例如“XXX.css”可如下所示：

body {
    background-color: LightBlue;
}

h1 {
    color: Tomato;
    margin-left: 20px;
}

外部的.css文件大部分文本编辑器都能编辑，只要最后保存成.css文件就ok啦~

友情提示：千万别在数值和单位之间加空格！举例说明margin-left: 20 px;是一种错误的写法，20和px这个单位之间不应该加上空格，因此正确的写法是margin-left:20px;

内部样式表

内部样式表一般是通过<style>标签的方式直接把样式表插入到HTML源码内，因此被插入的CSS样式表就被称为了内部样式表。一般来说，内部样式表的style元素都是位于head元素内，但是这不是绝对的，直接插入在body元素中也是没问题的。

内部样式表往往适用于定义此页面比较独特的元素样式设置。（用白话来说，就是这样方式搞的样式主要就是用于当前这个单独的页面，这里面的CSS样式不会被其他页面样式，所以咱就图省事，直接在HTML页面中这么搞出来，方便直观，何乐而不为，何懒而不偷呢）

<html>
<head>
<style>
h1 {
    color: #46acb6;
    margin-left: 10px;
    }
p {
    color: LightGray;
    margin-left: 13px;
    }
</style>
</head>

<body>
    <h1>标题</h1>
    <p>这是一个段落</p>
</body>
</html>

运行一下

行内样式表

通过元素的style属性可以设置行内样式表；行内样式表这种方式比较适合某元素需要单独进行一些样式设置。

<h1 style="color:#46acb6;margin-left:10px;">标题</h1>

运行一下

样式表插入方式的优先级别

接下来的内容很重要，要说一下样式表插入方式的优先级别，即相同选择器中的相同属性的取值覆盖问题（这里暂时说的比较简单，主要说的还是样式表的优先级别）。

原则是不管哪种引入方式，后引入的（后声明的）样式表的优先级别更高；即后声明的样式表中的属性取值会覆盖之前的取值。

  • 一般来说，行内样式表肯定是优先级别最高的，因为它肯定是最后进行声明的。
  • 外部样式表与内部样式表则是优先级别次高的。（不同的样式表则根据声明的前后）
  • 浏览器默认的默认属性取值则是优先级别最低的。

这里主要是在说样式表插入方式的优先级别，但这里说到的覆盖，不是选择器的覆盖，而是具体元素的某个样式属性的取值的覆盖。

如下例所示：

<html>
<head>
<style>
h1 {
    color: #46acb6;
    margin-left: 10px;
    }
p {
    color: LightGray;
    margin-left: 13px;
    }
</style>
<link href="https://logo.zhuanfou.com/red.css" rel="stylesheet">
<!-- 外部样式表red.css会覆盖上面的内部样式表中对p元素的颜色属性的设定 -->
</head>

<body>
    <h1 style="color:Orange">标题</h1>
    <p>这是一个段落</p>
</body>
</html>

运行一下


再来一个极端的例子：

<style>
p {
    color: Black;
    color: Gray;
    color: White;
    color: Green;
    color: Blue;
    color: Orange;
    color: Red;
    }
</style>

<!-- 哪种属性是最后声明的就是哪种 -->
<!-- 因此最终肯定显示成“红色Red” -->
<p>这是一个段落</p>

运行一下

上面说的都是比较简单的情况，是相同选择器属性覆盖，那不同种类的选择器也有优先级别的差异。这个很复杂，后文会具体说道。

CSS 插入方式

上一节 下一节