第一章 CSS基础
首先来回答2个问题。
1.CSS是什么？
CSS是用来控制网页外观的一门技术。
2.前端最核心的技术是什么？他们分别是用来干吗的？
前端最核心的技术有：HTML、CSS、JavaScript。
HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。
CSS引入方式
有三种方式：外部样式表、内部样式表、行内样式表。
1.外部样式表
把CSS代码和HTML代码单独放在不同文件中，然后在HTML文件中使用link标签来引用CSS文件。
当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，就可以通过更改一个CSS文件来改变整个网站的外观。
外部样式表在单独文件中定义，然后在HTML文件的<head></head>标签对中使用link标签来引用。
语法：
<link rel="stylesheet" type="text/css" href="文件路径" />解释：
rel（relative）取值是固定的，即stylesheet，表示引入的是一个样式表文件（CSS文件）。
type属性的取值也是固定的，即"text/css"，表示这是标准的CSS。
href属性表示CSS文件的路径。
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>注意：外部样式表必须用link标签来引入，link标签放在head标签内。
2.内部样式表
把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签对之间，style标签放在head标签内部。
语法：
<style type="text/css">……
</style>type="text/css"是必须添加的，表示这是标准的CSS
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title><style type="text/css">div{color:green;}</style>
</head>
<body><div>绿叶，给你初恋般的感觉。</div><div>绿叶，给你初恋般的感觉。</div><div>绿叶，给你初恋般的感觉。</div>
</body>
</html>div{clolr:green}这句中的div属于CSS中的选择器，后续会学到。
注意：内部样式表CSS样式必须在style标签内定义，而style标签放在head标签内。
3.行内样式表
把HTML代码和CSS代码放到同一个HTML文件。行内样式表的CSS是“标签的style属性”中定义的。（注意和内部样式表style区分，这里的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>
章节测试
下面说法中，正确的是（ C）。
A．现在已经是CSS3时代了，没必要再去学CSS2
B．一般使用script标签来引用外部样式表
C．在实际开发中，一般使用外部样式表的多
D．内部样式表和行内样式表在实际开发中一点用处都没有
第二章 CSS选择器
在HTML中，id和class是元素最基本的两个属性。id和class都可以用来选择元素。
1.元素的id和class
id属性
id属性具有唯一性，在一个页面中相同的id只能出现一次。如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div id="content">存在即合理</div><p id="content">存在即合理</p>
</body>
</html>这段代码有问题，因为出现了多个相同的id
class属性
可以为同一个页面的相同元素或者不同元素设置相同的class，然后使相同class的元素具有相同的CSS样式。
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div class="content">存在即合理</div><p class="content">存在即合理</p>
</body>
</html>这段代码是正确的。
对于id和class的理解：
id就像你的身份证号，而class就像你的名字。身份证号是唯一的，但是两个人的名字却有可能是一样的。
2.CSS选择器
先来看一段代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div>绿叶学习网</div><div>绿叶学习网</div><div>绿叶学习网</div>
</body>
</html>
对于这个例子，如果我们只想将第2个div文本颜色变为红色，该怎么实现呢？
我们肯定要通过一种方式来“选中”第2个div，只有选中了才可以为其改变颜色 。
像上面这种选中你想要的元素的方式，我们称之为“选择器”。
选择器，就是指用一种方式把你想要的那个元素选中，只有把它选中了，你才可以为这个元素添加CSS样式。
CSS选择器非常多，这里只讲最实用的5种：
元素选择器、id选择器、class选择器、后代选择器、群组选择器。
CSS选择器的格式是怎样的？
选择器
{属性1 : 取值1;……属性n : 取值n;
}1.元素选择器
元素选择器，就是选中相同的元素，然后对相同的元素定义同一个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>
2.id选择器
选中id相同的元素进行同一种操作。
语法：
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#lvye{color:red;}</style>
</head>
<body><div>绿叶学习网</div><div id="lvye">绿叶学习网</div><div>绿叶学习网</div>
</body>
</html>
3.class选择器
我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。
class名前面必须要加上前缀英文句号（.），否则该选择器无法生效。类名前面加上英文句号，表明这是一个class选择器。
语法：
举例：（为相同元素定义class）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.lv{color:red;}</style>
</head>
<body><div>绿叶学习网</div><div class="lv">绿叶学习网</div><div class="lv">绿叶学习网</div>
</body>
</html>
.lv{color:red;}表示选中class="lv"的所有元素，然后定义它们的文本颜色为红色。
举例：（为不同元素定义class）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.lv{color:red;}</style>
</head>
<body><div>绿叶学习网</div><p class="lv">绿叶学习网</p><span class="lv">绿叶学习网</span><div>绿叶学习网</div>
</body>
</html>p和span是两个不同的元素，我们为这两个不同的元素设置相同的class，这样就可以同时为p和span定义相同的CSS样式了。
注意：如果要为两个或多个元素定义相同的样式，建议使用class选择器，因为这样可以减少大量重复代码
4.后代选择器
后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素（如“孙元素”）。
语法：
父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素
举例：
<!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>
5.群组选择器
群组选择器，指的是同时对几个选择器进行相同的操作
语法：
对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效
举例1：
<!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> 
举例2：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#lvye,.lv,span{color:red;}</style>
</head>
<body><div id="lvye">绿叶学习网</div><div>绿叶学习网</div><p>绿叶学习网</p><p class="lv">绿叶学习网</p><span>绿叶学习网</span>
</body>
</html>
章节测试
一、单选题
1．每一个样式声明之后，要用（ ）表示一个声明的结束。
A．逗号 B．分号 C．句号 D．顿号
2．下面哪一项是CSS正确的语法结构？（ ）
A．body:color=black
B．{body;color:black}
C．{body:color=black;}
D．body{color:black;}
3．下面有关id和class的说法中，正确的是（ ）。
A．id是唯一的，不同页面中不允许出现相同的id
B．id就像你的名字，class就像你的身份证号
C．同一个页面中，不允许出现两个相同的class
D．可以为不同的元素设置相同的class来为他们定义相同的CSS样式
4．下面有关选择器的说法中，不正确的是（ ）。
A．在class选择器中，我们只能对相同的元素定义相同的class属性
B．后代选择器选择的不仅是子元素，还包括它的其他后代元素（如“孙元素”）
C．群组选择器可以对几个选择器进行相同的操作
D．想要为某一个元素定义样式，我们可以使用不同的选择器来实现
二、编程题下面有一段代码，如果我们想要选中所有的div和p，请用至少两种不同的选择器方式来实现，并且选出最简单的一种。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><div></div><p></p><p></p><strong></strong><span></span>
</body>
</html>答案：
一、BDDA
二、示例代码
<!--class选择器-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.a{color: blue;}</style>
</head>
<body><div class="a">HELLO!</div><p class="a">你好</p><p class="a">hello</p><strong>nice</strong><span>today</span>
</body>
</html><!--id选择器-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#a{color: red;}</style>
</head>
<body><div id="a">HELLO!</div><p id="a">你好</p><p id="a">hello</p><strong>nice</strong><span>today</span>
</body>
</html><!--群组选择器-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div,p{color: red;}</style>
</head>
<body><div>HELLO!</div><p>你好</p><p>hello</p><strong>nice</strong><span>today</span>
</body>
</html>群组选择器最简单！
第三章 字体样式
本章要学习的字体样式属性：
1.字体类型：font-family
语法：
font-family: 字体1,字体2,...,字体N;注意：如果不定义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>
问：为什么要定义多个字体类型？
答：有些字体可能电脑上没有安装。定义多个就会从前往后一个一个寻找，直到找到在电脑上安装的字体。如果定义的字体都没有安装，就会使用默认字体。
2.字体大小：font-size
语法：
font-size:像素值;px是什么？
px全称pixel（像素），1像素指的是一张图片中最小的点，或者是计算机屏幕最小的点。同样尺寸大小的图像，像素数量越多，图像包含的细节就越丰富，看起来也就越清晰。
实际上，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>
3.字体粗细：font-weight
语法：
font-weight:取值;font-weight属性取值有两种：一种是“100~900的数值”，另一种是“关键字”。其中，关键字取值如下：
记住bold就行了。
举例：取值为数值
<!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>
举例：取值为关键字
<!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>
4.字体风格：font-style
语法：
font-style:取值;font-size属性取值如下：
举例：
<!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> 
oblique和italic效果一样，有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
5.字体颜色：color
语法：
color:颜色值;这里介绍color属性的两种取值：一种是“关键字”，另一种是“十六进制RGB值。
举例：关键字
<!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
<!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>
记住两个：#000000是黑色，#FFFFFF是白色。
如何获取十六进制的RGB？
按下
Win + R键，输入mspaint并回车，打开画图工具获取。
当然了，还有其他的方法，可以自己寻找。
6.CSS注释
语法：
/*注释的内容*/举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">/*这是CSS注释*/p{color:pink;}</style>
</head>
<body><!--这是HTML注释--><p>记忆之所以美，是因为有现实的参照。</p>
</body>
</html>章节测试
一、单选题
1．CSS中可以使用（ ）属性来定义字体粗细。
A．font-family B．font-size C．font-weight D．font-style
2．如果想要实现字体颜色为白色，可以使用定义color属性值为（ ）。
A．#000000 B．#FFFFFF C．wheat D．black
3．下面有关字体样式，说法正确的是（ ）。
A．font-family属性只能指定一种字体类型
B．font-family属性可以指定多种字体类型，并且浏览器是按照从右到左的顺序选择的
C．在实际开发中，font-size很少取“关键字”作为属性值
D．在实际开发中，font-weight属性一般取100~900的数值
4．下面选项中，属于CSS的正确注释方式是（ ）。
A．//注释内容 B．/*注释内容*/ C．<!--注释内容--> D．//注释内容//
二、编程题为下面这段文字定义字体样式，要求字体类型指定多种、大小为14px、粗细为粗体、颜色为蓝色。“有规划的人生叫蓝图，没规划的人生叫拼图。”
答案：
一、CBDB
二、示例代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">p {font-family: Arial, "微软雅黑", "Times New Roman";font-size: 14px;font-weight: bold;color: blue;}</style></head><body><p>“有规划的人生叫蓝图，没规划的人生叫拼图。”</p></body></html>
第四章 文本样式
常见的文本样式如下：
1.首行缩进：text-indent
可以抛弃使用一大堆 来实现首行缩进了！
语法 ：
text-indent:像素值;举例：
<!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倍。
2.水平对齐：text-align
在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。
text-align:取值;text-align属性取值有3个：
举例：
<!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>
3.文本修饰：text-decoration
在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。
语法：
text-decoration:取值;text-decoration取值有四个：
在前端开发中，外观一般用CSS来实现，而不是使用HTML的标签。
举例：
<!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>
怎么去除超链接的下划线？
举例：
<!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>
</body>
</html>
用“text-decoration:none;”去掉了a元素中的下划线。
4.大小写：text-transform
在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言的，因为中文不存在大小写之分。
语法：
text-transform:取值;text-transform有四个取值：
举例：
<!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> 
5.行高：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>
6.间距：letter-spacing、word-spacing
（1）.字间距
在CSS中，我们可以使用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>
（2）.词间距
在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。
word-spacing:像素值;词间距只针对英文单词而言。
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{word-spacing:0px;}#p2{word-spacing:3px;}#p3{word-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>
章节测试
一、单选题
1．CSS使用（ ）属性来定义段落的行高。
A．height B．align-height C．line-height D．min-height
2．CSS使用（ ）属性来定义字体下划线、删除线以及顶划线效果。
A．text-decoration B．text-indent C．text-transform D．text-align
3．如果想要实现如下图所示的效果，我们可以使用（ ）来实现。
A．text-decoration:none;
B．text-decoration:underline;
C．text-decoration:line-through;
D．text-decoration:overline;
4．下面有关文本样式的说法中，正确的是（ ）。
A．如果想要让段落首行缩进2个字的间距，text-indent值应该是font-size值的4倍
B．“text-align:center;”不仅可以实现文本水平居中，还可以实现图片水平居中
C．我们可以使用line-height来实现设置一个段落的高度
D．我们可以使用“text-transform:uppercase;”来将英文转换为小写形式
二、编程题下面有一段代码，请在这段代码的基础上，使用正确的选择器以及这两章学到的字体样式、文本样式来实现如图所示的效果。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p><p>Remember: no pain,no gain！</p>
</body>
</html>答案：
一、 CACB
二、示例代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">span{text-decoration: underline;}p{text-transform: uppercase;}</style>
</head>
<body><p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p><p>Remember: no pain,no gain！</p>
</body>
</html>第五章 边框样式
几乎所有的元素都可以定义边框。
定义边框样式需要设置3个方面：
边框的宽度
边框的外观（实线、虚线等）
边框的颜色
1.整体样式：
border-width
用于定义边框的宽度，取值是一个像素值。
border-style
用于定义边框的外观，常见取值如下：
border-color
用于定义边框的颜色，取值可以是“关键字”或“十六进制RGB值”。
举例：为div加上边框
<!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>
举例：为img加上边框
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">img{border-width: 2px;border-style:solid;border-color:red;}</style>
</head>
<body><img src="img/haizei.png" alt="海贼王之索隆">
</body>
</html>
简写形式：
想要为一个元素定义边框，我们需要完整地给出border-width、border-style和bordercolor。这种写法代码量过多，费时费力。不过CSS为我们提供了一种简写形式。
border:1px solid red;举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{border:1px solid red;}</style>
</head>
<body><div>绿叶学习网，给你初恋般的感觉。</div>
</body>
</html>
2.局部样式
（1）.上边框border-top
border-top-width:1px;
border-top-style:solid;
border-top-color:red;简写：
border-top:1px solid red;（2）.下边框border-bottom
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;简写：
border-bottom:1px solid red;（3）.左边框border-left
border-left-width:1px;
border-left-style:solid;
border-left-color:red;简写：
border-left:1px solid red;（4）.右边框border-right
border-right-width:1px;
border-right-style:solid;
border-right-color:red;简写：
border-right:1px solid red;注意：不管是整体样式，还是局部样式，我们都需要设置3个方面：边框宽度、边框外观、边框颜色。
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:100px; /*div元素宽为100px*/height:60px; /*div元素高为60px*/border-top:2px solid red; /*上边框样式*/border-right:2px solid yellow; /*右边框样式*/border-bottom:2px solid blue; /*下边框样式*/border-left:2px solid green; /*左边框样式*/}</style>
</head>
<body><div></div>
</body>
</html>
举例：
<!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>
注意：当去除某条边框时，令其宽度取值为0px，其余两个值直接省略。
此外，“border-bottom:0px;”“border-bottom:0;”和“border-bottom:none;”是等价的
章节测试
单选题
1．如果我们想要定义某一个元素的右边框，宽度为1px，外观为实线，颜色为红色，正确写法应该是（ ）。
A．border:1px solid red;
B．border:1px dashed red;
C．border-right:1px solid red;
D．border-right:1px dashed red;
2．如果我们想要去掉某一个元素的上边框，下面写法中，不正确的是（ ）。
A．border-top:not; B．border-top:none; C．border-top:0; D．border-top:0px;
答案：CA
第六章 列表样式
1.列表项符号：list-style-type
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号的。
语法：
list-style-type:取值;
举例：
<!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> 
举例：无序列表
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">ul{list-style-type:circle;}</style>
</head>
<body><h3>无序列表</h3><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
</body>
</html>
2.去除列表项符号
在CSS中，我们也是使用list-style-type属性来去除有序列表或无序列表的列表项符号的。
语法：
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；”！
3.列表项图片：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>
章节测试
一、单选题
1．在真正的开发工作中，对于如图所示的列表项符号，最佳的实现方法是（ ）。
A．list-style-type B．list-style-image C．字体图标 D．background-image
2．下面对于列表的说法中，叙述错误的是（ ）。
A．list-style-type属性是在li元素中设置的
B．我们可以使用“list-style-type:none;”去除列表项符号
C．对于大多数列表，我们都是使用ul元素，而不是使用ol元素
D．不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号
二、编程题定义一个列表，每一个列表项都是一个超链接，并且要求去除列表项符号及超链接下划线，超链接文本颜色为粉红色，并且单击某一个列表项就会以新窗口的形式打开，如图
答案：
一、CA
二、代码示例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"/><title></title><style type="text/css">ul{list-style-type: none;}a{text-decoration: none;color: pink;}</style></head><body><ul><li><a href="https://www.baidu.com/">Top1：百度</a></li><li><a href="https://www.taobao.com/">Top2：淘宝</a></li><li><a href="http://www.sina.com.cn/">Top3：新浪</a></li><li><a href="https://www.163.com/">Top4：网易</a></li><li><a href="https://www.sohu.com/">Top5：搜狐</a></li></ul></body>
</html>
第七章 表格样式
1.表格标题位置：caption-side
语法：
caption-side:取值;默认表格标题在表格上方。
在CSS中，我们可以使用caption-side属性来定义表格标题的位置
caption-side:取值;取值只有两个：
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">table,th,td{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:取值;取值有两个：
举例：
<!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．CSS可以使用（ ）属性来合并表格边框。
A．border-width B．border-style C．border-collapse D．border-spacing
2．下面有关表格样式，说法不正确的是（ ）。
A．border-collapse只限用于表格，不能用于其他元素
B．caption-side、border-collapse、border-spacing一般在table元素中设置
C．可以使用“border-collapse: separate;”来将表格边框合并
D．如果要为表格添加边框，我们一般需要同时对table、th、td这几个元素进行设置
答案：CC
第八章 图片样式
1.图片大小
语法：
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>
2.图片边框
在“第五章 边框样式”中我们已经详细介绍了border属性。对于图片的边框，我们也是使用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.图片对齐
（1）.水平对齐
在CSS中，我们可以使用text-align属性来定义图片的水平对齐方式。
语法：
text-align:取值;其取值有三个：
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属性
（2）.垂直对齐
在CSS中，我们可以使用vertical-align属性来定义图片的垂直对齐方式。
语法：
vertical-align:取值;取值有四个：
举例：
<!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>
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:100px;height:80px;border:1px solid silver;}.div1{vertical-align:top;}.div2{vertical-align:middle;}.div3{vertical-align:bottom;}.div4{vertical-align:baseline;}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><div class="div4"><img src="img/girl.gif" alt=""/></div>
</body>
</html>
为什么图片没有垂直对齐？
其实，大家误解了vertical-align这个属性。vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。
4.文字环绕
在CSS中，我们可以使用float属性来实现文字环绕图片的效果。
语法：
float:取值;float的取值只有两个：
举例：
<!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可以使用（ ）属性来实现图片水平居中。
A．text-indent B．text-align C．vertical-align D．float
2．下面有关图片样式的说法正确的是（ ）。
A．由于img元素不是块元素，因此设置width和height无效
B．可以使用vertical-align属性来实现图片在div元素中垂直居中
C．“text-align:center”不仅能实现图片水平居中，还能实现文本水平居中
D．可以使用text-align实现文字环绕图片的效果
答案：BD
第九章 背景样式
在CSS中，背景样式包括两个方面：一个是“背景样色”，另外一个是“背景图片。
在CSS中，定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，往往涉及以下属性：
1.背景颜色：background-color
在CSS中，我们可以使用background-color属性来定义元素的背景颜色。
语法：
background-color:颜色值;颜色值有两种，一种是“关键字”，另外一种是“十六进制RGB值”。其中，关键字指的是颜色的英文名称，如red、green、blue等。
举例：
<!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>
2.背景图片样式：background-image
在CSS中，我们可以使用background-image属性来为元素定义背景图片。
语法：
background-image:url（图片路径）;和引入图片（即img标签）一样，引入背景图片也需要给出图片路径才可以显示。
举例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div{width:250px;height:170px;background-image: url（img/haizei.png）;}</style>
</head>
<body><div></div>
</body>
</html>
背景图片与图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。
下面这两种引入背景图片的方法都正确：
/*方式1：路径加上引号*/
background-image: url（"img/haizei.png"）;
/*方式2：路径没加引号*/
background-image: url（img/haizei.png）;3.背景图片重复：background-repeat
在CSS中，我们可以使用background-repeat属性来定义背景图片的重复方式。
语法：
background-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
注意：元素的宽度和高度必须大于背景图片的宽度和高度，这样才会有重复效果
