这是我参与「第四届青训营」笔记创作活动的第29天

什么是CSS?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

如果没有css，互联网就会十分枯燥，使用css就可以完全控制浏览器如何显示HTML元素，从而充分展示我们自己喜欢的设计样式。

CSS可以干什么？

CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。查看本段内容中所给出的特定案例。

CSS语法

CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. CSS 规则集（rule-set）由选择器和声明块组成：

CSS 选择器

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

例：

所有  元素都将居中对齐，并带有红色文本颜色：

详解：

p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：）。
color 是属性，red 是属性值
text-align 是属性，center 是属性值

完整例子：

如何添加css

我们最想做的就是让 HTML 文档能够遵守我们给它的 CSS 规则。其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接 CSS。

在与之前所说的 HTML 文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是 CSS 文件）

为了把 styles.css 和 index.html 连接起来，可以在 HTML 文档中，<head> 语句模块里面加上下面的代码：

<link rel="stylesheet" href="styles.css">

<link> 语句块里面，我们用属性 rel，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 href 指定，寻找 CSS 文件的位置。你可以做测试来验证 CSS 是否有效：在 styles.css 里面加上 CSS 样式并观察显示的结果。下面，用你的编辑器打出下面的代码。

h1 {
  color: red;
}

保存 HTML 和 CSS 文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。

样式化HTML元素

若要样式化一个文档中所有的段落，只需使用选择器 p。若要将所有段落变成绿色，你可以利用如下方式：
p { color: green; }

用逗号将不同选择器隔开，即可一次使用多个选择器。譬如，若要将所有段落与列表变成绿色，只需：

p, li {
    color: green;
}

改变元素默认行为

标题默认使用大号粗体；列表旁总有项目符号。这是因为浏览器自带一个包含默认样式的样式表，不过你可能对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <ul>举个例子吧，它自带项目符号，不过若你不喜欢它，你就可以这样移除它们：

li { list-style-type: none; }

除此之外你不仅能移除项目符号，你甚至能改变它们。可以用square，它能把默认的小黑球变成方框框。

使用类名

如果你想用这种方式样式化这一片元素，又想用那种方式样式化那一片元素，你可以给 HTML 元素加个类名（class），再选中那个类名，这样就可以了。

举例：把 class 属性加到表里面第二个对象 ``

  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。在 CSS 文档里加上如下代码：

.special {
  color: orange;
  font-weight: bold;
}

保存再刷新，就可以看到变化。

这个 special 类型可不局限于列表，它可以应用到各种元素上。举个例子，你可能也想让段落里边的  一起又橙又粗起来。试试把special 类属性加上去，保存，刷新

有时你会发现选择器中，HTML 元素选择器跟类一起出现：

li.special {
  color: orange;
  font-weight: bold; 
}

这个意思是说，“选中每个 special 类的 li 元素”，它对  还有其它元素不起作用了。你可以把这个元素再添上去就是了：

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

根据元素在文档中的位置确定样式

有时候，您希望某些内容根据它在文档中的位置而有所不同。这里有很多选择器可以为您提供帮助，但现在我们只介绍几个选择器。在我们的文档中有两个 元素 ——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

将以下规则添加到样式表。

li em {
  color: rebeccapurple;
}

该选择器将选择<li>内部的任何元素（<li>的后代）。因此在示例文档中，您应该发现第三个列表项内的现在是紫色，但是在段落内的那个没发生变化。

另一些可能想尝试的事情是在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符)

也将这个规则添加到样式表中：

h1 + p {
  font-size: 200%;
}

下面的示例包含了上面的两个规则。尝试添加规则使位于段落中的 span 变为红色。如果没问题，您将看到在第一段中的 span 会变为红色，但是第一个列表项中的 span 不会改变颜色。

根据状态确定样式

举个例子当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。可以使用 CSS 去定位或者说针对这些不同的状态进行修饰——下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

a:link {
  color: pink;
}

a:visited {
  color: green;
}

以改变链接被鼠标悬停的时候的样式，例如移除下划线

a:hover {
  text-decoration: none;
}

CSS基础 | 青训营笔记