本篇教程需要对HTML有基本的了解。

如何把网页搞的美观一点，这是一门艺术。网站的样子定下来了，真正的实现方法却有好多。例如用bgcolor属性控制背景颜色，用width和height属性控制表格宽高……不过如果每一页都这么写的话：

<span style="font-size: 0.857142857rem; line-height: 1.714285714;">
    <img src="a.png" width="120" height="40" align="center" border="2">
</span>

坑爹呢？我可不喜欢复制粘贴。

既然每一页样式差不多都一样，为什么不能把样式分离出来呢？

于是就有了CSS这么个东西，它是专门控制网页样式的东西。这样我们在写HTML的时候，主要关注的不再是如何实现样式，而是网页结构是否合理。

跟CSS相配合的标签是div和span等标签。div是一个块（跟h1、p一样同为块级元素，一个元素占一行），span可以用来存储一小段文本（跟b、i一样同为行内元素，可以和文字一样一行显示多个）。

在开始学习CSS之前，先介绍两个元素属性：id和class。这俩都是字面意思，id就是元素的id，class就是元素的类。它俩都可以用来给元素打标记，不同的是，一个页面的id必须唯一（更像学号），而class可以不唯一（更像班号）。例如：

<div id="menu">
    <span class="item">主页</span>
    <span class="item">博客</span>
    <span class="item">关于我</span>
</div>

当然，在CSS出来之前，这段代码的效果真是丑的要死。

我们新建一个文件，文件后缀为.css（例如common.css），这就是我们接下来放CSS代码的地方。

然后我们在head标签中加上这么一句：

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

link标签可以被理解为用来引入一个CSS文件（当然也可以干别的），rel是引入的类型，href是文件的路径。这里用到了相对路径。

如果CSS特别少的话，也可以直接嵌入在HTML中，方法是在head标签中加一个style标签，style里面就可以放CSS了，另外一种方法是直接设置元素的style属性（这个在后面我会用到）。

要为这个div以及里面的三个span设置样式，首先得知道如何选中它们吧。在CSS中，有各种各样的选择器：

id选择器：【#id】，例如【#menu】
类选择器：【.class】，例如【.item】
标签选择器：【tag】，例如【div】
派生选择器：【father child sub_child ...】，例如【div span】

因此，对于刚才那个menu，下面几种写法等价，都用来选择所有的span：

div span
div .item
#menu span
#menu .item
span
.item

至于怎么搞最好，看情况。正常情况下一个网页会有很多个div和span，所以一般不会用标签选择器。

要给#menu设置宽度为100%，高度为48个像素，我们可以这么搞：

#id {
    width: 100%;
    height: 48px;
}

先写一个选择器，然后在接下来的大括号里写上需要设置的样式即可。注意样式之间要用分号隔开。

刚才提到了块级元素和行内元素，这个显示方法可以用display属性来修改，display有三个常用的值：

inline：行内，不可以设置宽高（就是简单地把里面的元素组合起来），一行可以放多个inline
block：块级，可以随意设置宽高，但是同一行只能放一个block
inline-block：行块结合，可以设置宽高，而且一行可以放多个inline-block

例如，可以对一个div设置CSS为【display:inline-block】，这个div从此可以在一行中出现多次。

CSS可以修改元素的背景，可以用图片也可以用颜色：

/* 这里的颜色可以是英文例如【blue】，也可以是十六进制颜色【#123456】*/
background-color: 颜色;
/* 路径可以用相对路径或者绝对路径 */
background-image: url(图片路径);
/* 控制背景图片是否平铺，以及在哪个方向上平铺 */
background-repeat: repeat-x / repeat-y / repeat / no-repeat;

还有好多属性，这里就不一一列举了。

CSS还支持边框和边距。在你的浏览器中按下F12（以chrome为例），点开“Elements”，把右边的框使劲往下拉，仔细找找应该可以找到一个形如这样的东西：

一个框可以有margin（外边距）、border（边框）和padding（内边距），这三个东西都可以加上【top/bottom/left/right】这些后缀，例如【margin-left:20px】会只设置左边的外边框为20像素。而border比较特殊，它的语法为：【border: 宽度 边框类型 颜色】，其中边框类型可以是实线（solid）、短横线（dashed）、点（dotted）等，例如下面有一个很好的例子：

<div style="margin: 20px; border: 5px solid black; padding: 30px;">abc</div>

黑色的实线边框宽度为5px，黑框外面有20px的空白，黑框与文字之间有30px的空白。

CSS可以对一个块进行精确定位，定位方式有：

position
relative：相对定位，元素位置根据其本来应有的位置进行计算，即使元素被移动，在页面上的所占空间还是原来的空间，只是内容的位置变了（有点像错位）
absolute：绝对定位，元素位置的计算是相对于最近的已经被定位的父元素，元素在页面上没有占用空间
fixed：页面中固定，位置计算是相对于整个页面，元素在页面上没有占用空间

float
取值为left或者right。元素可以向左或向右移动，直到它的外边框外围碰到父元素的内边框内部，或者碰到另一个float的外边框外围。

而具体坐标的计算则可以用left、right、top、bottom来进行计算，例如【left:20px】会将元素从本来占位的地方往右挪动20个像素（因为设置的左边的距离，所以当然是往右挪动啦）。

大家可以生成几个div，多用用position和float，多改改元素的位置，看看具体会发生什么变化。

作业：生成一个网页，里面有4个div，大小均为100像素，附加条件如下：

1.行块结合，相对定位，往下挪动10像素，背景颜色为红色；

2.绝对定位，距离底部20像素，边框为1像素的黑色短横线框；

3.相对页面固定，left和top均设为50px，背景颜色设为绿色；

4.浮动至页面右侧，边框为2像素橙色实线框。

下一篇中我们会学到如何用DIV+CSS的方式对一个网页进行布局。

版权声明：除文章开头有特殊声明的情况外，所有文章均可在遵从 CC BY 4.0 协议的情况下转载。