文章目录

前言

我们学习了HTML用于组织网站内容，并赋予它意义和目的的代码。但HTML只定义基本的内容，而没有组织样式，如果我们需要对网页内容进行设计、布局或添加动画等行为，这就需要CSS了。CSS（层叠样式表，Cascading Style Sheets）用于设计风格和布局。

本章需要HTML基础，请见：

【WEB】HTML/XHTML基础

本期特别references: MDN Web docs、W3School、菜鸟教程

CSS构建

简介

CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则。样式表分为三类分别为内联样式表、文档样式表以及外部样式表。

内联样式表只能够作用于单个HTML 元素的内容，文档样式表则能够对文档的整个主体起作用，而外部样式表可以应用到任意数目文档的主体中。

内联样式是在元素中加入style属性，只适用于当前元素的样式，例如：

<h1 style="color: blue;">Hello World!</h1>

文档样式一般是在HTML的head处中添加一个<style>元素，一般用于样式较少且容易编写的情况。例如：

<style type= "text/css">
    rule list
</style>

属性type向浏览器指定了样式说明的类型，对于CSS, 它的值为text/css 。

很多情况下，可能需要一种样式表能够对多个文档起作用，而这正是外部样式表的功能。我们可以把外部样式表文件(.css)插入到HTML中应用。

HTML应用CSS

例如我们在与之前所说的 HTML 文档的相同目录创建一个文件，保存并命名为 styles.css。为了把 styles.css 和 index.html 连接起来，可以在 HTML 文档中，<head> 语句模块里面加上下面的代码：

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

<link> 语句块里面，我们用属性 rel，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 href 指定，寻找 CSS 文件的位置。

rel表示关系 (relationship) ，属性值表示<link> 项的链接方式与包含它的文档之间的关系。

<link> 元素还有一个type属性，这个属性被用于定义链接的内容的类型。最常用的值是表明了 CSS 的 text/css。

title属性在<link>元素上有特殊的语义。当用于<link rel="stylesheet">时，它定义了不同的首选样式表或备用样式表（在网页中指定可替代样式表允许用户为网页选择他们喜欢的样式。）。

CSS基本语法

CSS语法由一个选择器 (selector)开始。它选择 (selects) 了我们将要用来添加样式的 HTML 元素。接着输入一对大括号{ }。在大括号内部定义一个或多个形式为属性 (property):值 (value); 的声明 (declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性 (properties) 对应不同的合法值。之后会介绍一些常见的属性。例如：

h1 {
    color: red;
    font-size: 5em;
}

在这个例子中我们为一级标题（主标题<h1>）添加样式。我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。这些单位在之后也会涉及。

如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的 CSS 引擎完全忽略。

对于CSS中的注释，其写法与Java类似：

/* 这是个注释 */

以 /* 开始, 以 */ 结束。

选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

元素选择器

元素选择器根据元素名称来选择 HTML 元素。此时选择器的名称与HTML中元素名称相同。例如：

p {
  color: red;
}

例子表示选择器为p，它对应HTML的<p>元素，应用样式为颜色为红。

选择器还可能是一组元素名称的集合，各元素之间用逗号隔开，在这种情况下，属性值可以应用于文档中以这组元素指定的所有标签。例如：

p, h1 {
    color: green;
}

例子表示选择器为p和h1，它对应HTML的<p>元素与<h1>元素，应用样式为颜色为绿。

ID选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，需要在id前加一个井号(#)。

#para1 {
  text-align: center;
  color: red;
}

例如CSS应用于 id="para1" 的 HTML 元素，让其居中对齐，并带有红色文本颜色。

注意：id 名称不能以数字开头。

类选择器

类选择器用于为同一个标签的不同实例指定不同的样式说明。选择器的格式为.class_name。例如下面的HTML语句赋予不同的类：

<p class="red">我是红色</p>
<p class="green">我是绿色</p>
<a href="green.html" class="green">我也是绿色</a>
<h1 class="red">我红不起来</h1>

它的CSS是这样的：

p.red {
    color: red;
}
.green {
    color: green;
}

那么显示情况则是这样的：

我们可以发现，使用类选择器时可以指定某个元素中的类。如果没有指定元素，则所有有相同类名字的元素都会被应用这些规则。

当我们一个元素有两个类的时候，中间用空格隔开。例如：

<p class="center large">这个段落引用两个类。</p>

当我们一个元素多个类的内容有冲突时，在CSS中越靠后的优先级越高，这个之后再介绍。

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
text-align: center;
color: blue;
}

一般情况下添加通用选择器会被更加深层的选择器覆盖。

