📅 最后修改于: 2023-12-03 15:08:38.025000 🧑 作者: Mango
CSS（Cascading Style Sheets）是一种用于设计网页外观的语言。在 HTML 中使用 CSS 可以帮助我们更加轻松地组织网页结构、美化页面样式、并增强用户体验。
在 HTML 文件头部添加 <style> 标签，并在其中定义样式规则，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<style>
body {
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Here is some content...</p>
</body>
</html>
将 CSS 样式规则定义在一个 .css 文件中，并在 HTML 文件头部使用 <link> 标签引入，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Here is some content...</p>
</body>
</html>
其中 href 属性指向了 style.css 文件所在的路径。
在 HTML 元素中使用 style 属性定义样式规则，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1 style="color: #333; text-align: center;">Welcome to my webpage</h1>
<p>Here is some content...</p>
</body>
</html>
CSS 规则由选择器和声明块组成，如下所示：
selector {
property: value;
property: value;
...
}
其中：
selector 用于指定要应用样式规则的 HTML 元素；property 用于指定要修改的 CSS 属性；value 表示 CSS 属性的值。CSS 选择器可以按照多种方式进行分类，这里介绍几种常用的选择器类型：
h1 {
color: #333;
}
上述代码表示，将所有 <h1> 标签的颜色设置为 #333。
#my-id {
background-color: #f5f5f5;
}
上述代码表示，将 id 为 my-id 的 HTML 元素的背景色设置为 #f5f5f5。
.my-class {
font-size: 16px;
}
上述代码表示，将所有 class 为 my-class 的元素的字体大小设置为 16px。
color用于设置元素的字体颜色，格式为 color: value;，其中 value 可以是颜色的名称（如 red）或者是 rgb 值（如 rgb(255, 0, 0)）。
background-color用于设置元素的背景颜色，格式为 background-color: value;，其中 value 的取值方式与 color 属性相同。
font-size用于设置字体大小，格式为 font-size: value;，其中 value 可以是像素值（如 16px）或者是百分比（如 100%）。
text-align用于设置文本对齐方式，格式为 text-align: value;，其中 value 可以是 left、center 或 right。
margin用于设置元素的外边距，格式为 margin: value;，其中 value 可以是像素值，也可以是百分比。
以上是 CSS 基础知识的简单介绍，详细内容可参考 W3C 官方文档。