1. CSS 介绍
CSS（Cascading Style Sheets）是一种样式表语言，用于描述 HTML 或 XML（包括如 SVG、XHTML 等）文档的外观和格式。CSS 允许开发者将文档的内容与其表现分离，使得网页设计更加灵活和可维护。CSS 可以应用于整个文档，也可以应用于文档的一部分。
2. 4种基本选择器
CSS 提供了多种选择器来选择 HTML 元素，以便应用样式。以下是四种基本选择器：
- 元素选择器：选择所有指定元素。
p {color: red;
}
- 类选择器：选择所有具有指定类的元素。
.highlight {background-color: yellow;
}
- ID 选择器：选择具有指定 ID 的元素。
#unique {font-size: 20px;
}
- 通配符选择器：选择所有元素。
* {margin: 0;padding: 0;
}
3. 5种符号选择器
符号选择器用于选择具有特定符号的元素。
- 属性选择器：选择具有指定属性的元素。
input[type="text"] {background-color: lightgrey;
}
- 属性值选择器：选择具有指定属性值的元素。
a[href$=".pdf"] {color: red;
}
- 子元素选择器：选择指定元素的直接子元素。
ul > li {color: blue;
}
- 后代选择器：选择指定元素的所有后代元素。
div p {font-size: 14px;
}
- 相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。
h1 + p {font-size: 18px;
}
4. 其他选择器
除了基本和符号选择器外，CSS 还提供了其他选择器，如：
- 伪类选择器：选择具有特定状态的元素。
- 伪元素选择器：选择元素的特定部分。
5. 伪类选择器
伪类选择器用于选择具有特定状态的元素，如：
:hover：当鼠标悬停在元素上时。:active：当元素被激活时（例如，按下按钮）。:focus：当元素获得焦点时。:first-child：选择元素的第一个子元素。:last-child：选择元素的最后一个子元素。
a:hover {color: red;
}
6. 字体样式
CSS 提供了多种属性来控制字体样式，如：
font-family：设置字体。font-size：设置字体大小。font-weight：设置字体粗细。font-style：设置字体样式（如斜体）。text-transform：控制文本大小写。
p {font-family: Arial, sans-serif;font-size: 16px;font-weight: bold;font-style: italic;text-transform: uppercase;
}
7. 文本样式
CSS 提供了多种属性来控制文本样式，如：
color：设置文本颜色。text-align：设置文本对齐方式。text-decoration：设置文本装饰（如下划线、删除线）。line-height：设置行高。letter-spacing：设置字符间距。
p {color: blue;text-align: center;text-decoration: underline;line-height: 1.5;letter-spacing: 2px;
}
8. 背景样式
CSS 提供了多种属性来控制背景样式，如：
background-color：设置背景颜色。background-image：设置背景图片。background-repeat：设置背景图片是否重复。background-position：设置背景图片的位置。background-size：设置背景图片的大小。
div {background-color: lightgrey;background-image: url('image.jpg');background-repeat: no-repeat;background-position: center;background-size: cover;
}
9. 列表样式
CSS 提供了多种属性来控制列表样式，如：
list-style-type：设置列表项标记的类型。list-style-position：设置列表项标记的位置。list-style-image：设置列表项标记的图片。
ul {list-style-type: square;list-style-position: inside;
}
10. 包围盒
CSS 中的包围盒（Box Model）是一个框，它包围元素的内容、内边距、边框和外边距。
- 内容：元素的实际内容。
- 内边距：内容与边框之间的空间。
- 边框：围绕内边距和内容的边框。
- 外边距：元素外部的空间。
11. display 的使用
display 属性用于设置元素的显示类型，如：
block：块级元素。inline：行内元素。inline-block：行内块元素。none：不显示元素。
div {display: block;
}
12. 绝对定位和相对定位
- 绝对定位：元素相对于最近的定位祖先元素定位。
- 相对定位：元素相对于其正常位置定位。
.absolute {position: absolute;top: 20px;left: 50px;
}.relative {position: relative;top: 10px;left: 20px;
}
13. 固定定位和粘性定位
- 固定定位：元素相对于浏览器窗口定位。
- 粘性定位：元素在滚动到一定位置时固定。
.fixed {position: fixed;bottom: 0;right: 0;
}.sticky {position: sticky;top: 0;
}
14. 浮动
浮动是一种布局技术，它允许元素浮动在其父元素的左侧或右侧。
.float-left {float: left;
}.float-right {float: right;
}
想要使自己写的页面按照自己的意愿展示在你的眼前，那需要熟练掌握它们的特性。当然还有很多属性没有介绍，不过大差不差，你可以在编辑器的提示下进行尝试。
