css如何在html中应用

admin
行业动态
2024-04-06
3795

在HTML中使用CSS，可以通过以下几种方式：

1、内联样式：在HTML元素的style属性中直接写入CSS代码。

2、内部样式表：在HTML文档的<head>标签内使用<style>标签编写CSS代码。

3、外部样式表：将CSS代码保存在一个单独的.css文件中，然后在HTML文档的<head>标签内使用<link>标签链接到该文件。

下面分别介绍这三种方法的详细步骤：

1. 内联样式

在HTML元素的style属性中直接写入CSS代码，这种方式适用于对单个元素进行样式设置的场景。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>内联样式示例</title>
</head>
<body>
<h1 >这是一个红色标题</h1>
<p >这是一个蓝色段落</p>
</body>
</html>

2. 内部样式表

在HTML文档的<head>标签内使用<style>标签编写CSS代码，这种方式适用于对多个元素进行样式设置的场景。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>内部样式表示例</title>
<style>
  h1 {
    color: red;
    fontsize: 24px;
  }
  p {
    color: blue;
    fontsize: 16px;
  }
</style>
</head>
<body>
<h1>这是一个红色标题</h1>
<p>这是一个蓝色段落</p>
</body>
</html>

3. 外部样式表

将CSS代码保存在一个单独的.css文件中，然后在HTML文档的<head>标签内使用<link>标签链接到该文件，这种方式适用于对整个网站或多个页面进行样式设置的场景。

创建一个名为style.css的文件，内容如下：

h1 {
  color: red;
  fontsize: 24px;
}
p {
  color: blue;
  fontsize: 16px;
}

在HTML文档中链接这个外部样式表：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>这是一个红色标题</h1>
<p>这是一个蓝色段落</p>
</body>
</html>