CSS 基础

最新推荐文章于 2024-09-25 18:08:46 发布

Derait

最新推荐文章于 2024-09-25 18:08:46 发布

阅读量1.2k

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/derait/article/details/109667026

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、基础

1.简介

CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。我们知道，前端最核心的3个技术是：HTML、CSS、JavaScript，三者的关系如下。

HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。

CSS发展至今，历经CSS1.0、CSS2.0、CSS2.1以及CSS3.0几个版本。其中，CSS2.1是CSS2.0的修订版，CSS3.0是CSS的最新版本。

CSS3，一般指的是相对于CSS2“新增加的内容”，并不是说CSS2被淘汰了。这里介绍的是CSS2

2.CSS引入方式

想要在一个页面引入CSS，共有以下3种方式。

（1）外部样式表
（2）内部样式表
（3）行内样式表

外部样式表

所谓的外部样式表，指的是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。

使用外部样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。

外部样式表在单独文件中定义，然后在HTML文件的标签对中使用link标签来引用。

<link rel="stylesheet" type="text/css" href="文件路径" />

rel即relative的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件（即CSS文件）。

type属性取值也是固定的，即"text/css"，表示这是标准的CSS。

href属性表示CSS文件的路径。

★如果你使用外部样式表，必须使用link标签来引入，而link标签是放在head标签内的。

内部样式表

内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。

<style type="text/css">
    ……
</style>

type="text/css"是必须添加的，表示这是标准的CSS。

★如果你使用内部样式表，CSS样式必须在style标签内定义，而style标签是放在head标签内的。

行内样式表

行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div style="color:red;">行内样式表</div>
    <div style="color:red;">行内样式表</div>
    <div style="color:red;">行内样式表</div>
</body>
</html>

行内样式是在每一个元素内部定义的，冗余代码非常多，并且每次改动CSS的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。

对于这三种样式表，在实际开发中，一般都是使用外部样式表。

二、选择器

1.id与class

在HTML中，id和class是元素最基本的两个属性。一般情况下，id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作。

id属性

id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。

在同一个页面中，是不允许出现两个相同id的元素。不过呢，在不同页面中，是可以出现两个id相同的元素。

class属性

class，顾名思义，就是“类”，它与C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。

在同一个页面中，允许出现两个相同class的元素。这样可以使得我们对具有相同class的多个元素，定义相同的CSS样式。

对于id和class，我们可以这样理解：id就像你的身份证号，而class就像你的名字。身份证号是唯一的，但是两个人的名字就有可能是一样的。

2.CSS基本选择器

最实用的5种选择器。

（1）元素选择器
（2）id选择器
（3）class选择器
（4）后代选择器
（5）群组选择器

CSS选择器的功能就是把所想要的元素选中，然后使得我们可以操作这些元素的CSS样式。其中，CSS选择器的格式如下：

选择器

{

属性1 : 取值1;

……

属性n : 取值n;

}

元素选择器

元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
    <div>元素选择器</div>
    <p>元素选择器</p>
    <span>元素选择器</span>
    <div>元素选择器</div>
</body>
</html>

div{color:red;}表示把页面中所有的div元素选中，然后定义它们文本颜色为红色。

id选择器

我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。不过要注意一点，在同一个页面中，是不允许出现两个相同的id的。这个跟“没有两个人的身份证号相同”是一样的道理。

对于id选择器，id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表示这是一个id选择器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #lvye{color:red;}
    </style>
</head>
<body>
    <div>id选择器</div>
    <div id="lvye">id选择器</div>
    <div>id选择器</div>
</body>
</html>

#lvye{color:red;}表示选中id为lvye的元素，然后定义它们的文本颜色为红色。

class选择器

class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。

class名前面必须要加上前缀英句号（.），否则该选择器无法生效。类名前面加上英文句号，表明这是一个class选择器。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .lv{color:red;}
    </style>
</head>
<body>
    <div>class选择器</div>
    <div class="lv">class选择器</div>
    <div class="lv">class选择器</div>
</body>
</html>

.lv{color:red;}表示选中class为lv的所有元素，然后定义它们文本颜色为红色。

如果你要为两个或多个元素定义相同的样式，建议使用class选择器，因为这样可以减少大量重复代码。

后代选择器

后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如“孙元素”）。

父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father1 div {color:red;}
        #father2 span{color:blue;}
    </style>
</head>
<body>
    <div id="father1">
        <div>后代选择器</div>
        <div>后代选择器</div>
    </div>
    <div id="father2">
        <p>后代选择器</p>
        <p>后代选择器</p>
        <span>后代选择器</span>
    </div>
</body>
</html>

#father1 div {color:red;}表示选择“id为father1的元素”下的所有div元素，然后定义它们的文本颜色为红色。

#father2 span{ color:blue;}表示选择“id为father2的元素”下的所有span元素，然后定义它们文本颜色为蓝色。

群组选择器

群组选择器，指的是同时对几个选择器进行相同的操作。

对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        h3, div, p, span {color:red;}
    </style>
</head>
<body>
    <h3>群组选择器</h3>
    <div>群组选择器</div>
    <p>群组选择器</p>
    <span>群组选择器</span>
</body>
</html>

h3,div,p,span{……}表示选中所有的h3元素、div元素、p元素和span元素。

三、字体样式

1.简介

字体相关的CSS属性如下所示

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

2.字体类型：font-family

在CSS中，我们可以使用font-family属性来定义字体类型。

font-family: 字体1, 字体2, ... , 字体N;

font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。如果我们不定义font-family，浏览器默认字体类型一般是“宋体”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1{font-family: Arial;}
        #div2{font-family: "Times New Roman";}
        #div3{font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微软雅黑</div>
