CSS

3. CSS

在上一章中，我们学习了HTML的基本写法，也知道了网页内容的基本写法。在本章中，我们将学习如何让网页上的内容按照我们的想法去呈现。

如果说HTML指定了网页的内容，那么CSS控制的就是这些内容的显示形式。

CSS是Cascading Style Sheets，层叠样式表的简称。所谓样式表，就是一种对网页上各个元素显示样式的设置。在W3School上同样有非常全面详实的教程，各位可以自行查看：https://www.w3school.com.cn/css/index.asp 本篇教程会选择性地挑出一些重点来讲。CSS指定的网页样式极其灵活，如果日后制作网页的时候有不懂的或者不会的，可以尝试百度解决，或者寻求大佬的帮助。

让我们开始吧！

样式表

在我们学习CSS之前，我们需要首先了解怎么样写样式表。

样式表通过若干条样式声明来实现对某个HTML元素的样式控制。每一条样式说明具有以下格式（注意英文半角冒号和分号）：

属性名称: 属性值;

属性名称是一些CSS约定的固定内容，属性值则是该属性被设定的值。同样，样式表会忽略空格和转行符，但按照优美的代码规范写会更容易理解。

举个例子，下面就是一份样式表：

height: 100px;
width: 200px;
color: white;
background-color: black;

在这个例子当中，有四条样式声明，分别指定了元素的高度、宽度、（文字）颜色、背景颜色。

更多关于样式声明和属性的介绍，将在本章后半部分介绍，现在先让我们看一看，这样的样式表怎么才能作用在HTML的某个元素上。

行内样式表

第一种作用方法，那就是直接写在HTML的对应元素上。具体的写法是，在HTML元素的开始标签上加入属性style，值为样式表的内容（排成一行，所以叫行内嘛），记得加引号哦！例子：

<div style="height: 100px; width: 200px; color: white; background-color: black;">这是一个块元素</div>

可以实践一下哦！

行内样式表是所有样式表作用方式中优先级最高的方法，也就是说，即便通过别的作用方式设定的样式，如果与行内样式表中的样式有所冲突，依然会遵循行内样式表中的设置。

问题在于，如果某个样式表内容很多，或者同样的样式表需要作用在很多的元素上，全部使用行内样式表写在HTML的开始标签上，整个HTML文件就显得非常臃肿，也不方便维护。为了实现样式表和HTML元素的相对分离，我们还需要学习接下来几个内容。

内联样式表

内联样式表是指，我们不把样式表直接写在HTML元素上，但是将它放在HTML文件中单独的一个位置，方便统一管理。

你可以尝试一下以下代码（这是一份完整的代码）：

