CSS 是一种用来描述网页样式并布局的语言，它可以使我们的网页更加生动和美观。以下是一些简单易懂的 CSS 注释和代码示例，可以作为学习 CSS 的起点。
- 注释：
CSS 注释是用来在 CSS 代码中解释说明的，它们可以帮助开发者理解代码的功能，也可以在调试时临时隐藏代码。CSS 注释的语法是 /* 注释内容 */。
/* 这是一个注释，它不会被浏览器执行 */
- 选择器：
CSS 的选择器用来选择页面上的元素，然后应用样式。最常见的选择器有标签选择器、类选择器和 ID 选择器。
/* 标签选择器 */
p {
color: blue;
}
/* 类选择器，以 . 开头 */
.my-class {
color: red;
}
/* ID 选择器，以 # 开头 */
#my-id {
color: green;
}
- 属性和值：
CSS 属性和值组合起来定义了元素的样式。例如，color 属性和颜色值定义了文本颜色。
p {
color: blue; /* 设置段落文本为蓝色 */
font-size: 16px; /* 设置字体大小为16像素 */
}
- 链接样式：
CSS 可以用来定义链接在不同状态下的样式，例如：link, visited, hover, active。
/* 未访问的链接 */
a:link {
color: blue;
}
/* 访问过的链接 */
a:visited {
color: purple;
}
/* 鼠标悬停时的链接 */
a:hover {
color: red;
}
/* 选中的链接 */
a:active {
color: green;
}
- CSS 的优先级：
当多个选择器选中同一个元素，并且都定义了相同的属性时，将会应用哪个选择器的规则呢？CSS 有一个优先级的概念，通常情况下，更具体的选择器优先级更高。
/* 类选择器将会优先于标签选择器 */
p {
color: red;
}
.my-class {
color: blue;
}
- 嵌套规则：
CSS 可以用来定义父元素和子元素的样式，这种方式称为嵌套规则。
/* 为所有的段落定义了蓝色的文本 */
p {
color: blue;
/* 为段落内的 strong 元素定义了红色的文本 */
strong {
color: red;
}
}
- 导入 CSS：
可以通过 @import 规则在 CSS 文件中导入其他 CSS 文件。
/* 导入其他 CSS 文件 */
@import url('other-styles.css');
- CSS 布局：
CSS 可以用来创建各种布局，例如浮动布局、flexbox 布局、grid 布局等。
/* 浮动布局示例 */
.float-left {
float: left;
margin-right: 10px;
}
.float-right {
float: right;
margin-left: 10px;
}
/* Flexbox 布局示例 */
.flex-container {
display: flex;
}