</body>
</html>

对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。注意，这里的双引号是英文双引号，而不是中文双引号。

设置多种字体

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p{font-family:Arial,Verdana,Georgia;}
    </style>
</head>
<body>
    <p>Rome was not built in a day.</p>
</body>
</html>

p{font-family:Arial,Verdana,Georgia;}这一句的意思是：p元素优先使用“Aria字体”来显示，如果你的电脑没有装“Arial字体”，那就接着考虑“Verdana字体”。如果你的电脑还是没有装“Verdana字体”，那就接着考虑“Georgia字体”……以此类推。如果Arial、Verdana、Georgia字体都没有安装，那么p元素就会以默认字体（即宋体）来显示。

在实际开发中，比较美观的中文字体有微软雅黑、苹方，英文字体有Times New Roman 、Arial和Verdana（这个技巧对实际开发很重要）。

3.字体大小：font-size

在CSS中，我们可以使用font-size属性来定义字体大小。

font-size: 像素值;

实际上，font-size属性取值有两种：一种是“关键字”，如small、medium、large等；另外一种是“像素值”，如10px、16px、21px等。

★不过在实际开发中，关键字这种方式基本不会用，因此我们只需要掌握像素值方式即可。

px是什么？

px，全称pixel（像素），1像素指的是一张图片中最小的点，或者是计算机屏幕最小的点。

严格来说，px属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。例如Windows系统的分辨率为每英寸96px，Mac系统的分辨率为每英寸72px。如果不考虑屏幕分辨率，我们也可以把px当成绝对单位来看待，这也是为什么很多地方说px是绝对单位的原因。

对于初学者来说，1px可以看成一个小点，多少px就可以看成由多少个小点组成。

font-size的取值单位不仅仅是px，还有em、百分比等。不过初学CSS时，我们只需要掌握px这一个就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-size: 10px;}
        #p2 {font-size: 15px;}
        #p3 {font-size: 20px;}
    </style>
</head>
<body>
    <p id="p1">字体大小为10px</p>
    <p id="p2">字体大小为15px</p>
    <p id="p3">字体大小为20px</p>
</body>
</html>

4.字体粗细：font-weight

在CSS中，我们可以使用font-weight属性来定义字体粗细。注意，字体粗细（font-weight）跟字体大小（font-size）是不一样的。粗细指的是字体的“肥瘦”，而大小指的是字体的“宽高”。

font-weight: 取值;

font-weight属性取值有两种：一种是“100~900的数值”；另外一种是“关键字”。其中，关键字取值如下表所示。

属性值	说明
normal	正常（默认值）
lighter	较细
bold	较粗
bolder	很粗（其实效果跟bold差不多）

对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上

font-weight取值为“数值”

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-weight: 100;}
        #p2 {font-weight: 400;}
        #p3 {font-weight: 700;}
        #p4 {font-weight: 900;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:100（lighter）</p>
    <p id="p2">字体粗细为:400（normal）</p>
    <p id="p3">字体粗细为:700（bold）</p>
    <p id="p4">字体粗细为:900（bolder）</p>
</body>
</html>

在实际开发中，不建议使用使用数值（100~900）作为font-weight的属性取值

font-weight取值为“关键字”

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{font-weight:lighter;}
        #p2{font-weight:normal;}
        #p3{font-weight:bold;}
        #p4{font-weight:bolder;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:lighter</p>
    <p id="p2">字体粗细为:normal</p>
    <p id="p3">字体粗细为:bold</p>
    <p id="p4">字体粗细为:bolder </p>
</body>
</html>

5.字体风格：font-style

在CSS中，我们可以使用font-style属性来定义斜体效果。

font-style: 取值;

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{font-style:normal;}
        #p2{font-style:italic;}
        #p3{font-style:oblique;}
    </style>
</head>
<body>
    <p id="p1">字体样式为normal</p>
    <p id="p2">字体样式为italic </p>
    <p id="p3">字体样式为oblique</p>
</body>
</html>

italic是字体的一个属性，但是并非所有的字体都有这个italic属性。对于有italic属性的字体，我们可以使用“font-style:italic;”来实现斜体效果。但是对于没有italic属性的字体，我们只能另外想个法子，也就是使用“font-style:oblique;”来实现。

我们可以这样理解：有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。

不过在实际开发中，font-style属性很少用得到

6.字体颜色：color

在CSS中，我们可以使用color属性来定义字体颜色。

color: 颜色值;

color属性取值有两种，一种是“关键字”；另外一种是“16进制RGB值”。除了这两种，其实还有RGBA、HSL等，不过后面那几个都是属于CSS3的内容。

关键字

关键字，指的就是颜色的英文名称，如red、blue、green等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{color:gray;}
        #p2{color:orange;}
        #p3{color:red;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为灰色</p>
    <p id="p2">字体颜色为橙色</p>
    <p id="p3">字体颜色为红色</p>
</body>
</html>

进制RGB值

所谓的16进制RGB值，指的是类似“#FBF9D0”形式的值。

推荐一个小工具：Color Picker。Color Picker是一款轻巧的软件，体积较小，但功能非常强大。至于下载地址，小伙伴们搜索一下就有了。

此外，对于16进制颜色值，有两个我们需要知道的：#000000是黑色，#FFFFFF是白色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{color: #03FCA1;}
        #p2{color: #048C02;}
        #p3{color: #CE0592;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为#03FCA1</p>
    <p id="p2">字体颜色为#048C02</p>
    <p id="p3">字体颜色为#CE0592</p>
</body>
</html>

7.CSS注释

跟学习HTML时一样，为了提高代码的可读性和可维护性，方便自己修改以及团队开发，我们也需要经常对CSS中的关键代码做一下注释。

