# CSS入门教程
CSS是层叠样式表（Cascading Style Sheets）的缩写，它是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML或XHTML等）文档样式的样式表语言，CSS是网页设计的重要组成部分，它可以使网页更加美观，易于阅读和维护。
在开始学习CSS之前，我们首先需要了解一些基础知识。
## HTML与CSS的关系
HTML是一种用于描述网页结构的标记语言，它定义了网页的骨架，例如标题、段落、列表、链接等，而CSS则定义了网页的样式，例如颜色、字体、布局等。
HTML和CSS是相互独立的，但是它们可以协同工作，使网页更加完美，HTML文件通常包含一个或多个链接到CSS文件的``元素，通过使用CSS，我们可以将样式与HTML分离，使代码更易于维护和重用。
## CSS的基本语法
CSS规则由两个主要部分组成：选择器和一组声明块，选择器通常是你想要样式化的HTML元素，在声明块中，你可以指定该元素的样式属性及其对应的值。
下面是一个简单的CSS规则的示例：
p {
color: red;
font-size: 16px;
}在这个例子中，`p`是选择器，`color`和`font-size`是属性，`red`和`16px`是它们的值，这个规则的意思是，所有的``元素（段落）都应该以红色字体显示，字体大小为16像素。
## CSS的属性与值
CSS有许多属性，可以用来设置元素的外观和布局，下面是一些常用的CSS属性：
* `color`：设置文本颜色。
* `background-color`：设置背景颜色。
* `font-size`：设置字体大小。
* `font-family`：设置字体类型。
* `text-align`：设置文本对齐方式。
* `margin`：设置元素的外边距。
* `padding`：设置元素的内边距。
* `border`：设置元素的边框。
* `width`和`height`：设置元素的宽度和高度。
* `display`：设置元素的显示方式。
每个属性都有一个值，这个值可以是颜色、长度（像素、百分比等）、字体、URL等，在设置属性值时，需要注意单位和语法，颜色值需要用英文单词（如`red`）或十六进制代码（如`#FF0000`）表示；长度值需要用数字和单位符号表示（如`10px`、`50%`）。
## CSS的选择器
CSS选择器是用于选择要样式化的HTML元素的模式，下面是一些常用的CSS选择器：
* 元素选择器：通过HTML元素的名称来选择元素，`p`选择器会选择所有的段落元素。
* 类选择器：通过元素的class属性来选择元素，`.intro`选择器会选择所有class属性包含`intro`的元素。
* ID选择器：通过元素的ID属性来选择元素，`#firstname`选择器会选择ID属性为`firstname`的元素。
* 后代选择器：通过空格分隔两个元素名称来选择嵌套在其他元素中的元素，`div p`选择器会选择所有嵌套在div元素中的段落元素。
* 子元素选择器：通过大于符号（>）分隔两个元素名称来选择直接子元素，`div > p`选择器会选择所有直接嵌套在div元素中的段落元素。
* 相邻兄弟选择器：通过加号（+）分隔两个元素名称来选择下一个同级元素，`div + p`选择器会选择所有紧接在div元素后的段落元素。
* 通用兄弟选择器：通过波浪号（~）分隔两个元素名称来选择之后的所有同级元素，`div ~ p`选择器会选择所有在div元素之后的所有同级段落元素。
除了这些基本的CSS选择器外，还有许多其他高级的选择器，如属性选择器、伪类选择器和伪元素选择器等，这些高级选择器可以使你更精确地控制页面样式的应用范围。