<!DOCTYPE HTML>
<html>
<head>
  <title>内联样式表</title>
  <style>
    div {
      height: 100px;
      width: 200px;
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
  <div>Hello</div>
</body>
</html>

我们可以看到，在第5-12行，我们在HTML的head元素中加入了一个style元素，并在其中写了一段样式表（似乎还有些别的东西？不要急，过几节就知道啦）。head中的style元素就是专门用于在HTML文件中加入内联样式表的。

然而，事实上内联样式表在真正的网页应用的开发中使用的并不多。考虑一下，如果你有好几个HTML文件中都需要用到类似的样式表，就需要在每个HTML文件中都加入一个style元素，效率依然很低。同时，在HTML文件中写CSS的代码，本身就是一件让人看着很不舒服的事情。

那么，最常用的样式表作用方式是什么呢？请看下一节！

外联样式表

~~有内联当然也要有外联啦！~~所谓外联样式表，就是把样式表单独保存为一个文件，在HTML的head元素中引用进来。

现在，我们在index.html文件旁边新建一个index.css文件，后缀名.css说明了该文件为css文件。使用sublime打开index.css并输入以下内容：

div {
  height: 100px;
  width: 200px;
  color: white;
  background-color: black;
}

保存并关闭，接下来，在HTML文件（也就是index.html）中输入以下内容：

<!DOCTYPE HTML>
<html>
<head>
  <title>外联样式表</title>
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
  <div>Hello</div>
</body>
</html>

此时用浏览器打开index.html，如果你的文件没有放错位置，就应该可以看到黑底白字的hello方块了。也就是说，在上面HTML代码的第五行，我们使用了link标签引入了一个css文件作为样式表。

在link标签当中，rel属性表示引入的文件和当前HTML的关系（这里是样式表），type属性说明了引入文件的类型，href属性是需要引入的文件的路径（路径的表达方式见1. 基础章节）

但是直到现在我们都没有解决一个问题：在CSS文件中，除了那四句样式声明，别的东西是什么呢？

CSS选择器

选择器是CSS的重要概念，它的作用就好比是一个接线员，把样式表作用在指定的HTML元素上。本节内容是CSS的一个难点，希望大家认真思考！

选择器定义

每个CSS选择器是一小段文字描述，描述了一种条件，满足这个条件的HTML元素都会被配置为这个选择器对应的样式表。选择器和样式表的联合使用，也就产生了我们的层叠样式表。

让我们来看一下上一节的CSS代码：

div {
  height: 100px;
  width: 200px;
  color: white;
  background-color: black;
}

在这里，大括号包裹了四句样式声明，它们形成了一份样式表，div则是这份样式表对应的选择器，它选择到了页面上的块元素，使得样式表对它生效。

选择器规则

CSS选择器有如下几个规则（更多的选择器规则见W3School，这里列举了常用的规则）：

直接以HTML元素为名称的选择器：选择页面上所有该类型的元素。例如在上面的例子当中，选择器div使得这份样式表对页面上所有的div元素同时生效。
以#开头的选择器（id选择器）：选择所有具有特殊id属性的元素。例如，选择器#abc会让样式表对所有设置有id="abc"的HTML元素生效。通常来说，页面上的id属性最好不要重复。
以.开头的选择器（类选择器）：选择所有具有特殊class属性的元素。例如，选择器.ddd会让样式表对所有设置有class="ddd"的HTML元素生效。类选择器经常用于控制某个样式表对一部分相似的HTML元素同时生效，页面上经常会有多个元素具有同样的class属性。
注意，class属性可以包含多个值，用空格隔开，它们均可单独被选择器选中。例如，具有属性class="mmm nnn"的元素，既可以被.mmm选中，也可以被.nnn选中。
多个选择器交集：对于直接相连的选择器，需要同时满足才能被选择。例如，div.efg会选择页面上所有具有class="efg"属性的div元素，但不会选择任何其他类型元素。
多个选择器并集：用逗号隔开的选择器，只需要满足其中任何一个即可被选择。例如，h1, h2会选择页面上所有的h1和h2元素。
空格隔开的两个选择器（后代选择器）：根据后一个选择器选择HTML元素，但必须满足以下条件：被选择的元素必须是前一个选择器能够选择的某个HTML元素的内部。（这句话慢慢理解，可以看下面的例子。）后代选择器在大型网页中很常用，因为它可以让CSS代码更加有条理，解决因为页面元素过多而导致class属性重名的问题。

例子

<!DOCTYPE HTML>
<html>
<head>
  <title>CSS选择器</title>
</head>
<body>
  <div id="app">
    <div class="top">
      <h1>这里是标题</h1>
      <p class="subtitle">这里是一段文字。</p>
    </div>
    <p class="content">这里是另一段文字。</p>
    <div class="content">这里又有一段文字。</div>
  </div>
</body>
</html>

对于这一段HTML代码，我们考虑如下一些选择器的作用情况：

#app：样式表只作用于第7行开始的div元素。（规则2）
.top：样式表只作用于第8行开始的div元素。（规则3）
div.content：样式表只作用于第13行的div元素。（规则4）
h1, p：样式表作用于所有p和h1元素。（规则5）
div.top p：样式表只作用于第10行的p元素，因为前一个选择器可以选择第8行开始的div元素，它的内部（后代元素）中的p元素才可以被选择，第12行的p元素不能被选择。（规则6）

伪类

对于一个优秀的网页，为了提高网页的交互性，往往会对页面元素的不同状态应用不同的样式表。在这种情况下，我们可能会用到伪类。伪类的格式是在选择器后添加冒号开头的状态，例如选择器div:hover的样式表会应用在全页所有的div元素被鼠标悬浮的时候。

通过这种方法我们可以实现复杂的网页CSS设置，增强页面的交互性。详细教程见W3School

常用的伪类后缀有：

:link：未访问过的链接
:visited：已经访问过的链接
:hover：鼠标悬浮

伪元素

伪元素是指不在HTML中明写的元素。伪元素的格式是在选择器后面加两个冒号开头的伪元素名称。例如选择器p::first-line表示样式表作用于p元素的第一行。

相关的其他伪元素使用请大家自己研究！

CSS选择器的相关知识就到这里，这部分非常复杂，希望大家在以后的实践中慢慢摸索和学习！

CSS 属性

初步了解样式表如何作用于HTML的元素以后，我们就要开始学习样式表的写法了。不可避免地，我们要学习各种CSS属性。CSS属性非常多，使用起来也非常复杂，细节也很繁复。通过巧妙地设置CSS属性，我们基本可以实现所有网页上需要的显示形式。W3School上依然有CSS的全面属性说明，这里我挑出一些常用的属性做一些解释。当你们以后遇到不会写的样式或者看不懂的样式，可以直接百度，网上都有详细的说明。

注意：CSS中的有些属性具有继承（inherit）的性质，也就是：当一个元素的某个属性被设置的时候，它的子元素都会默认具有同样的属性值。你可以通过再次设置子元素的属性来避免这一点。例如：当父元素有text-align: center;时（文字居中），所有子元素的文字也会自动居中。

宽高

相关属性：height、width。仅适用于块级元素和少部分内联元素，用于控制“框”的大小。

注意设置的宽度和高度的单位，通常情况下有以下几种：

绝对单位px（像素）：浏览器对不同设备的像素支持可能不同，但基本来说，如果一个元素的宽高使用绝对单位设置，那么它在不同设备、不同大小的浏览器上看起来是一样大的。
相对单位%（百分比）：通过百分比单位设置宽度和高度，可以让元素的宽高按照父元素（上一级元素）的宽高来动态调整。父元素的大小改变会相对于地改变当前元素的大小。
屏幕单位vw和vh：浏览器约定：100vw是屏幕的宽度，100vh是屏幕的高度，也就是说，vw和vh分别是屏幕宽度和高度的百分之一。这个单位在做移动端网页的时候非常好用。

同时，也要介绍CSS提供的calc函数：你可以使用calc()，并在括号里使用不同的单位进行加减乘除计算，浏览器会自动完成计算并找出正确的宽高尺寸。例如：height: calc(50% - 10px);，意思是当前元素的高度是父元素高度的一半再减去10个像素。

你可以拿之前的代码尝试一下！

边距

相关属性：margin、padding。用于控制若干个框的间隔距离，这个概念可能有些难以理解。

margin（外边距）：通过设置margin属性，我们可以给元素的“框”在外面加上一个无形的“保护罩”。元素在排列的时候，“框”的外边会留出一定的距离，而不是和别的元素紧贴在一起。
padding（内边距）：通过设置padding属性，我们可以给元素的“框”在内侧添加一层无形的“软垫”。元素内部有其他内容的时候，其他内容将自动与外层元素的边框保持距离，而不是紧贴在元素边框上。

简单的讲，如果有两层元素嵌套：

<div class="outer">
  <div class="inner">内部</div>
</div>

那么，就这种情况而言，如下两个设置是等效的：

div.outer { padding: 10px; } 外层元素在内部留一个“垫子”。
div.inner { margin: 10px; } 内层元素在外面加了“保护罩”。

在设置边距的时候，我们可以针对不同的方向设置不同的边距。一共有四种属性：

margin-top、padding-top ：上边距
margin-right、padding-right ：右边距
margin-bottom、padding-bottom ：下边距
margin-left、padding-left ：左边距

margin和padding其实也可以接受多个值，来分别设定四个方向的边距。例如：

margin: 10px 20px 30px 40px;

表示设置元素的外边距分别为10px（上）、20px（右）、30px（下）、40px（左），注意，它们按照上面四个方向的固定顺序。

如果只有三个值，默认右边距和左边距相同（为第二个值），上下边距分别为第一和第三个值；如果只有两个值，则默认上下边距相同（为第一个值），左右边距也相同（为第二个值）；如果只有一个值，则表示四个方向的边距均相同。

小知识1：body元素默认有8px的外边框，如果需要网页真正的覆盖全屏：

body {
  margin: 0;
}

小知识2：通过设置左右边距为auto，可以把块级元素居中，例如：margin: 0 auto;
小知识3：当两个元素同时设置有margin的元素并列时，margin属性可能会发生合并现象，这一点各位可以自行研究。

尝试一下吧！

背景

相关属性：background系列属性。

background属性也可以接受很多个值，但通常我们最多写两个值：一个颜色、一张图片。如果有颜色值，则表示设置背景颜色；如果有图片，则表示设置背景图片；如果两个都有，则表示在一个颜色上使用背景图片。

注意，颜色在CSS中可以用以下几种方法设置：

#开头的六位十六进制，每两位为一个数字，分别表示RGB（红绿蓝）的值，例如白色为#FFFFFF（大小写无所谓）

rgb函数，括号内用逗号隔开三个十进制数字，例如白色为rgb(255, 255, 255)

rgba函数，与rgb函数相同，但多一个参数表示透明度，例如半透明黑色为rgba(0, 0, 0, 0.5)

自带的颜色名称，例如black、red等。

在CSS中引用图片等，需要使用url函数。图片的路径应该以CSS文件为基础寻找相对路径，或者使用绝对路径。例如，引入index.css文件旁边的bg.png图片作为某个div元素的背景图片，可以写：（注意引号）
div { background: url("./bg.png");}

其实，background系列属性还包含以下常用属性：

属性名称	说明
background-color	背景颜色
background-image	背景图片
background-position	背景图像的位置
background-size	背景图片的尺寸
background-repeat	如何重复背景图像

它们具体的使用方法可以自行百度，可以给div元素设置背景，但通常我们使用绝对定位的img元素来实现背景（见下面的定位），因为在CSS文件中引入图片时，引用路径往往比较难以维护。

边框

相关属性：border系列属性。虽然是系列属性，但我们通常不会分开使用。例如：

border: 5px solid red;

表示按顺序设置元素的边框宽度为5px，类型为实线，颜色为红色。边框粗细、类型和颜色属性（特别是类型）相关的内容可以使用的时候再进行百度，摸索一下就会了。

同时有一个非常好用的属性：border-radius，用于设置元素的边框为圆角。border-radius的值是圆角半径，通常用像素单位。

技巧：要做出两头为半圆的元素，只需要让border-radius的值大于height的一半即可。例如：

div {
  height: 40px;
  border-radius: 30px;
}

文字

相关属性：text和font相关属性。

常用属性如下（更多属性请学习W3School）：

text-align：控制文字在框内的对齐情况
text-decoration：控制文字的修饰（例如下划线），经常使用text-decoration: none;来取消a元素的默认下划线。
font-family：指定字体。字体概念比较复杂，也需要考虑访问网页的设备上有没有对应的字体。但通常来说，有sans-serif和serif两类字体，即衬线字体和非衬线字体。
font-size：字体大小。通常来说字体大小的设定使用一种特殊的单位rem，浏览器约定1rem为当前设备的默认字体大小，因此，如果你想把字放大为1.5倍，即可设定为1.5rem。
font-weight：通常用于加粗字体，值为bold。也可以设定为数值，请自行查阅。
color：与之前的background-color相对，color属性可以设置字体的颜色。

定位

相关属性：position等。可以参见菜鸟教程上关于定位的教程。

在上一章介绍HTML时，我们说过元素会默认按照文档流的顺序排列，浏览器会自动找到元素的位置并显示。在这一节中，我们将学习如何去改变元素的位置。

我们首先需要设置一个position属性，然后通过调整left、right、top、bottom四个距离，来实现定位。四个方向的距离往往不需要都指定，浏览器会根据元素的大小自动决定。position的默认值为static，即按照HTML文档流定位。但同时还有以下几种定位方法：

相对定位：通过设置position: relative;可以实现元素相对于默认位置重新定位元素将保留原来所占的空间不变，平移元素到相对于原来位置的新位置。例如，同时设置left: 10px;表示让元素左边框和原来所占空间的左边框距离为10px，也就是向右平移10px。
固定定位：通过设置position: fixed;可以实现元素相对于整个浏览器窗口定位。例如，同时设置left: 0px; top: 0px;可以上元素一直处于窗口的左上角，无视页面滚动。固定定位会让元素脱离文档流，也就是说，元素不会再占用页面上的空间，而是“漂浮”在窗口上。
绝对定位：通过设置position: absolute;可以实现元素相对于最近的已定位父元素定位（若没有则根据html元素定位）。例如，同时设置bottom: 0px; right: 0px;可以将当前元素定位在父元素的右下角。绝对定位同样会让元素脱离文档流，“悬浮”于父元素上。常用于让某些图标、按钮等覆盖于别的元素之上，以及让img元素占满块元素以充当背景图片。
粘性定位：通过设置position: sticky;可以实现粘性定位，粘性定位是指当元素处于浏览器窗口内时，完全等于相对定位（不脱离文档流）；但当页面滚动元素将要离开窗口时，其自动转化为固定定位，固定在浏览器窗口上忽略滚动。（各位可以去菜鸟教程页面上体验一下）

在元素脱离文档流时，通常会与别的元素重叠，此时可以通过设置不同元素的z-index值来控制元素的覆盖情况。z-index可以设置为任意整数，数值越大表示元素处于更“高”的地方，可以覆盖数值较低的元素。

布局

过渡

响应式样式

所谓响应式样式，是指网页的样式根据浏览设备的屏幕大小而变化。依靠现在已经掌握的CSS，我们可以构建出一个网页了。可是，到目前为止我们的网页都是在电脑上查看的，如何才能针对手机制作网页呢？

首先需要在HTML的head元素中加入下面几行代码，主要作用是告诉浏览器不需要默认缩放：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

meta元素是元信息元素，主要用于告诉浏览器一些信息。

CSS提供了一种方案能够让你在不同的屏幕宽度下采用不同的CSS，让一个网页可以自动适配浏览设备。试一试以下代码：

div {
  height: 100px;
  width: 200px;
  color: white;
  background-color: black;
}

@media (max-width: 500px) {
  div {
    background-color: red;
  }
}

继续把这些代码放入index.css，并打开index.html。打开浏览器的调试窗口，在元素控制台的左边（调试窗口的左上角）有一个小小的标志，点击即可进入移动设备调试状态。在这个状态下你可以自由地更改窗口大小和网络状况。我们让窗口的宽度小于500px，就会看到块元素的背景变成了红色！

在我们的代码里，1-6行都是之前讲过的CSS样式表，从第八行开始，我们使用了媒体条件查询：@media (max-width: 500px)，意思是当且仅当窗口的宽度最大不超过500px的时候，大括号内部的CSS样式表生效。在大括号内部，对背景颜色的配置覆盖了之前的black属性值，使得手机版上背景颜色为红色。

相似的，还可以通过设置min-width属性来配置只在宽屏上生效的CSS。

CSS3及其他

与HTML5类似，CSS3是CSS的最新标准，统一并支持了很多新的属性（例如动画、渐变等等）。就像本章开头所讲的一样，CSS的灵活性是真正让我们的网页应用五彩缤纷的核心，通过CSS的学习我们可以让我们的想象力在网页上起舞。

本章所介绍的CSS只是CSS的一些基础的部分，如果你在今后网页的制作中需要用到更加复杂的CSS样式，可以自己学习和研究。

“驾一叶之扁舟”，在无边无际的样式中畅游！

【九层之台】Web开发教程：3. CSS

目录