这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

---

一. CSS的概念

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。
CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。

---

二. 选择器

1. 通配选择器

*{
color: red;
font-size: 20px;
}

在上述代码中 * 便是匹配所有。在代码中无论是p标签还是h系列标签都会按照通配选择器中的代码来执行样式。即颜色为红色，字体大小为20px。

2. id选择器

首先，ID 选择器前面有一个 # 号，也称为棋盘号或井号。ID 选择器中可以忽略通配选择器。
ps(id的值在页面中是唯一的)

<p id="intro">This is a paragraph of introduction.</p>

#intro {font-weight:bold;}

由上述代码可知id为intro的p标签中的内容设置为粗体字符

3. 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
CSS 类选择器详解

< h1 class="important">
This heading is very important.
< /h1>
< p class="important">
This paragraph is very important.
< /p>

图上代码可看出h1和p标签都同时使用了class=important这个类选择器属性值，由此可以说类选择器可以设置多个相同的属性值，这与id选择器恰恰相反。

4. 属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

[title]
{
color:red;
}

上面的例子为带有 title 属性的所有元素设置颜色为红色样式。

[title=first_day]
{
border:5px solid blue;
}

上面的例子为 title="first_day" 的所有元素设置边框样式。

5. 伪类

1）状态伪类

伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}       /* 选定的链接 */

2）结构性伪类

如下图一段HTML和CSS代码：

下面是网页所显示的结果：

如CSS代码可知，:first-child为p标签的第一个子元素设置样式，这就是一个普通的结构性伪类。当然除了:first-child外，还有相应的:last-child,nth-child等。