CSS(一) - 旧游无处不堪寻

前面四篇主要讲解了关于 HTML 的基础知识，从这篇开始，将要介绍关于 CSS 的知识。CSS(Cascading Style Sheets)，它是一种可以完全独立于 HTML 的语言，来确定字体大小，边距和颜色等内容。
为什么要引入另一种语言呢？处于不同的目的，HTML 设置网页内容，而 CSS 则定义如何向用户显示内容。
在具体讲解 CSS 常用样式属性之前，我们将先讲解 CSS 基本语法规则以及级联规则。

引入 CSS 的三种方式

内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS 代码。(代码复用性低)

<div style="background: red"></div>

嵌入方式
嵌入方式指的是在 HTML 头部中的 style 标签内书写 CSS 代码。(代码复用性稍高)

<head>
  <style>
  .content {
    background: red;
  }
  </style>
</head>

链接方式
链接方式指的是使用 HTML 头部的 link 标签引入外部的 CSS 文件。扩展名为 .css 的文件。(代码复用性高)

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

我们应尽量使用 link 标签导入外部 CSS 文件，避免或者少用使用其他方式。

CSS 注释

对比 HTML 注释

<!-- comments -->

CSS 忽略字符使用下面方式

/* comments */

CSS 规则基本语法

一个选择器加上声明块组合在一起称为一个**规则(Rule)。一个属性名:属性值; 组合在一起称为一个声明(declaration)**。

需要注意:

当是一个单一选择器，一条声明出错(如单词拼写错误)，其余规则以及该规则的其余声明都有效。只有该声明无效。
当是一个单一选择器，选择器书写出错，其余规则都有效，只有该规则无效。
当是一个组合选择器，只要其中一个选择器书写出错，其余规则都有效，该规则无效。

CSS 选择器

选择器是学习 CSS 的比较重要的知识，熟练掌握各种选择器，就可以很轻松的对 HTML 元素声明样式。并且对于之后的JS学习很有帮助。

简单选择器(Type，Class，ID)

Type 选择器(元素选择器)

body {
  color: red;
}

Class 选择器

.container {
  color: red;
}

ID 选择器

#info {
  color: red;
}

属性选择器

E[foo]

选取有 foo 属性的所有 E 元素。

input[disabled] {
  cursor: not-allowed;
}

E[foo=”bar”]

选取 foo 属性为 bar 的所有 E 元素。

p[class="info"] {
  cursor: not-allowed;
}

E[foo~=”bar”]

选取 foo 属性含有 bar 的所有 E 元素。

p[class~="info"] {
  cursor: not-allowed;
}

E[foo^=”bar”]

选取 foo 属性以 bar 字符串子串开头的所有 E 元素。

p[class^="inf"] {
  cursor: not-allowed;
}

E[foo$=”bar”]

选取 foo 属性以 bar 字符串子串结尾的所有 E 元素。

p[class$="nfo"] {
  cursor: not-allowed;
}

E[foo*=”bar”]

选取 foo 属性含有 bar 字符串子串的所有 E 元素。

p[class*="nf"] {
  cursor: not-allowed;
}

E[foo|=”bar”]

选取 foo 属性为 bar 或以 bar- 字符串子串开头的所有 E 元素。

a[hreflang|="en"] {
  cursor: not-allowed;
}

上下文选择器

E1 E2

选取所有 E1 元素的所有后代元素为 E2 的全部元素。

body p {
  color: red;
}

E1>E2

选取所有 E1 元素的所有直接后代元素为 E2 的全部 E2 元素。

body>p {
  color: red;
}

E1~E2

选取所有 E1 元素的所有后续兄弟元素为 E2 的所有 E2 元素。

p~a {
  color: red;
}

E1+E2

选取所有 E1 元素的紧邻兄弟元素为 E2 的所有 E2 元素。

p+a {
  color: red;
}

*

选取所有元素

* {
  color: red;
}

伪类选择器

E:first-child

选取 E 元素集合中第一个 E 元素。

li:first-child {
  background-color: red;
}

E:last-child

选取 E 元素集合中最后一个 E 元素。

ul:last-child {
  background-color: red;
}

E:nth-child(n)

选取 E 元素集合中第 n 个 E 元素。注意这个n是从1开始。
奇数行: 2n+1 或者 odd
偶数行: 2n 或者 even

li:nth-child(2) {
  background-color: red;
}

E:visited

E 元素是已经访问过目标的超链接的源锚点。

a:visited {
  background-color: red;
}

E:link

E 元素是尚未访问目标的超链接的源锚点。

a:link {
  background-color: yellow;
}

E:hover

选取处于悬停状态的 E 元素。

a:hover {
  background-color: green;
}

E:focus

选取处于焦点状态的 E 元素。

a:focus {
  border-color: blue;
}

E:checked

选取处于选中状态的 E 元素。

input:checked {
  background-color: red;
}

E:active

选取处于激活状态的 E 元素。(按钮按下未抬起时的状态)

a:active {
  background-color: red;
}

E:target

当 E 元素是通过文档内导航跳转过来时选取该元素。

h2:target {
  background-color: red;
}

伪元素选择器

E::first-letter

选取 E 元素中的首字符。

p::first-letter {
  background-color: red;
}

E::first-line

选取 E 元素中的首行文本。

p::first-line {
  background-color: red;
}

E::before

选取所有 E 元素，并在之前添加内容。

p::before {
  content: " ";
}

E::after

选取所有 E 元素，并在之后添加内容。

p::after {
  content: " ";
}

CSS 的级联算法

根据特指度: I - C - T 分量(ID > Class > Type)。
其中

I 分量表示 ID 选择器个数
C 分量表示 Class 选择器个数 + 属性选择器个数 + 伪类选择器个数
T 分量表示 Type 选择器个数 + 伪元素选择器个数

如果特指度相同，后加在到浏览器的规则生效。
我们还可以使用 !important 强制某一规则生效。