html添加css样式怎么

HTML（超文本标记语言）是一种用于创建网页的标记语言，而CSS（层叠样式表）则是一种用于描述网页外观和布局的语言，将CSS样式添加到HTML文档中，可以使网页更加美观、易于阅读和使用，在本文中，我们将详细介绍如何在HTML中添加CSS样式。

1. 内联样式

内联样式是直接在HTML元素的style属性中定义CSS样式的方法，这种方法适用于对单个元素进行样式设置，但不利于维护和重用样式。

<p style="color: red; font-size: 20px;"这是一个红色且字体大小为20px的段落。</p>

2. 内部样式

内部样式是通过在HTML文档的<head>部分添加<style>标签来实现的，这种方法适用于对整个页面的多个元素进行统一的样式设置。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>这是一个蓝色且字体大小为18px的段落。</p>
</body>
</html>

3. 外部样式

外部样式是通过创建一个独立的CSS文件，并在HTML文档的<head>部分使用<link>标签引入该文件来实现的，这种方法适用于对多个页面进行统一的样式设置，有利于维护和重用样式。

创建一个CSS文件，例如styles.css，并在其中添加样式：

/* styles.css */
p {
  color: green;
  font-size: 16px;
}

在HTML文档的<head>部分引入该CSS文件：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>这是一个绿色且字体大小为16px的段落。</p>
</body>
</html>

4. 优先级

在实际应用中，内联样式、内部样式和外部样式可能会同时出现，在这种情况下，它们的优先级如下：

1、内联样式（style属性）

2、内部样式（<style>标签）

3、外部样式（<link>标签引入的CSS文件）

5. CSS选择器

CSS选择器用于指定要应用样式的HTML元素，以下是一些常用的CSS选择器：

- 元素选择器：根据HTML元素的类型选择元素，如p、h1等。

- 类选择器：根据元素的class属性选择元素，如.important。

- ID选择器：根据元素的id属性选择元素，如#header。

- 属性选择器：根据元素的属性及其值选择元素，如[type="text"]。

6. 继承