全栈 - 20 Web 基础网页的血肉 CSS

这是全栈数据工程师养成攻略系列教程的第二十期：20 Web基础网页的血肉CSS。

HTML决定了网页中包含哪些内容，而CSS则决定了这些内容所呈现的样式。

什么是CSS

CSS全拼是Cascading Style Sheets，即层叠样式表。之所以将CSS比作网页的血肉，是因为CSS决定了网页中的元素以何种样式呈现，例如页面内容的整体布局、DOM元素的宽度和高度、标签文字的大小和颜色等。CSS可以使原本单调难看的DOM元素变得灵动而美观，CSS3中添加的一些新功能更是可以进一步增强网页的动画效果和感染力。

在Chrome浏览器中网页元素上打开开发者工具，Elements标签页下左半部分中会自动高亮对应的DOM元素，右半部分中则会显示该元素对应的全部CSS样式。

基本结构

CSS语法的基本结构由两部分组成：选择器（selector）、样式（style）。选择器指定了CSS作用的目标DOM元素，而样式决定了在目标元素上应用何种样式，包括样式名（property）和样式值（value）。

举例来说，如果希望改变页面中全部一级标题以及段落的字体大小和颜色，使用以下CSS即可。选择器为h1和p，即直接使用目标DOM元素的名称，样式由大括号括起来，里面可以包含一行或多行样式，每行样式使用key: value即键值对的形式指定并且以分号结束。这里将字体大小即font-size分别设置为24和20，单位为像素px，字体颜色设置为蓝色和红色。

h1 {font-size: 24px;color: blue;
}p {font-size: 20px;color: red;
}复制代码

使用CSS

使用CSS的方法主要有三种：

引入外部.css文件；
在HTML中定义CSS；
在DOM元素中使用内联CSS。

在我的Github上全栈数据工程师养成攻略的项目中，data文件夹里提供了一个template.html，里面包含以下内容，可以在此基础上进一步编写代码。其中的六个meta标签定义了网页的一些基本信息，title标签用于设置网页的标题，而rel="shortcut icon"的link标签可用于指定网页所使用的浏览器图标。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><meta name="description" content="" /><meta name="keywords" content="" /><meta name="author" content="" /><link rel="shortcut icon" href="">
</head>
<body>
</body>
</html>复制代码

第一种方法是新建一个.css文件，例如style.css，在里面编写所需的CSS代码，就像之前设定h1和p的样式一样，然后在HTML的head中用link标签引入写好的样式文件。rel="stylesheet"指定了引入的是CSS样式文件，href属性则使用相对路径指明样式文件所在位置。

<link rel="stylesheet" href="style.css">复制代码

第二种方法直接在HTML中写CSS代码，需要使用style标签包含起来，style标签可以放在HTML中的任意位置，不过推荐放在head标签中。

<style>h1 {font-size: 24px;color: blue;}p {font-size: 20px;color: red;}
</style>复制代码

第三种方法直接在DOM元素的开始部分中通过style属性指定CSS样式。

<h1 style="font-size:30px;color:green;">这里是一级标题</h1>
<p style="font-size:24px;background-color:blue;">这里是一段内容</p>复制代码

以上三种方法都可以对目标DOM元素应用指定的CSS样式，并且优先级依次提高，即当定义同一条CSS属性时，后者中的属性值会覆盖前者。

因此，如果CSS样式较多，不妨选择引入外部.css文件，从而实现CSS代码和HTML代码分离，更加便于开发和维护；如果CSS样式较少，不妨直接选择在HTML中定义CSS，避免新建过多项目文件。如果希望将样式应用于多个DOM元素，使用第一种和第二种方法都更为便捷和高效；如果希望仅将样式应用于某一个DOM元素，则使用第三种方式更加直接简单。

常用选择器

CSS中支持多种选择器，使得可以根据需求从不同的维度进行选择，灵活地控制网页中DOM元素的样式。

最简单的选择器是DOM元素的标签名称，例如我们之前使用的h1和p，这类选择器适用于同时更改某一种DOM元素的样式。

也可以使用id作为选择器，适用于只控制某一个DOM元素的样式。应当注意，每个id在整个网页中都应只出现一次，以下将id为main的对应元素color值设为red。

#main {color: red;
}复制代码

为了使样式生效，在HTML的body中需要有对应的DOM元素。

<p id="main">这是一段内容</p>复制代码

还可以使用class作为选择器，适用于同时控制多个DOM元素的样式，只需将它们设为同一个class即可，以下将class为content的全部元素color值都设为red。

