CSS 的类型（层叠样式表）(1)

📌 相关文章

📜 CSS 的类型（层叠样式表）(1)

📅 最后修改于: 2023-12-03 15:00:09.207000 🧑 作者: Mango

CSS的类型（层叠样式表）

CSS是一种用于描述HTML或XML文档样式和外观的语言，它定义了页面的布局、字体、颜色、大小等方面的样式。CSS可以将样式与HTML或XML文档分离，从而提高了页面的可维护性、灵活性和可重用性。

一、内嵌样式表

在HTML文档的<head>标签中通过<style>标签内嵌写入的样式称为内嵌样式表。内嵌样式表只影响当前文档中的元素。

以下是一个内嵌样式表的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>内嵌样式表</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello CSS!</h1>
  </body>
</html>

二、外部样式表

外部样式表是以.css为后缀名的样式文件，通过<link>标签将其与HTML文档关联。外部样式表可以被多个文档共享，使得样式的保持一致变得更加容易。

以下是一个外部样式表的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello CSS!</h1>
  </body>
</html>

外部样式表需要单独创建一个样式文件，如下所示：

h1 {
  color: red;
}

三、内联样式

内联样式是将样式直接写在HTML元素的style属性中的方法。内联样式表只影响当前的HTML元素。

以下是一个内联样式的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>内联样式</title>
  </head>
  <body>
    <h1 style="color: red;">Hello CSS!</h1>
  </body>
</html>

内联样式的写法是在标签上写上style属性，属性值是一个样式声明。

四、优先级

当多个选择器对同一元素设置了不同的样式时，CSS规定了一定的优先级顺序：

!important声明的样式具有最高优先级。
通过内联样式规定的样式具有次高优先级。
通过ID选择器查询的样式具有更高的优先级。
通过类选择器和属性选择器查询的样式具有中等优先级。
通过元素和伪元素选择器查询的样式具有较低优先级。
通配符选择器（*）和继承的样式具有最低优先级。

五、继承性

CSS中的大部分属性具有继承性，即某个元素的后代元素会继承该元素的样式属性。但也有一些属性不具有继承性，如border、padding、margin等。

六、总结

CSS是非常强大的样式工具，它通过内嵌样式表、外部样式表和内联样式表三种方式来实现样式的可复用和灵活性。同时，CSS也具有优先级和继承性这两个特点，可以根据需要来灵活使用。