/* 注释的内容 */

/*表示注释的开始，*/表示注释的结束。需要特别注意一下，CSS注释与HTML注释的语法是不一样的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*使用元素选择器，定义所有p元素样式*/
        p
        {
            font-family:微软雅黑;     /*字体类型为微软雅黑*/
            font-size:14px;          /*字体大小为14px*/
            font-weight:bold;        /*字体粗细为bold*/
            color:red;               /*字体颜色为red*/
        }
        /*使用id选择器，定义个别样式*/
        #p2
        {
            color:blue;              /*字体颜色为blue*/
        }
    </style>
</head>
<body>
    <p id="p1">HTML控制网页的结构</p>
    <p id="p2">CSS控制网页的外观</p>
    <p id="p3">JavaScript控制网页的行为</p>
</body>
</html>

小技巧：浏览器解析CSS是有一定顺序的，在这个例子中，第2个p元素一开始就使用元素选择器定义了一次color:red;，然后又接着用id选择器定义了一次color:blue;。因此后面的会覆盖前面的，最终显示为蓝色。

四、文本样式

1.简介

字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了“font”和“text”两个前缀来区分这两类样式。如果清楚这一点，以后写CSS时，就很容易想起哪些属性是字体样式，哪些属性是文本样式了。

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform 大小写转换
line-height	行高
letter-spacing	字母间距
word-spacing	词间距

2.首行缩进：text-indent

p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个“”来实现首行缩进两个字的空格。但是这种方式冗余代码很多。那么有没有更好的解决方法呢？

在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。

text-indent: 像素值;

在CSS入门中，建议大家都是使用像素（px）作为单位，然后在CSS进阶中再去学习更多的CSS单位。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p
        {
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

中文段落首行一般需要缩进两个字的空间。如果想要实现这个效果，text-indent值应该是font-size值的2倍。

3.水平对齐：text-align

在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。

text-align: 取值;

text-align属性取值有3个，如下表所示。

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

在实际开发中，我们只会用到居中对齐（center）这一个，其他两个几乎用不上。此外，text-align属性不仅对文本有效，对图片（img元素）也有效。对于图片水平对齐，我们在后面会详细介绍。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-align:left;}
        #p2{text-align:center;}
        #p3{text-align:right;}
    </style>
</head>
<body>
    <p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
    <p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
    <p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>

4.文本修饰：text-decoration

在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。

text-decoration: 取值;

text-decoration属性取值有4个，如下表所示。

属性值	说明
none	去除所有的划线效果（默认值）
underline	下划线
line-through	中划线
overline	顶划线

在前端开发中，对于外观控制一般用CSS来实现，而不是使用标签来实现，这更加符合结构与样式分离的原则，提高可读性和可维护性。所以对于下划线或者删除线，从现在开始只用CSS实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-decoration:underline;}
        #p2{text-decoration:line-through;}
        #p3{text-decoration:overline;}
    </style>
</head>
<body>
    <p id="p1">这是“下划线”效果</p>
    <p id="p2">这是“删除线”效果</p>
    <p id="p3">这是“顶划线”效果</p>
</body>
</html>

如何去掉a元素中的默认下划线呢？这个时候，text-decoration:none;就派上用场了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        a{text-decoration:none;}
    </style>
</head>
<body>
    <a href="http://www.lvyestudy.com" target="_blank">去掉a元素中的默认下划线</a>
</body>
</html>

★这个技巧我们在实际开发中会大量使用到

下划线一般用于文章中的重点标明，中划线经常出现在各大电商网站中，一般用于促销

5.text-transform

在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。

text-transform: 取值;

text-transform属性取值有4个，如下表所示。

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
capitalize	只将每个英文单词首字母转换为大写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-transform:uppercase;}
        #p2{text-transform:lowercase;}
        #p3{text-transform:capitalize;}
    </style>
</head>
<body>
    <p id="p1">rome was't built in a day.</p>
    <p id="p2">rome was't built in a day.</p>
    <p id="p3">rome was't built in a day.</p>
</body>
</html>

6.行高：line-height

在CSS中，我们可以使用line-height属性来控制一行文本的高度。很多书上称line-height为“行间距”，这是非常不严谨的叫法。行高，顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，两者是完全不一样的概念。

line-height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{line-height:15px;}
        #p2{line-height:20px;}
        #p3{line-height:25px;}
    </style>
</head>
<body>
    <p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>

7.间距：letter-spacing、word-spacing

字间距

在CSS中，我们可以使用letter-spacing属性来控制两个字之间的距离。

letter-spacing: 像素值;

letter-spacing，从英文意思上就可以知道这是“字母间距”。注意，每一个中文汉字都被当做一个“字”，而每一个英文字母也当做一个“字”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{letter-spacing:0px;}
        #p2{letter-spacing:3px;}
        #p3{letter-spacing:5px;}
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>

词间距

在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离

word-spacing: 像素值;

一般来说，word-spacing只针对英文单词而言。

在实际开发中，对于中文网页来说，我们很少去定义字间距以及词间距这些东西。letter-spacing和word-spacing只会用于英文网页，所以了解即可

五、边框样式

1.简介

定义一个元素的边框样式需要设置哪几个方面？

（1）边框的宽度
（1）边框的外观
（3）边框的颜色

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border-color属性才会有效果。

2.整体样式

下面详细介绍一下border-width、border-style以及border-color属性。

border-width

border-width属性用于定义边框的宽度，取值是一个像素值。

border-style

border-style属性用于定义边框的外观，常用取值如下表所示。

属性值	说明
none	无样式
dashed	虚线
solid	实线

border-color

