CSS 基础语法
# CSS 基础语法
# 1. CSS 实例
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML（包括 SVG、XHTML）文档样式的样式表语言。CSS 可以控制文本的颜色、字体、间距、布局等。
# CSS 语法结构
一个完整的 CSS 规则由选择器、属性和属性值组成：
- 选择器：选择器用于选取需要应用样式的 HTML 元素。
- 属性：属性定义了需要设置的样式属性，例如颜色、对齐方式等。
- 属性值：属性值指定了属性的具体值。
CSS 规则的语法格式如下：
选择器 {
属性: 属性值;
}
1
2
3
2
3
# CSS 示例
以下是一个简单的 HTML 和 CSS 示例，用于说明如何使用 CSS 设置段落文本的颜色和对齐方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* CSS 规则开始 */
p {
color: red; /* 设置段落文本颜色为红色 */
text-align: center; /* 设置段落文本居中对齐 */
}
/* CSS 规则结束 */
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用 CSS 样式化。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在这个示例中：
<style>标签用于在 HTML 文档中定义内部样式表。- 选择器
p用于选取所有的段落元素（<p>）。 color属性用于设置段落文本的颜色，这里设置为红色。text-align属性用于设置段落文本的对齐方式，这里设置为居中对齐。
在浏览器中打开这个 HTML 文件，将显示两个段落，文本颜色为红色，并且居中对齐。
# 2. CSS 注释
注释是用来解释代码的，并且可以随意编辑，浏览器会忽略注释内容。CSS 注释以 /* 开始，以 */ 结束。
# 注释示例
/* 这是一个注释 */
p {
text-align: center; /* 这是另一个注释 */
color: black;
font-family: Arial;
}
1
2
3
4
5
6
2
3
4
5
6
在这个示例中：
/* 这是一个注释 */是一个单行注释，说明了注释的使用方法。text-align: center; /* 这是另一个注释 */在属性声明后添加了一个注释，用于解释该属性的作用。
# 注释的作用
- 提高代码可读性：注释可以帮助您和他人理解代码的目的和功能。例如，在大规模项目中，注释可以帮助团队成员快速理解代码逻辑和结构。
- 调试：在调试时，可以暂时注释掉某些代码，以便找出问题所在。例如，当某个样式出现问题时，可以逐个注释掉相关代码，找出导致问题的具体部分。
- 文档化：为代码添加详细的注释可以使其更容易维护和更新。例如，在复杂的样式规则中添加注释，说明每个部分的作用和用途，方便后期维护。
# 使用注释的建议
- 在编写 CSS 代码时，尽量保持注释简洁明了，避免冗长的注释。
- 注释应该描述代码的功能和目的，而不是重复代码的内容。
- 在关键部分和复杂的样式规则中添加注释，帮助他人理解代码。
- 定期更新注释，确保其与代码保持一致，避免误导。
通过使用注释，您可以显著提高代码的可读性和可维护性，使您的 CSS 代码更加清晰和易于理解。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05