1. 内联样式
内联样式是将CSS代码直接添加到HTML元素的style属性中。这种方法的优点是可以直接修改元素的样式，不需要额外的文件。但是，如果多个元素需要相同的样式，内联样式会导致代码重复，不易于维护。
示例：
<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>2. 内部样式表
内部样式表是将CSS代码放在HTML文档的<head>标签内的<style>标签中。这种方法适用于单个HTML文件，可以将样式与内容分离，便于维护。但是，如果多个HTML文件需要相同的样式，就需要重复编写CSS代码。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落。</p>
</body>
</html>3. 外部样式表
外部样式表是将CSS代码放在一个单独的文件中，然后在HTML文档中使用<link>标签将其引入。这种方法可以使得CSS代码与HTML内容完全分离，便于维护和重用。同时，浏览器会缓存外部样式表，提高页面加载速度。
首先，创建一个名为styles.css的CSS文件：
/* styles.css */
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}然后，在HTML文档中使用<link>标签引入外部样式表：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落。</p>
</body>
</html>4. @import规则（已废弃）
在旧版本的CSS中，可以使用@import规则将一个CSS文件导入到另一个CSS文件中。但是，由于@import会增加页面加载时间，且兼容性较差，目前已被废弃。建议使用<link>标签引入外部样式表。
5. CSS预处理器（可选）
CSS预处理器（如Sass、Less等）是一种扩展CSS的功能，允许使用变量、嵌套、混合等功能来编写更简洁、可维护的CSS代码。要使用CSS预处理器，需要先安装相应的编译器，然后将预处理器代码编译成普通的CSS代码。例如，使用Sass预处理器：
// styles.scss (Sass)
$primary-color: blue;
body {
background-color: $primary-color;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}编译后的CSS代码：
/* styles.css (普通CSS) */
body { background-color: blue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbnRlbnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL3BsYWluL3BsYWludC5jc3MifQ==*/*/*/```原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/127556.html
微信扫一扫 