border-color属性用于定义边框的颜色，取值可以是“关键字”或“16进制RGB值”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义所有div样式*/
        div
        {
            width:100px;
            height:30px;
        }
        /*定义单独div样式*/
        #div1
        {
            border-width:1px;
            border-style:dashed;
            border-color:red;
        }
        #div2
        {
            border-width:1px;
            border-style:solid;
            border-color:red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

想要为一个元素定义边框，我们需要完整地给出border-width、border-style和border-color。这种写法代码量过多，很费时费力。不过CSS为我们提供了一种简写形式：

border: 1px solid red;

等价于

border-width: 1px;
border-style: solid;
border-color: red;

实际开发中我们都是使用这种简写形式

3.局部样式

一个元素其实有4条边（上、下、左、右），上一节我们学习的是4条边的整体样式。那么如果想要对某一条边进行单独设置，这该怎么实现呢？

border-top: 1px solid red;

上边框border-top，下边框border-bottom，左边框border-left，右边框border-right

从上面可以知道，对于边框样式，不管是整体样式，还是局部样式，我们都需要设置3个方面：边框宽度、边框外观、边框颜色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width: 100px;                  /*div元素宽为100px*/
            height: 60px;                  /*div元素高为100px*/
            border: 1px solid red;         /*边框整体样式*/
            border-bottom: 0px;            /*去除下边框*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-bottom:0px;是把下边框宽度设置为0px。由于此时下边框没有宽度，因此下边框就被去除了。

此外，border-bottom:0px;、border-bottom:0;和border-bottom:none;是等价的。

六、列表样式

1.列表项符号：list-style-type

在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。

list-style-type: 取值;

list-style-type属性是针对ol或者ul元素的，而不是li元素。其中，list-style-type属性取值如下表所示。

表1 ol的list-style-type属性取值

属性值	说明
decimal	阿拉伯数字：1、2、3…（默认值）
lower-roman	小写罗马数字：i、ii、iii…
upper-roman	大写罗马数字：I、II、III…
lower-alpha	小写英文字母：a、b、c…
upper-alpha	大写英文字母：A、B、C…

表2 ul的list-style-type属性取值

属性值	说明
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol{list-style-type:lower-roman;}
    </style>
</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>
</html>

去除列表项符号

在CSS中，我们也是使用list-style-type属性来去除有序列表或无序列表的列表项符号的。

list-style-type: none;

由于列表项符号比较丑，因此在实际开发中，大多数情况下我们都需要使用list-style-type:none;去掉。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol,ul{list-style-type:none;}
    </style>
</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <h3>无序列表</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

分析：

使用list-style-type:none这个小技巧可以去除列表项默认的符号，在实际开发中，我们经常会用到。

ol,ul{list-style-type:none;}使用的是“群组选择器”。当对多个不同元素定义了相同的CSS样式时，我们就可以使用群组选择器。在群组选择器中，元素之间是用英文逗号隔开的，而不是中文逗号。

2.列表项图片：list-style-image

在CSS中，我们可以使用list-style-image属性来定义列表项图片，也就是使用图片来代替列表项符号。

list-style-image: url(图片路径);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-image: url(img/leaf.png);}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

list-style-image属性实际上就是把列表项符号改为一张图片，而引用一张图片就要给出图片的路径。

实际开发中这种列表项符号，一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现

七、表格样式

1.表格标题位置：caption-side

在CSS中，我们可以使用caption-side属性来定义表格标题的位置。

caption-side: 取值;

caption-side属性取值只有2个，如下表所示。

属性值	说明
top	标题在顶部（默认值）
bottom	标题在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,tr, td,th{border:1px solid silver;}
        table{caption-side:bottom;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的。不过一般情况下，我们都只在table元素中定义就可以了。

2.表格边框合并：border-collapse

从前面的学习中可以知道，表格加入边框后的页面效果中，单元格之间是有一定空隙的。但是在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。

在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。

border-collapse: 取值;

border-collapse属性取值只有2个，如下表所示。

属性值	说明
separate	边框分开，有空隙（默认值）
collapse	边框合并，无空隙

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-collapse: collapse;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在CSS中，border-collapse属性也是在table元素中定义的。

3.表格边框间距：border-spacing

上一节介绍了如何去除表格边框间距，但是在实际开发中，有时候我们却需要定义一下表格边框的间距。

在CSS中，我们可以使用border-spacing属性来定义表格边框间距。

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-spacing: 8px;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在CSS中，border-spacing属性也是在table元素中定义的。

八、图片样式

1.图片大小

在前面的学习中，我们接触了width和height这两个属性。其中width属性用于定义元素的宽度，height属性用于定义元素的高度。

在CSS中，我们也是使用width和height这两个属性来定义图片的大小（也就是宽度和高度）。

width: 像素值;
height: 像素值;

一张100px * 100px的gif图片，我们尝试使用width和height属性来改变其大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img
        {
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <img src="img/girl.gif" alt="卡通女孩" />
</body>
</html>

在实际开发中，如果你需要多大的图片，就用Photoshop制作多大的图片。不建议使用一张大图片，然后再借助width和height来改变大小。因为一张大图片体积更大，会使页面加载速度变慢。这是性能优化方面的考虑，以后我们会慢慢接触。

2.图片边框

对于图片的边框，我们也是使用border属性来定义的。

border: 1px solid red;

对于边框样式，在实际开发中都是使用简写形式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img
        {
            widht: 60px;
            height: 60px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="img/girl.gif" alt="卡通女孩" />
</body>
</html>

3.图片对齐

水平对齐

在CSS中，我们可以使用text-align属性来定义图片水平对齐方式。

text-align: 取值;

text-align属性取值有3个，如下表所示。

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width: 300px;
            height: 80px;
            border: 1px solid silver;
        }
        .div1{ text-align: left; }
        .div2{ text-align: center; }
        .div3{ text-align: right; }
         img{ width: 60px; height: 60px; }
    </style>
</head>
<body>
    <div class="div1">
        <img src="img/girl.gif" alt=""/>
    </div>
    <div class="div2">
        <img src=" img/girl.gif" alt=""/>
    </div>
    <div class="div3">
        <img src=" img/girl.gif" alt=""/>
    </div>
</body>
</html>

很多人以为图片的水平对齐是在img元素中定义，其实这是错的。图片是在父元素中进行水平对齐，因此我们当然是在图片的父元素中定义啦。

在这个例子中，img的父元素是div，因此想要实现图片的水平对齐，就应该在div中定义text-align属性。

垂直对齐

在CSS中，我们可以使用vertical-align来定义图片的垂直对齐方式。

vertical-align: 取值;

vertical指的是“垂直的”，align指的是“使排整齐”。学习CSS属性跟学习HTML标签一样，根据英文意思去理解和记忆往往事半功倍。vertical-align属性取值有4个，如下表所示。

属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img{ width: 60px; height: 60px; }
        #img1{ vertical-align: top; }
        #img2{ vertical-align: middle; }
        #img3{ vertical-align: bottom; }
        #img4{ vertical-align: baseline; }
    </style>
</head>
<body>
    垂直对齐<img id="img1" src="img/girl.gif" alt=""/>垂直对齐（top）
    <hr/>
    垂直对齐<img id="img2" src="img/girl.gif" alt=""/>垂直对齐（middle）
    <hr/>
    垂直对齐<img id="img3" src="img/girl.gif" alt=""/>垂直对齐（bottom）
    <hr/>
    垂直对齐<img id="img4" src="img/girl.gif" alt=""/>垂直对齐（baseline）
</body>
</html>

W3C（Web标准制定者）对vertical-align属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。

毫不夸张地说，vertical-align是CSS最复杂的一个属性，但功能也非常强大。在CSS入门阶段，我们简单看一下就行。对于更高级的技术，我们在CSS进阶教程中再详细介绍。

4.文字环绕

在网页布局中，常常遇到图文混排的效果。所谓的图文混排，指的是文字环绕着图片进行布局。文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段则可以实现各种绚丽的效果。

在CSS中，我们可以使用float属性来实现文字环绕图片的效果。

float: 取值;

float属性取值只有2个，非常简单，如下表所示。

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       img{float:left;}
       p{
           font-family:"微软雅黑";
           font-size:12px;
        }
    </style>
</head>
<body>
    <img src="img/lotus.png" alt=""/>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

九、背景样式

1.简介

在CSS中，背景样式包括两个方面：背景颜色和背景图片。在Web1.0时代，都是使用background或者bgcolor这两个“HTML属性”（不是CSS属性）来为元素定义背景颜色或背景图片。不过在Web2.0时代，对于元素的背景样式，我们都是使用CSS属性来实现。

在CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，往往涉及以下属性。

属性	说明
background-image	定义背景图片地址
background-repeat	定义背景图片重复，例如横向重复、纵向重复
background-position	定义背景图片位置
background-attachment	定义背景图片固定

2.背景颜色：background-color

在CSS中，我们可以使用background-color属性来定义元素的背景颜色。

background-color: 颜色值;

颜色值有两种，一种是“关键字”，另外一种是“16进制RGB值”。其中关键字指的是颜色的英文名称，如red、green、blue等。而16进制RGB值指的是类似“#FBE9D0”形式的值。

除了这两种，其实还有RGBA、HSL等，不过那些我们暂时不用去了解。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div
       {
           width:100px;
           height:60px;
       }
       #div1{background-color: hotpink}
       #div2{background-color: #87CEFA;}
    </style>
</head>
<body>
    <div id="div1">背景颜色为：hotpink</div>
    <div id="div2">背景颜色为：#87CEFA</div>
</body>
</html>

color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”

3.背景图片样式：background-image

在CSS中，我们可以使用background-image属性来为元素定义背景图片。

background-image: url(图片路径);

跟引入图片（即img标签）一样，引入背景图片也需要给出图片路径才可以显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div{background-image: url(img/haizei.png);}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

为什么背景图片没有显示出来呢？这是因为我们没有给div元素定义width和height，此时div元素的宽度和高度都为0，那背景图片肯定不会显示啊！

我们需要为div元素添加width和height，代码如下：

div
{
    width:250px;
    height:170px;
    background-image: url(img/haizei.png);
}

背景图片跟图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。两者的使用场合也不一样，大多数情况下都是使用图片来实现，不过某些场合无法使用图片时我们再考虑背景图片形式。

4.背景图片重复：background-repeat

在CSS中，我们可以使用background-repeat属性来定义背景图片的重复方式。

background-repeat: 取值;

属性值	说明
repeat	在水平方向和垂直方向上同时平铺（默认值）
repeat-x	只在水平方向（x轴）上平铺
repeat-y	只在垂直方向（y轴）上平铺
no-repeat	不平铺

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:200px;
            height:100px;
            border: 1px solid silver;
            background-image: url(img/flower.png);
        }
        #div2{background-repeat: repeat-x}
        #div3{background-repeat: repeat-y}
        #div4{background-repeat: no-repeat}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
</html>

在这个例子中，第1个div元素由于没有定义background-repeat属性值，因此会采用默认值repeat。

此外还需要注意一点，元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果。。

5.背景图片位置：background-position

在CSS中，我们可以使用background-position属性来定义背景图片的位置。

background-position: 像素值/关键字;

background-position属性常用取值有两种：一种是“像素值”；另外一种是“关键字”（这里不考虑百分比取值）

像素值

当background-position属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。例如，“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。

background-position: 水平距离 垂直距离;

水平距离和垂直距离这两个数值之间要用空格隔开，两者取值都是像素值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-position:40px 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

background-position属性设置的两个值是相对该元素的左上角来说的

关键字

当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。

background-position: 水平距离 垂直距离;

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

background-position:right center;中的“right center”，表示相对于左上角，水平方向在右边（right），垂直方向在中间（center）。

★CSS Spirit技术是借助background-position属性来实现的

6.背景图片固定：background-attachment

在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。

background-attachment: 取值;

属性值	说明
scroll	随元素一起滚动（默认值）
fixed	固定不动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:160px;
            height:1200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在实际开发中，background-attachment这个属性几乎用不上

十、超链接样式

1.超链接伪类

在浏览器中，超链接在鼠标点击不同时期的样式是不一样的。

（1）默认情况下：字体为蓝色，带有下划线。
（2）鼠标点击时：字体为红色，带有下划线。
（3）鼠标点击后：字体为紫色，带有下划线。

在CSS中，我们可以使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式。

a:link{…}
a:visited{…}
a:hover{…}
a:active{…}

伪类	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过a元素时的样式
a:active	定义鼠标点击激活时的样式

定义4个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变。

这里有一个挺好的记忆方法：“love hate”。看到了么？我们把这个顺序规则称之为“爱恨原则”，以后大家回忆一下“爱恨原则”，自然就写出来了。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title> </title>
    <style type="text/css">
        a{text-decoration:none;}
        a:link{color:red;}
        a:visited{color:purple;}
        a:hover{color:yellow;}
        a:active{color:blue;}
    </style>
</head>
<body>
    <a href="http://www.lvyestudy.com" target="_blank">爱恨原则</a>
</body>
</html>

深入了解超链接伪类

在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。

a{…}
a:hover{…}

对于未访问时状态，我们直接针对a元素定义就行了，没必要使用a:link。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title> </title>
    <style type="text/css">
        a
        {
            color:red;
            text-decoration: none;
        }
        a:hover
        {
            color:blue;
            text-decoration:underline;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.lvyestudy.com" target="_blank">超链接伪类</a>
    </div>
</body>
</html>

事实上，对于超链接伪类来说，我们只需要记住a:hover这一个就够了，因为在实际开发中也只会用到这一个。

2.深入了解:hover

不仅是初学者，甚至包括接触CSS很久的小伙伴都会以为:hover伪类只限用于a元素，都觉得它唯一的作用就是定义鼠标经过超链接时的样式。

元素:hover{…}

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:white;
            background-color: lightskyblue;
        }
        div:hover
        {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div>hover伪类</div>
</body>
</html>

在这个例子中，我们使用:hover为div元素定义鼠标经过时就改变背景色。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img:hover
        {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <img src="img/girl.gif" alt="">
</html>

在这个例子中，我们使用:hover为img元素定义鼠标经过时就为其添加一个边框。

“:hover伪类”应用非常广泛，任何一个网站都会大量地用到，我们要好好掌握。

3. 鼠标样式

在CSS中，对于鼠标样式的定义，我们有两种方式：浏览器鼠标样式和自定义鼠标样式。

浏览器鼠标样式

cursor: 取值;

实际开发中我们一般只会用到3个：default、pointer和text。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            background-color: hotpink;
            color:white;
            font-size:14px;
        }
        #div_default{cursor:default;}
        #div_pointer{cursor:pointer;}
    </style>
</head>
<body>
    <div id="div_default">鼠标默认样式</div>
    <div id="div_pointer">鼠标手状样式</div>
</body>
</html>

自定义鼠标样式

除了使用浏览器自带的鼠标样式，我们还可以使用cursor属性来自定义鼠标样式。只不过语法稍微有点不一样。

cursor: url(图片地址), 属性值;

这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是**.cur**，我们可以使用Photoshop来制作，小伙伴们自行搜索一下制作方法。

而这个“属性值”一般为3种：default、pointer和text。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            background-color: hotpink;
            color:white;
            font-size:14px;
        }
        #div_default{cursor:url(img/cursor/default.cur),default;}
        #div_pointer{cursor:url(img/cursor/pointer.cur),pointer;}
    </style>
</head>
<body>
    <div id="div_default">鼠标默认样式</div>
    <div id="div_pointer">鼠标手状样式</div>
</body>
</html>

使用自定义鼠标样式可以打造更有个性的个人网站，不仅美观大方，也能更好地匹配网站的风格。

十一、盒子模型

1.CSS盒子模型

在HTML中，我们学习了一个很重要的理论：块元素和行内元素。在这一节中，我们介绍CSS中极其重要的一个理论——CSS盒子模型。

在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。图21-1所示为一个CSS盒子模型的具体结构。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系（往往是margin）。

每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以看成一个盒子。

从上面我们可以知道，盒子模型的组成部分有4个，如下表所示。

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他3个部分都是可选的。

内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言，并不包括padding部分。

当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。

内边距

内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。

关于内边距的属性有5种：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding。使用这5种属性可以指定内容区与各方向边框之间的距离。

外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

外边距的属性也有5种：margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。

同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”。

边框

在CSS盒子模型中，边框跟我们之前学过的边框是一样的。

边框属性有border-width、border-style、border-color以及综合了3类属性的简写边框属性border。

其中，border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。下面两段代码是等价的：

/*代码1*/
border-width:1px;
border-style:solid;
border-color:gray;
/*代码2*/
border:1px solid gray;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin:40px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>

在这个例子中，我们把div元素看成一个盒子，则“绿叶学习网”这几个字就是内容区（content），文字到边框的距离就是内边距（padding），而边框到其他元素的距离就是（margin）。此外还有几点要说明一下。

在这个例子中，display:inline-block表示将元素转换为行内块元素（即inline-block），其中inline-block元素的宽度是由内容区撑起来的。我们之所以在这个例子中将元素转换为inline-block元素，也是为了让元素的宽度由内容区撑起来，以便更好地观察。不过display也是一个非常复杂的属性，我们在CSS进阶教程中再详细介绍。

2.宽高：width、height

从如下图所示的CSS盒子模型中我们可以看出，元素的宽度（width）和高度（height）是针对内容区而言的。很多初学的小伙伴容易把padding也认为是内容区的一部分，这样理解是错的。

width: 像素值;
height: 像素值;

只有块元素才可以设置width和height，行内元素是无法设置width和height的。（我们这里不考虑inline-block元素）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div,span
        {
            width:100px;
            height:50px;
        }
        div{border:1px solid red;}
        span{border:1px solid blue;}
    </style>
</head>
<body>
    <div></div>
    <span></span>
</body>
</html>

div是块元素，因此可以设置width和height。span是行内元素，因此不可以设置width和height。

块元素设置的width和height会生效。此外，要是没有给块元素设置width，那么块元素就会延伸到整一行

行内元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起来。

在CSS中，我们可以使用display属性来将行内元素转换为块元素，也可以将块元素转换为行内元素。

3.边框：border

在“边框样式”这一章中，我们已经深入学习了边框的属性。在实际开发中，我们只需要注意一点就行：对于border属性，更多使用的是简写形式。

border: 1px solid red;

第1个值指的是边框宽度（border-width），第2个值指的是边框外观（border-style），第3个值指的是边框颜色（border-color）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:80px;
            border: 2px dashed red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.内边距：padding

内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。

padding局部样式

从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding-top:20px;
            padding-right:40px;
            padding-bottom:60px;
            padding-left:80px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>padding局部样式</div>
</body>
</html>

padding简写形式

跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。padding写法有3种，如下所示。

padding: 像素值;
padding: 像素值1 像素值2;
padding: 像素值1 像素值2 像素值3 像素值4;

padding:20px表示4个方向的内边距都是20px。

padding:20px 40px表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。

padding:20px 40px 60px 80px表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:40px 80px;
            margin:40px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>padding简写形式</div>
</body>
</html>

如果你想要让文本在一个元素内部居中，可以使用padding来实现

5.外边距：margin

外边距margin，指的是边框到“父元素”或“兄弟元素”之间的那一部分。外边距是在元素边框的外部的。

margin局部样式

从CSS盒子模型中我们可以看出，外边距分为4个方向：margin-top、margin-right、margin-bottom、margin-left。

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            display: inline-block;      /*将块元素转换为inline-block元素*/
            border:1px solid blue;
        }
        #son
        {
            display:inline-block;       /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">margin局部样式</div>
    </div>
</body>
</html>

当只有父元素时，该元素设置的margin就是相对于父元素之间的距离。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            display: inline-block;      /*将块元素转换为inline-block元素*/
            border:1px solid blue;
        }
        #son
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
        .brother
        {
            height:50px;
            background-color:lightskyblue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="brother"></div>
        <div id="son">margin局部样式</div>
        <div class="brother"></div>
    </div>
</body>
</html>

当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的margin就是相对于兄弟元素而言。如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言。

padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。

margin简写形式

跟padding一样，margin也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。其中margin写法也有3种，如下所示。

margin: 像素值;
margin: 像素值1 像素值2;
margin: 像素值1 像素值2 像素值3 像素值4;

margin:20px表示4个方向的外边距都是20px。

margin:20px 40px表示margin-top和margin-bottom为20px，margin-right和margin-left为40px。

margin:20px 40px 60px 80px表示margin-top为20px，margin-right为40px，margin-bottom为60px，margin-left为80px。大家按照顺时针方向记忆就可以了。

浏览器审查元素

怎样才可以快速查看元素的盒子模型信息呢？我们可以通过浏览器自带功能“审查元素”来实现。

【第1步】：鼠标移到你想要的元素上面，然后按一下右键，选择“检查”（或者按Ctrl+Shift+I），如下图所示。

【第2步】：在弹出的控制台中，我们可以找到该元素的盒子模型，如下图所示。

十二、浮动布局

1.文档流简介

在学习浮动布局和定位布局之前，我们先来了解“正常文档流”和“脱离文档流”。深入了解这两个概念，是学习浮动布局和定位布局的理论前提。

正常文档流

正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。我们先来看一下正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”也就是说，正常文档流指的就是默认情况下页面元素的布局情况。

脱离文档流

脱离文档流，指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说，如果我们想要改变正常文档流，可以使用有两种方法：浮动和定位。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
    </div>
</body>
</html>

这是正常文档流的显示

设置浮动

当我们为第2、3个div元素设置左浮动时，在浏览器预览效果如下图所示。

设置定位

当我们为第3个div元素设置绝对定位的时候，浏览器预览效果如下图所示。

2.浮动

我们已经知道浮动（即float属性）是怎样一回事了。在传统的印刷布局中，文本可以按照实际需要来围绕图片（回想你看过的书的排版就知道了）。我们一般把这种方式称为“文本环绕”。在前端开发中，使用了浮动的页面元素其实就像在印刷布局里被文字包围的图片一样。这样对比，就很好理解了。

浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。例如我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。

float: 取值;

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
        }
        #son1
        {
            background-color:hotpink;
            /*这里设置son1的浮动方式*/
        }
        #son2
        {
            background-color:#FCD568;
            /*这里设置son2的浮动方式*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
    </div>
</body>
</html>

在这个代码中，定义了3个div块：一个是父块，另外两个是它的子块。为了便于观察，我们为每一个块都加上了背景颜色，并且让块与块之间加上一定的外边距。

从上图可以看出，如果两个子块都没有设置浮动，由于div是块元素，因此会各自向右延伸，并且自上而下排列。

设置第1个div浮动

#son1
{
    background-color:hotpink;
    float:left;
}

由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。接着相邻的下一个div元素（box2）就会紧贴着box1，这是由于浮动引起的效果。

设置第2个div浮动

#son2
{
    background-color:#FCD568;
    float:left;
}

由于box2变成了浮动元素，因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度。如果box2后面还有其他元素，则其他元素也会紧贴着box2。

怎么父元素变成一条线了呢？其实这是浮动引起的问题。至于怎么解决，我们在下一节会介绍。

浮动，可以使得元素移到左边或者右边，并且允许后面的文字或元素环绕着它。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局，如。图22-8所示。也就是说，如果你想要实现两列并排或者多列并排效果时，首先考虑的是使用浮动来实现。

3.清除浮动

浮动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。

clear: 取值;

属性值	说明
left	清除左浮动
right	清除右浮动
both	同时清除左浮动和右浮动

我们只需要记住clear:both就可以了。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
        }
        #son1
        {
            background-color:hotpink;
            float:left;          /*左浮动*/
        }
        #son2
        {
            background-color:#FCD568;
            float:right;        /*右浮动*/
        }
        .clear{clear:both;}
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义clear:both来清除浮动。说白了，前面小弟干了太多坏事，后面得大哥出面才能解决。在实际开发中，凡是用了浮动之后发现有什么不对劲的地方，首先应该检查的是有没有清除浮动。

