在HTML中，引入CSS的方法有以下几种：
1、内联样式
2、内部样式表
3、外部样式表
4、使用<style>标签
下面详细介绍这四种方法：
1. 内联样式
内联样式是指将CSS样式直接写在HTML元素的style属性中，这种方式的优点是修改方便，不需要修改HTML文件；缺点是不利于代码的维护和复用，示例如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内联样式示例</title> </head> <body> <h1 style="color: red;">红色字体</h1> <p style="font-size: 16px;">16号字体</p> </body> </html>
2. 内部样式表
内部样式表是指将CSS样式写在一个单独的.css文件中，然后通过<link>标签引入到HTML文件中，这种方式的优点是代码结构清晰，便于维护和复用；缺点是需要额外创建一个CSS文件，示例如下：
假设我们有一个名为style.css的CSS文件，内容如下：
h1 {
color: red;
}
p {
font-size: 16px;
}
然后在HTML文件中引入这个CSS文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内部样式表示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>红色字体</h1> <p>16号字体</p> </body> </html>
3. 外部样式表
外部样式表是指将CSS样式写在一个单独的.css文件中，并通过<link>标签引入到HTML文件的根目录下，这种方式的优点是代码结构清晰，便于维护和复用；缺点是需要确保CSS文件的位置正确，示例如下：
假设我们有一个名为style.css的CSS文件，内容如下：
h1 {
color: red;
}
p {
font-size: 16px;
}
然后在HTML文件的根目录下创建一个名为index.html的文件，内容如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外部样式表示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>红色字体</h1> <p>16号字体</p> </body> </html>
4. <style>标签
<style>标签用于在HTML文档的<head>部分插入CSS样式，这种方式的优点是可以直接在HTML文档中编写CSS样式，无需额外创建CSS文件；缺点是不利于代码的维护和复用，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
h1 {color: red;} /* 这里直接编写CSS样式 */
p {font-size: 16px;} /* 这里直接编写CSS样式 */
</style> <!-</style> 标签可以省略 -->
</head>
<body> <!-body标签可以省略 --> </body> </html> > ```
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/221447.html
微信扫一扫 