.content {color: red;
}复制代码

这样一来，在HTML中的DOM元素，如果class等于content，都会受到CSS样式的作用。

<h1 class="content">这是一级标题</h1>
<h2 class="content">这是二级标题</h2>
<p class="content">这是一段内容</p>复制代码

标签名、id、class可以组合使用，例如h1#main表示id为main的h1标签，p.content表示class为content的p标签。

如果某个DOM元素符合多个选择器，则会对CSS样式进行合并覆盖操作。不同的属性名进行合并，其对应的属性值叠加作用于DOM元素之上；相同的属性名进行覆盖，仅应用优先级最高的选择器所对应的属性值。标签名、class、id选择器优先级依次提高，并且它们组合之后的选择器优先级更高。总而言之，选择器越具体越细化、条件越严格，则对应的优先级越高。

除此之外，还有后代选择器、子元素选择器、相邻兄弟选择器、普通相邻兄弟选择器四种组合选择器，举例来说：

h1 p为后代选择器，表示h1标签中的p标签，样式作用于所有符合要求的p；
h1>p为子元素选择器，表示h1标签直接子元素中的p标签，h1必须是p的直接父元素，限制条件比后代选择器更严格，样式作用于所有符合要求的p；
h1+p为相邻兄弟选择器，表示和h1标签处于同一层级并且直接相邻的p标签，样式作用于所有符合要求的p，至多一前一后两个；
h1~p为普通相邻兄弟选择器，表示和h1标签处于同一层级的全部p标签，两者处于同一级别即可，限制条件不及相邻兄弟选择器严格，样式作用于所有符合要求的p。

从以上选择器的概念中也可以看出DOM的作用，DOM的层级树形结构可以清楚地描述HTML标签之间的父代、后代、子代、兄弟等关系，只有理解了DOM的概念和各类选择器的定义，才能根据需求快速选出最恰当而简洁的选择器。另外，以上四种组合选择器也可以和标签名、id、class三种基础选择器进行自由组合，从而实现更加复杂和灵活的选择器。

最后还有一类称为伪类的选择器，这里介绍其中最常用的一种:hover，表示当鼠标悬浮时才生效的样式。相对于其他几种选择器，:hover所定义的样式并非静态，而是响应鼠标悬浮事件才会生效，因此可以用来实现一些动态交互效果。

h1:hover {color: red;
}复制代码

常用样式

CSS中的常用样式包括背景、大小、文本、边距、边框、显示、定位等几大类。

背景指DOM元素所显示的背景。任何DOM元素都可以设置背景样式，例如文字、按钮等，但我们一般仅为大范围的DOM元素设置背景，例如整个html或body等，从而实现一种底层衬托的效果。

background-color：用于设置背景颜色，RGB、十六进制、颜色名都可以；
background-image：用于设置背景图片，需要用url()函数提供图片链接，使用相对路径或互联网上可访问的图片链接都行；
background-repeat：当图片不足以覆盖DOM元素时，是否重复平铺；
background-size：使用图片作为背景时，背景图片的大小；
background-position：使用图片作为背景图，如果图片大于背景，优先显示图片的哪一块。

