📅 最后修改于: 2023-12-03 14:51:36.530000 🧑 作者: Mango
CSS（层叠样式表）是一种描述 HTML 或 XML（如 SVG、XHTML）等文件样式和外观的语言。CSS 与 HTML 没有直接关联，所以通过 CSS，用户可以更好地控制 HTML 元素的外观，而不必在 HTML 中直接编写样式。
CSS 规则由两个主要部分组成：选择器，以及一条或多条声明。
selector {
property: value;
property: value;
...
}
其中：
CSS 选择器是用于选择要设置样式的 HTML 元素。
元素选择器选取特定元素类型的所有元素。
p {
color: red;
}
选择所有 <p> 元素，并将颜色设置为红色。
ID 选择器选取具有特定 ID 的元素。
#first-paragraph {
font-weight: bold;
}
选择 ID 为 first-paragraph 的元素，并将字体加粗。
类选择器选取具有特定类的元素。
.warning {
color: yellow;
background-color: red;
}
选择类为 warning 的元素，并将文本颜色设置为黄色，背景颜色设置为红色。
后代选择器选取某个元素的后代元素。后代元素是嵌套在其他元素内的元素。
div p {
font-size: 14px;
}
选择所有 <div> 元素内的 <p> 元素，并将字体大小设置为 14 像素。
子元素选择器选取某个元素的子元素。
ul > li {
list-style-type: square;
}
选择所有 <ul> 元素的直接子元素 <li>，并将列表样式设置为方形。
color 属性设置文本颜色。
p {
color: blue;
}
设置 <p> 元素的文本颜色为蓝色。
background-color 属性设置元素的背景颜色。
body {
background-color: gray;
}
设置 <body> 元素的背景颜色为灰色。
font-size 属性设置文本的字体大小。
h1 {
font-size: 24px;
}
设置 <h1> 元素的字体大小为 24 像素。
font-family 属性设置文本的字体系列。
h1 {
font-family: "Helvetica Neue", sans-serif;
}
设置 <h1> 元素的字体系列为 "Helvetica Neue"，如果不能用该字体，则默认使用 sans-serif 字体系列。
text-align 属性设置文本的水平对齐方式。
p {
text-align: center;
}
设置 <p> 元素的文本居中对齐。
border 属性可以一次性设置元素的边框样式。
div {
border: 1px solid black;
}
设置 <div> 元素的边框宽度为 1 像素，样式为实线，颜色为黑色。
background-image 属性可以添加背景图片。
body {
background-image: url("background.jpg");
}
设置 <body> 元素的背景为 background.jpg 文件。
width 和 height 属性可调整图片的尺寸。
img {
width: 100px;
height: 100px;
}
设置所有 <img> 元素的尺寸为 100 像素 x 100 像素。
text-decoration 属性可添加文本修饰（例如下划线）。
a {
text-decoration: underline;
}
设置所有 <a> 元素的下划线修饰。
CSS 是网页设计中必须要掌握的技能之一，对于改进网页布局和外观十分重要。本指南提供了 CSS 基础语法、基本选择器和属性以及常见的样式实例。此外，还有许多高级的 CSS 高级技巧需要去深入学习和练习。