📅 最后修改于: 2023-12-03 15:41:57.031000 🧑 作者: Mango
CSS 是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述 HTML 或 XML（包括 SVG 和 XUL）等文档展示方式的语言。
主要用于设置文档的布局、字体、颜色、背景、边框等方面的样式。
CSS 的出现是为了解决 HTML 标签过于冗长和混乱的问题，并使网页的样式和布局更加丰富多样化。
使用 CSS 可以使网页的内容达到更好的分离，即 HTML 负责网页结构，CSS 负责样式和布局。这样就可以使网页代码更加简洁易懂，更容易维护。
CSS 的语法由选择器、属性和值构成，其中选择器用于选择元素，属性用于设置元素的样式特征，值则为属性的具体取值。
选择器能够根据 HTML 元素的特征来定位元素，从而设置相应的样式。以下是几种基本的选择器。
元素选择器：通过选择 HTML 标签来定位元素。
p {
color: red;
}
类选择器：通过 class 属性的值来定位元素。
.red {
color: red;
}
ID 选择器：通过 id 属性的值来定位元素。
#title {
font-size: 24px;
}
后代选择器：通过选择祖先元素和后代元素，来定位元素。
ul li {
list-style: none;
}
属性用于设置元素的样式特征，如颜色、字体大小、边框等。值则为属性的具体取值。
p {
color: red;
font-size: 16px;
border: 1px solid black;
}
CSS 可以通过三种方式应用于 HTML 页面中。
将样式直接写在 HTML 骨架中，放在 <style> 标签内。该方式适用于针对该页面定制的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal Style Sheet</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
将样式单独写在一个 CSS 文件中，再通过 <link> 标签将其引入到 HTML 页面中。该方式适用于多个页面需要共享相同的样式。
在 .css 文件（如 style.css）中写入以下样式：
p {
color: red;
}
在 HTML 页面中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External Style Sheet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
将样式直接写在 HTML 元素的 style 属性中。该方式适用于即时需要调整元素样式，且不需要复用的情况下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Style</title>
</head>
<body>
<p style="color: red;">Hello World!</p>
</body>
</html>
以上就是 CSS 的基本介绍和使用方式。