body {background-color: rgb(150, 234, 213);background-image: url(http://zhanghonglun.cn/blog/wp-content/uploads/2015/09/bg.jpg);background-repeat: no-repeat;background-size: cover;background-attachment: fixed;background-position: center;
}复制代码

如果使用图片作为背景，则在不影响清晰度的前提下尽量选择小文件图片，避免加载缓慢影响用户体验。同时需要恰当地组合设置以上样式，使得图片背景对于不同分辨率的浏览器都能达到满意的展示效果。

每个DOM元素都有自己的宽和高，即width和height。对于文本类标签则可以设置字体大小，即font-size。大小的单位有像素px和百分比%等，前者为绝对值，后者为相对于父元素的相对值。默认情况下，html的宽和高都是浏览器大小的100%。DOM元素的默认高度为其所占内容所需的高度，默认宽度则取决于是块级元素还是内联元素，前者宽度默认为父元素的100%，而后者宽度默认为其所占内容所需的宽度。

文本类标签可设置的样式包括：

color：文本的颜色，RGB、十六进制、颜色名都可以；
text-align：文本居向，可以是left、right或center；
text-decoration：文本是否有下划线，设为none可以取消掉链接的默认下划线；
text-indent：文本首行缩进宽度；
line-height：文本段落的行距；
font-size：文本的大小，一般以像素px为单位；
font-family：文本的字体，可以同时设置多个值，浏览器将逐一尝试直到字体可用。

h1 {color: #ddd;text-align: center;text-decoration: none;text-indent: 1em;line-height: 1.2;font-size: 22px;font-family: Microsoft Yahei;
}复制代码

边距主要包括margin和padding，前者是DOM元素四周外部的边距，后者是DOM元素四周内部的边距，默认情况下DOM元素的宽高包括padding但不包括margin。边距的单位可以是像素px或百分比%，如果提供一个值则代表上下左右四个方向，提供两个值则第一个值代表上下、第二个值代表左右，提供四个值则依次代表上、右、下、左。

p {margin: 30px 40px;padding: 5px;
}复制代码

margin和padding之间还存在一个边框即border，可以设置边框的粗细、线型、颜色、圆角和阴影。

div {border: 1px solid #ddd;border-radius: 4px;box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.4);
}复制代码

margin、border和padding构成了DOM元素的盒模型（Box Model）。在开发者工具Element标签页下，右半部分底部即可看到当前高亮元素所对应的盒模型，从外到内依次是橙色的margin、黄色的border、绿色的padding和蓝色的内容部分。

display属性可以决定DOM元素的显示方式，可以设置为inline、block、inline-block等，分别对应内联元素、块级元素、内联块级元素，使用以下代码即可将span设置为块级元素。

<span style="display:block;">块级元素span</span>
<span style="display:block;">块级元素span</span>复制代码

position即定位，是CSS中非常重要的一项属性，决定了HTML页面中DOM元素的位置和布局。DOM元素会遵循默认的文档流进行排版，即从上到下依次排列，并且都占据相应的空间。块级元素单独占据一行，内联元素排列于同一行中直到超出浏览器宽度，并且所有DOM元素默认居左对齐。如果我们希望网页内容按照预期的设计进行布局，例如将DOM元素居中显示、在特定位置添加一个按钮或图标等，则需要灵活地使用多种定位方式。

position可取的值包括static、fixed、relative、absolute和float，其中static即为默认遵循的文档流定位方式。

fixed是指固定在浏览器窗口中的某个位置，需要结合top、bottom、left、right使用，例如将DOM元素固定在相对浏览器窗口上端40个像素、左端50个像素的位置。

p {position: fixed;top: 40px;left: 50px;
}复制代码

relative同样需要结合top等属性使用，不同的是参照物不是浏览器窗口的四端，而是static定位方式所对应的默认位置，因此可以理解为在默认的位置上叠加一些偏移。

absolute即绝对定位，需要结合top等属性使用，以其直接父元素为参照物进行定位。可以将某一个DOM元素A设为position:absolute，同时将其直接父元素B设为position:relative，从而可以自由任意地将A放置在B中的任何位置。

float即浮动定位，可以将一个或多个DOM元素浮动至浏览器窗口的最左端或最右端。浮动定位虽然很自由，可以实现瀑布流之类的布局效果，但是破坏了默认的文档流，并且在操作不当时容易导致意料之外的结果，因此并不推荐。

<h2 style="float:right;">浮动的内容</h2>复制代码

以上定位方式中，static和relative对应的DOM元素占据相应的页面空间，而fixed、absolute、float对应的DOM元素不占据任何空间，只是叠加在已有的页面内容上，并且可以通过z-index属性设置多元素叠加时的显示顺序。

CSS3

CSS3是CSS的最新版本，引入了许多更为丰富的新属性，并且已经被大多数主流浏览器所支持，例如渐变、变换、过渡、动画等，还包括之前提及的边框圆角和阴影。如果说CSS给DOM元素赋予了丰富的样式，那么CSS3带来的则是更为炫酷的特效。

渐变包括线性渐变和径向渐变，可以作为DOM元素的背景效果，不过比较鸡肋，在实际情况中使用并不多。

transform即变换，包括平移、旋转、缩放、斜切等二维变换，以及3D旋转、3D缩放、透视等3D变换。可以将变换直接应用于DOM元素，用于修改其显示效果，也可以仅将变换应用于被鼠标悬浮下的状态，从而实现鼠标悬浮动画效果。需要注意的是，CSS3属性需要在属性名前加上相应的前缀，用于适应不同的浏览器。

/*鼠标悬浮后变换*/
#transform {width: 200px;height: 120px;
}
#transform:hover {cursor: pointer;/* Safari and Chrome */-webkit-transform: rotate(180deg);/* Firefox */-moz-transform: rotate(180deg);/* IE */-ms-transform: rotate(180deg);/* Opera */-o-transform: rotate(180deg);transform: rotate(180deg);
}复制代码

