📅 最后修改于: 2023-12-03 14:41:59.318000 🧑 作者: Mango
CSS（层叠样式表）是 HTML 网页设计的一种标准，是一种描述如何显示 HTML 元素的样式表语言。CSS 使网页的样式更加精确地定义，提高了网页的可维护性和可读性。
CSS 的基本语法包括选择器、属性和值。下面是一些基本的语法：
选择器 {
属性名称: 属性值;
}
其中，选择器用于选中一些元素，属性名称用于描述选中的元素的样式属性，属性值是对该属性的解释。
例如，通过以下代码将 HTML 页面中所有段落的颜色设置为红色：
p {
color: red;
}
该代码中，选择器为 p，表示选中所有的 p 标签，color 属性名称表示段落的文本颜色，属性值为 red 表示将文本颜色设置为红色。
CSS 样式表可以通过以下方式引入到 HTML 文档中：
在 HTML 文档中使用 <style> 元素定义 CSS 样式表，如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个测试段落。</p>
</body>
</html>
内部样式表的样式定义只对当前页面生效。
外部样式表是一个独立的 CSS 文件，可以在 HTML 文档中通过 <link> 元素引入：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个测试段落。</p>
</body>
</html>
上述代码中，href 属性值指定了外部样式表的文件路径。
CSS 提供多种选择器，用于选择 HTML 中的不同元素，下面介绍一些常用的选择器：
标签选择器选择指定类型的 HTML 元素。例如，以下样式将改变所有段落元素的颜色：
p {
color: red;
}
ID 选择器通过元素的 ID 属性进行选择。ID 是元素的唯一识别符。例如，以下样式将改变 ID 为 header 的元素的背景颜色：
#header {
background-color: #eee;
}
类选择器通过元素的类属性进行选择，可用于多个元素共用同一种样式。例如，以下样式将改变所有类名为 warning 的元素的文本颜色：
.warning {
color: red;
}
组合选择器将不同选择器组合在一起，以选定特定的元素。例如，以下样式将改变所有 p 标签中的加粗元素的颜色：
p strong {
color: blue;
}
CSS 属性指定了元素的外观和布局。下面介绍一些常用的 CSS 属性：
text-align 属性指定元素内部文本的水平对齐方式。例如，以下样式将段落元素的文本居中对齐：
p {
text-align: center;
}
font-size 属性指定字体的大小。例如，以下样式将段落元素的字体大小设置为 16 像素：
p {
font-size: 16px;
}
margin 属性指定元素周围的空白区域。例如，以下样式将段落元素周围的上、下、左、右边距都设置为 20 像素：
p {
margin: 20px;
}
padding 属性指定元素内侧的空白区域。例如，以下样式将段落元素的内侧上、下、左、右内边距都设置为 10 像素：
p {
padding: 10px;
}
border 属性指定元素的边框。例如，以下样式为段落元素添加了一个 1 像素宽的红色边框：
p {
border: 1px solid red;
}
CSS 样式可以通过继承传递至元素的后代元素。即，父元素的样式会被其子元素继承。例如，以下样式会将 <em> 元素的字体样式和彩色继承自其父级元素：
p {
color: blue;
font-size: 12px;
}
em {
color: inherit;
font-size: inherit;
}
CSS 提供了丰富的语法和属性，可以用于控制 HTML 文档的显示。选择器用于选中元素，属性用于指定元素的样式，继承机制使得样式可以通过继承传递至下级元素。了解基本的 CSS 语法和属性，可以使得开发者更加高效地设计前端界面，提高用户体验。