CSS是一种用来为HTML文档添加样式和布局的语言，它可以让网页变得更美观和易于使用。CSS的全称是Cascading Style Sheets，意思是层叠样式表，这是因为CSS可以定义多个样式规则，并且按照一定的优先级进行层叠和继承，从而实现复杂的样式效果。CSS的语法很简单，主要由选择器和声明组成，选择器用来指定要应用样式的元素，声明用来定义元素的属性和值。
- 基本选择器：这是最常用的选择器，它们可以根据元素的名称、类名、ID或通配符来选择元素。例如：
/* 基本选择器 */
p { /* 选择所有的<p>元素 */
color: blue; /* 设置文字颜色为蓝色 */
}
.center { /* 选择所有class="center"的元素 */
text-align: center; /* 设置文本居中对齐 */
}
#logo { /* 选择id="logo"的元素 */
width: 100px; /* 设置宽度为100像素 */
}
* { /* 选择所有元素 */
margin: 0; /* 设置外边距为0 */
}
- 组合器选择器：这是一种可以组合多个基本选择器来表示元素之间的关系的选择器，它们可以根据元素的后代、子级、相邻兄弟或一般兄弟来选择元素。例如：
/* 组合器选择器 */
div p { /* 选择<div>元素内部的所有<p>元素 */
font-weight: bold; /* 设置字体加粗 */
}
ul > li { /* 选择<ul>元素直接子级的所有<li>元素 */
list-style: none; /* 设置列表样式为无序列表 */
}
h1 + p { /* 选择紧跟在<h1>元素后面的第一个<p>元素 */
font-size: 1.2em; /* 设置字体大小为1.2倍 */
}
h2 ~ p { /* 选择在<h2>元素后面的所有<p>元素 */
color: red; /* 设置文字颜色为红色 */
}
- 伪类选择器：这是一种可以根据元素的状态或位置来选择元素的选择器，它们通常以冒号（:）开头，后面跟着伪类名称。例如：
/* 伪类选择器 */
a:link { /* 选择所有未访问过的链接 */
color: green; /* 设置链接颜色为绿色 */
}
a:visited { /* 选择所有访问过的链接 */
color: purple; /* 设置链接颜色为紫色 */
}
a:hover { /* 选择鼠标悬停在链接上时的链接 */
text-decoration: underline; /* 设置链接下划线 */
}
a:active { /* 选择鼠标点击时的链接 */
color: yellow; /* 设置链接颜色为黄色 */
}
p:first-child { /* 选择每个<p>元素是其父级的第一个子级时的<p>元素 */
font-style: italic; /* 设置字体斜体 */
}
p:last-child { /* 选择每个<p>元素是其父级的最后一个子级时的<p>元素 */
font-size: larger; /* 设置字体大小为更大 */
}
p:nth-child(2n) { /* 选择每个<p>元素是其父级的偶数个子级时的<p>元素 */
background-color: lightgray; /* 设置背景颜色为浅灰色 */
}
- 伪元素选择器：这是一种可以选择元素的一部分或生成内容的选择器，它们通常以两个冒号（::）开头，后面跟着伪元素名称。例如：
/* 伪元素选择器 */
p::first-letter { /* 选择每个<p>元素的第一个字母 */
font-size: 2em; /* 设置字体大小为2倍 */
}
p::first-line { /* 选择每个<p>元素的第一行 */
text-transform: uppercase; /* 设置文本转换为大写 */
}
p::before { /* 在每个<p>元素之前插入内容 */
content: "【"; /* 设置插入的内容为【 */
color: blue; /* 设置插入的内容颜色为蓝色 */
}
p::after { /* 在每个<p>元素之后插入内容 */
content: "】"; /* 设置插入的内容为】 */
color: blue; /* 设置插入的内容颜色为蓝色 */
}
- 属性选择器：这是一种可以根据元素的属性或属性值来选择元素的选择器，它们通常以方括号（[]）包围属性名和属性值。例如：
/* 属性选择器 */
a[target] { /* 选择所有有target属性的<a>元素 */
font-weight: bold; /* 设置字体加粗 */
}
a[target="_blank"] { /* 选择所有target属性值为"_blank"的<a>元素 */
color: orange; /* 设置链接颜色为橙色 */
}
a[href^="https"] { /* 选择所有href属性值以"https"开头的<a>元素 */
border: 1px solid green; /* 设置边框为1像素的绿色实线 */
}
a[href$=".pdf"] { /* 选择所有href属性值以".pdf"结尾的<a>元素 */
background-image: url("pdf-icon.png"); /* 设置背景图片为pdf图标 */
}
a[href*="runoob"] { /* 选择所有href属性值包含"runoob"的<a>元素 */
font-size: larger; /* 设置字体大小为更大 */
}