事实上，清除浮动不仅仅只有clear:both，还有overflow:hidden，以及更为常用的伪元素。当然，这些都是后话了。作为初学者，我们只需要掌握clear:both就可以了。

十三、定位布局

1.简介

CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。其中，定位布局共有4种方式。

这4种方式都是通过position属性来实现的，其中position属性取值如下表所示。

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值）

2.固定定位：fixed

在CSS中，我们可以使用“position:fixed;”来实现固定定位。所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

position:fixed;是结合top、bottom、left和right这4个属性一起使用的。其中，position:fixed使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。注意，这4个值的参考对象是浏览器的4条边。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #first
        {
            width:120px;
            height:1800px;
            border:1px solid gray;
            line-height:600px;
            background-color:#B7F1FF;
        }
        #second
        {
            position:fixed;    /*设置元素为固定定位*/
            top:30px;          /*距离浏览器顶部30px*/
            left:160px;        /*距离浏览器左部160px*/
            width:60px;
            height:60px;
            border:1px solid silver;
            background-color:hotpink;
        }
    </style>
</head>
<body>
    <div id="first">无定位的div元素</div>
    <div id="second">固定定位的div元素</div>
</body>
</html>

注意一下，我们在这里只使用了top和left属性来设置元素相对于浏览器顶边和左边的距离就可以准确定位该元素的位置了。top、bottom、left和right这4个属性不必全部用到

