在前端开发中，CSS（层叠样式表）是一种用于描述HTML元素在屏幕上如何显示的语言，它可以用来设置文本颜色、背景颜色、字体大小、边距、对齐方式等属性，CSS可以通过内联样式、内部样式表和外部样式表的方式来应用到HTML文档中。
1、内联样式
内联样式是将CSS样式直接写在HTML元素的style属性中，这种方式的优点是可以直接修改单个元素的样式，不会影响到其他元素，如果需要修改多个相同元素的样式，就需要逐个修改，比较繁琐。
示例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联样式示例</title> </head> <body> <p style="color: red; font-size: 20px;">这是一个红色的段落。</p> <p style="color: blue; font-size: 24px;">这是一个蓝色的段落。</p> </body> </html>
2、内部样式表
内部样式表是将CSS样式写在HTML文档的<head>标签内的<style>标签中，这种方式的优点是可以将样式与HTML内容分离，便于维护，如果需要修改多个页面的样式，就需要在每个页面中都进行修改。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式表示例</title>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个绿色的段落。</p>
<p>这是另一个绿色的段落。</p>
</body>
</html>
3、外部样式表
外部样式表是将CSS样式写在一个单独的文件中，然后在HTML文档中使用<link>标签将其引入，这种方式的优点是可以将样式与HTML内容完全分离，便于维护和复用，只需要修改一个文件，就可以影响到所有引用了该样式表的页面。
示例代码：
创建一个名为style.css的外部样式表文件：
/* style.css */
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
在HTML文档中使用<link>标签引入外部样式表：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外部样式表示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>这是一个标题。</h1> <p>这是一个段落。</p> </body> </html>
除了以上三种基本的CSS使用方法，还可以使用CSS选择器来精确地控制哪些元素应用哪种样式，常见的CSS选择器有元素选择器、类选择器、ID选择器、后代选择器、子元素选择器等，还可以使用CSS预处理器（如Sass、Less）来编写更简洁、易于维护的CSS代码。
CSS是前端开发中不可或缺的一部分，掌握好CSS的使用，可以让我们的网站更加美观、易于维护。