另一项极为常用的CSS3属性是transition即过渡，用于在CSS属性变化时提供一段过渡效果。例如以上的鼠标悬浮变换，结合使用过渡可以实现更好的交互体验。

#transform {width: 200px;height: 120px;/* 过渡 */-webkit-transition: -webkit-transform .4s;-moz-transition: -moz-transform .4s;-ms-transition: -ms-transform .4s;-o-transition: -o-transform .4s;transition: transform .4s;
}
#transform:hover {cursor: pointer;/* Safari and Chrome */-webkit-transform: rotate(180deg);/* Firefox */-moz-transform: rotate(180deg);/* IE */-ms-transform: rotate(180deg);/* Opera */-o-transform: rotate(180deg);transform: rotate(180deg);
}复制代码

transition后面可以提供4个参数，分别表示需要过渡的CSS属性、过渡持续时间、过渡的时间变化曲线、过渡效果开始的延时时间，后两项可以省略，默认值分别为线性过渡和无延时。需要注意，所有的CSS3属性前都需要加上相应的浏览器前缀。由于transition是DOM元素始终具备的属性，所以应当直接应用于DOM元素，而不是仅应用于悬浮状态下。

animation即动画，可以为DOM元素添加丰富而流畅的动画效果。使用之前需要先用@keyframes定义一个动画，其中包括多个关键帧，用于说明动画的不同时间节点所呈现的属性。以下动画定义了四个关键帧，不同帧所对应的位置和背景颜色不同。这样一来，动画运行之后便会从每一帧过渡到下一帧，直到回到最初的状态。

@keyframes myfirst
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}复制代码

定义好动画之后再使用animation属性将动画绑定至DOM元素即可。animation可以使用6个参数，分别对应动画的名称、动画持续时间、动画的时间曲线、动画开始的延时、动画播放的轮数、相邻轮数之间的动画方向，后四项可以省略，默认值分别为线性动画、无延时、播放1轮、正常播放。

#animation {width: 100px;height: 100px;background: red;position: relative;animation: myfirst 5s;-webkit-animation: myfirst 5s; /* Safari and Chrome */
}复制代码

关于CSS3的更多内容，可以参考以下链接：www.runoob.com/css3/css3-t…。

CSS实例

HTML中button的默认样式十分难看，现在让我们用CSS的强大功能对其进行美化，并添加鼠标悬浮效果。

首先，给button周围一些边距，将背景色设为透明，设置边框样式，并将字体调大一些。

button {padding: 16px 20px;margin: 10px;outline: none;background-color: transparent;border: 1px solid #000;font-size: 30px;
}复制代码

然后，通过开发者工具交互地调整颜色，得到一个看起来还不错的颜色#6ebade，作为边框和文本的颜色，并设置边框圆角和文本字体，同时加上过渡。

button {padding: 16px 20px;margin: 10px;outline: none;background-color: transparent;border: 1px solid #6ebade;font-size: 30px;color: #6ebade;border-radius: 5px;font-family: Microsoft Yahei;-webkit-transition: color, background-color .4s;-ms-transition: color, background-color .4s;-moz-transition: color, background-color .4s;-o-transition: color, background-color .4s;transition: color, background-color .4s;
}复制代码

最后，添加鼠标悬浮后的样式，包括改变鼠标样式、背景色和文本颜色。

button:hover {background-color: #6ebade;color: #fff;cursor: pointer;
}复制代码

补充学习

CSS的基本内容无非选择器和样式，但由于选择器类型丰富，选择器之间也可以自由灵活地进行组合，CSS可设置的样式属性名非常之多，每个属性名又对应许多种可选的属性值，这些都使得CSS相对HTML而言更加博大精深。同样的HTML、不同的CSS，最后呈现的效果可能差之千里。只有通过不断的练习，观察不同CSS代码组合之后的效果，才能更好地感受和理解每一项CSS属性的作用。以下链接提供了关于CSS的更多内容，www.runoob.com/css/css-int…，里面提供了更为详细和系统的讲解，并结合大量实例代码加以巩固，推荐完整地浏览和尝试一遍。

视频链接：

网页的血肉CSS（一）
网页的血肉CSS（二）
网页的血肉CSS（三）

如果觉得文章不错，不妨点一下左下方的喜欢～