固定定位最常用于实现“回顶部特效”，这个效果非常经典。为了更好的用户体验，绝大多数网站都用上。此外，回顶部特效还可以做得非常酷炫

3.相对定位：relative

在CSS中，我们可以使用“position:relative;”来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

position:relative;也是结合top、bottom、left和right这4个属性一起使用的，其中，position:relative;使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始的位置。

top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。这4个值的参考对象是该元素的原始位置。

注意，在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            margin-top:30px;
            margin-left:30px;
            border:1px solid silver;
            background-color: lightskyblue;
        }
        #father div
        {
            width:100px;
            height:60px;
            margin:10px;
            background-color:hotpink;
            color:white;
            border:1px solid white;
        }
        #son2
        {
            /*这里设置son2的定位方式*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">第1个无定位的div元素</div>
        <div id="son2">相对定位的div元素</div>
        <div id="son3">第2个无定位的div元素</div>
    </div>
</body>
</html>

我们为第2个div元素加入相对定位，CSS代码如下：

#son2
{
    position:relative;
    top:20px;
    left:40px;
}

4.绝对定位：absolute

在CSS中，我们可以使用“position:absolute;”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。

一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

position:absolute;是结合top、bottom、left和right这4个属性一起使用的，其中position:absolute使得元素成为绝对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。默认情况下，这4个值的参考对象是浏览器的4条边。

对于前面3种定位方式，我们现在可以总结了：默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            padding:15px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        #father div{padding:10px;}
        #son1{background-color:#FCD568;}
        #son2
        {
            background-color: hotpink;
            /*在这里添加son2的定位方式*/   
        }
        #son3{background-color: lightskyblue;}
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
    </div>
</body>
</html>

我们为第2个div元素加入绝对定位，CSS代码如下：

#son2
{
    position:absolute;
    top:20px;
    right:40px;
}

1、相对定位： a、不影响元素本身的特性； b、不使元素脱离文档流（元素移动之后原始位置会被保留）； c、相对于其正常位置进行定位。如果没有定位偏移量，对元素本身没有任何影响； d、提升层级

2、绝对定位： a、使元素完全脱离文档流； b、使内嵌支持宽高； c、块属性标签内容撑开宽度； d、如果有定位父级相对于第一个定位父级发生偏移，没有定位父级相对于document发生偏移； e、相对定位一般都是配合绝对定位元素使用； f、提升层级

**3、固定定位：**相对于浏览器窗口进行定位