伪选择器

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如对于<a>元素的状态有：

link: 在未被访问前的样式表属性
visited：设置访问过的页面链接的样式
hover：当有鼠标悬停在其上的链接样式
active：设置当你点击链接时的样式

使用时使用格式元素:状态，例如：

a:link {color: yellow;}

表示当链接没有被按下去前，颜色为黄色。

派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。派生选择器会在派生元素后用空格隔开，例如：

li strong {
    font-style: italic;
  }

<p><strong>我不是斜体字，因为我不在列表中</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

Span与Div

<span> 元素是短语内容的通用行内容器,<div> 元素是一个通用型的流内容容器，它们本身并没有任何特殊语义。其中，<span>是内联元素，<div>是一个块级元素。

我们通常使用它们来编组元素以达到某种样式意图（通过使用类或者id属性），或者这些元素有着共同的属性。其中给一段内联代码赋予样式使用<span>，而给一块代码块赋予样式则使用<div>。

例如给一行字中添加样式，一些字颜色为红，一些为绿，如下演示：

我听见风，来自地铁和人海。我排着队，拿着爱的号码牌。

于是我们应该这样编写代码：

<p>我听见风，<span class="green">来自地铁和人海。</span>
我排着队，<span class="red">拿着爱的号码牌。</span></span></p>

.green
{
    color: green;
}
.red
{
    color: red;
}

对于<div> 元素，作为一个“纯粹的”容器，<div> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用class或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang 属性）等等。例如我们给一段代码块都添加上这样的样式：

<div class="Bigandred">
<p>夜醒众人漫漫夜，宝船乘风破浪声。</p>
</div>

.Bigandred{
  color: red;
  font-size: 20pt;
}

通常情况下，<div> 元素用于控制页面中较大区块，而<span>元素仅仅用于需要单独设置样式风格的小元素，如一个单词、一幅图片、一个锚标签等。

@规则

这是一些特殊的规则，为 CSS 提供了一些关于如何表现的指导。它的一般格式：

/* 一般结构 */
@identifier (RULE);

下面是一些 at 规则，由它们的标示符指定，每种规则都有不同的语法：

@charset——定义样式表使用的字符集。
@import——告诉 CSS 引擎引入一个外部样式表。
@namespace——告诉 CSS 引擎必须考虑 XML 命名空间。
@media——如果满足媒介查询的条件则条件规则组里的规则生效。

对于charset，它必须是样式表中的第一个元素，而前面不得有任何字符。即：

@charset "UTF-8";

如果有多个 @charset @规则被声明，只有第一个会被使用。

@import：用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外。对于@import有两种语法：

url() 内包含 style sheet 的 URI
直接写 style sheet 的 URI 的字符串

即：

@import 'custom.css';
@import url('landscape.css');

其他的@规则请查询文档。

CSS层叠

层叠、优先级和继承——这些概念决定着如何将 CSS 应用到 HTML 中，以及如何解决冲突。

在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则。与层叠密切相关的概念是优先级（specificity），决定在发生冲突的时候应该使用哪条规则。

层叠

样式表层叠（cascade）——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

我们来看一个例子：

h1 {
    color: red;
}
h1 {
    color: blue;
}

<h1>我是蓝色的不是红色</h1>

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度。下面的选择器中，优先级递增。

通用选择器（*）
类型选择器（例如，h1）和伪元素（例如，::before）
类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）
ID 选择器（例如，#example）。
内联样式（例如添加到HTML<span>属性中的style="font-weight:bold"）

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

我们如果需要加权的话，可以在声明后面添加一个!important，它使得此声明将覆盖任何其他声明。

继承

一些设置在父元素上的 CSS 属性是可以被子元素继承。当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值。并非所有元素属性都可以继承。

计算值所需要的计算通常包括将相对值转换成绝对值 (如 em 单位或百分比)。例如，如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的 2 倍).

继承例如，下面的例子中<h1>和<p>元素继承了body元素的color属性。

body{
    color: red;
}

<h1>我是红色的</h1>
<p>我也是红的</p>

下面是一个不能被继承的例子：表格中设置边框，该属性不能继承，子元素会读取该属性的初始值。

<table class="borad">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

.borad{
    border: solid;
}

此时我们发现只给<table>加上了边框，td元素没有继承到边框样式属性。

此时border属性是无法继承的，我们想让单元格有边框，只需要再给td元素添加上这个属性即可。

.borad, td{
    border: solid;
}

后记

本章介绍了CSS的一些重要概念，而详细的每个属性与值没有提及，建议编写时查询文档，例如：

【WEB】层叠样式表CSS

前言