层叠样式表简称为CSS，它为HTML或XML标记语言提供了一种样式描述，不仅可以静态地修饰网页，还可以配合脚本编程语言动态地对网页各元素进行格式化，能够让原有的网站变得趣味盎然。本文将对CSS核心基础知识进行解析并编写案例及编程。
爱校码
致力于少儿编程与软件工程的信息分享
一、CSS概述
1.1 CSS的语言特性
CSS的英文全称为Cascading Style Sheets，中文名称是层叠样式表。也可以将其定义为描述样式的计算机语言， 能够对网页中标记元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编程的能力。
CSS具有以下特性：
- 丰富的样式定义： CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
- 易于使用和修改： CSS可以将样式定义在HTML标记元素的style属性中，也可以将其定义在HTML文档头部的
<style>标记元素中，或者将样式通过标记<link />声明在一个专门的CSS文件中。 - 多页面应用： CSS可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表。这样就可以实现多个页面风格的统一。
- 层叠： 对一个标记元素多次设置一个样式，这将使用最后一次设置的属性值。后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
- 页面压缩： 将样式的声明单独放到CSS样式表中，可以大大的减小页面的体量，在加载页面时使用的时间也会大为的减少。
CSS样式表中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
1.2 CSS的发展历史
层叠样式表经历了从低版本向高版本发展的不同阶段：
- CSS1： 1996年12月，W3C发布了第一个有关样式的标准CSS1。包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
- CSS2： 1998年5月，CSS2正式推出，开始使用样式表结构。2004年2月，CSS2.1正式推出。它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。
- CSS3： CSS3是CSS技术的升级版本，早在2001年5月23日W3C完成了CSS3的工作草案，权威的CSS3标准还没有尘埃落定。但是各主流浏览器已经开始支持其中的绝大部分特性。
二、CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
CSS代码结构中的几个特点，具体如下：
- CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将
“选择器、属性和值”都采用小写的方式。 - 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但为了便于增加新样式最好保留。
- 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
- 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
- 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。
2.1 引入CSS样式表
2.1.1 行内式
行内式也称为内联样式，是通过标记元素的style属性来设置元素的样式，其基本语法格式如下：
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容</标记名>
该语法中style是标记元素的属性，实际上任何HTML标记元素都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记元素及嵌套在其中的子标记元素起作用。
清单 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行内式引入CSS样式表</title>
</head>
<body>
<h2 style="font-size: 20px; color: #ff7f50 ;">一带一路</h2>
</body>
</html>
上面案例中使用<h2>标记的style属性设置行内式CSS样式，用来修饰二级标题的字体大小和颜色。
行内式是通过标记的属性来控制样式的，这样并没有做到结构与表现的分离，所以一般很少使用。只有在样式规则较少且只在该标记元素上使用一次，或者需要临时修改某个样式规则时使用。
2.1.2 内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记元素定义，其基本语法格式如下：
<head>
<style>
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
该语法中，<style>标记元素一般位于<head>标记中<title>标记元素之后，也可以把它放在HTML文档的任何地方。
清单 2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式引入CSS样式表</title>
<style>
h2 {
text-align: center;
}
p {
font-size: 16px;
color: red;
text-decoration: underline;
text-align: center;
}
</style>
</head>
<body>
<h2>内嵌式引入CSS</h2>
<p>Web3.0概念掀起了市场追捧</p>
</body>
</html>
内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。
2.1.3 链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link rel="stylesheet" href="CSS文件的路径" />
</head>
该语法中，<link />标记元素需要放在<head>头部标记元素中，并指定标记元素的三个属性，具体如下：
- rel： 定义当前文档与被链接文档之间的关系，在这里需要指定为
“stylesheet”，表示被链接的文档是一个样式表文件。 - href： 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
- type： 定义所链接文档的类型，在这里需要指定为
“text/css”，表示链接的外部文件为CSS样式表。HTML 5 可以省略。
清单 3：html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链入式引入CSS样式表</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h2>链入式引入CSS</h2>
<p>航展歼-20全部换装国产发动机</p>
</body>
</html>
清单 4：css文件
h2 {
text-align: center;
}
p {
font-size: 16px;
color: red;
text-decoration: underline;
text-align: center;
}
2.2 CSS基础选择器
要先将CSS演示应用于特定的HTML标记元素，首先需要找到该目标的标记元素。在CSS中，执行这一任务的演示规则部分被称为选择器。在CSS中的基础选择器有标记选择器、类选择器、id选择器、通配符选择器、标记指定式选择器、后代选择器和并集选择器。
2.2.1 标记选择器
标记选择器是指用HTML标记元素名称作为选择器，按标记元素名称分类，为页面中某一类标记元素指定统一的CSS样式。其基本语法格式如下：
标记名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
例如：
p {
font-size:12px;
color:#666;
font-family:"微软雅黑";
}
上述CSS样式代码用于设置HTML页面中所有的段落文本：字体大小为12像素、颜色为#666、字体为“微软雅黑”。
标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是它的缺点，不能设计差异化样式。
2.2.2 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
该语法中，类名即为HTML标记元素的class属性值，大多数HTML标记元素都可以定义class属性。类选择器最大的优势是可以为标记元素对象定义单独或相同的样式。
清单 5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css类选择器的使用</title>
<style>
.cr{
color:red;
}
.cg{
color:green;
}
.fnt{
font-size: 22px;
}
p{
text-decoration: underline;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<h2 class="cr">世界互联网大会聚焦乌镇</h2>
<p class="cg fnt">新一代无线通信技术成为全球研究热点</p>
<p class="cr fnt">人机交互：智能应用场景加速落地</p>
<p>工业互联网：以数字化赋能产业链重构</p>
</body>
</html>
在上述清单中，为标题标记<h2>和第2个段落标记<p>添加类名class="cr"，并通过类选择器设置它们的文本颜色为红色。为第1个段落和第2个段落添加类名class="fnt"，并通过类选择器设置它们的字号为22像素，同时还对第1个段落应用类"cg"，将其文本颜色设置为绿色。然后，通过标记选择器统一设置所有的段落字体为微软雅黑、同时加下划线。
多个标记可以使用同一个类名，这样可以实现为不同类型的标记元素指定相同的样式。同时一个HTML元素也可以应用多个class类，设置多个样式，在HTML标记元素中多个类名之间需要用空格隔开。
注意:类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。
2.2.3 id选择器
id选择器使用“#”进行标识，后面紧跟标记元素的id属性值，其基本语法格式如下：
#id属性值{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
该语法中，标记元素的id属性值，大多数HTML标记元素都可以定义id属性，而id的属性值是唯一的，只能对应于DOM中某一个具体的标记元素。
清单 6：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器的使用</title>
<style>
#p1{
font-weight: bold;
}
#p2{
font-size: 24px;
}
#p3{
font-size: 30px;
}
#p4{
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body>
<p id="p1">游戏产业助力数字经济新动能</p>
<p id="p2">游戏技术被运用到工业仿真、智慧城市等多个不同的领域中</p>
<p id="p3">游戏科技在助力5G、芯片产业、人工智能等先进技术产业发展</p>
<p id="p4">游戏技术不断破圈、跨界，开始在更大范围内创造出更大的社会价值。</p>
</body>
</html>
2.2.4 通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
例如：
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
2.2.5 标记指定式选择器
标记指定式选择器又称交集选择器，是由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
清单 7：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标记指定式选择器的使用</title>
<style>
p{
color: blue;
}
.special{
color: green;
}
p.special{
color: red;
}
</style>
</head>
<body>
<h3 class="special">比亚迪达成为新能源汽车标志企业</h3>
<p>从“第1辆新能源汽车到第100万辆新能源汽车”用时13年。</p>
<p class="special">从“100万到200万”用时1年，从“200万到300万”仅用时半年。</p>
</body>
</html>
在清单7中，分别定义了<p>标记和.special类的样式，此外还单独定义了p.special，用于特殊的控制。标记指定式选择器p.special定义的样式仅仅适用于<p class="special">标记，而不会影响使用了special类的其他标记。
2.2.6 后代选择器
后代选择器用来选择标记元素或标记元素组的后代，其写法就是把外层标记元素写在前面，内层标记元素写在后面，中间用空格分隔。当标记元素发生嵌套时，内层标记元素就成为外层标记元素的后代。
清单 8：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器的使用</title>
<style>
strong{
color: blue;
}
p strong{
color: red;
}
</style>
</head>
<body>
<strong>香蕉 怎么成了全球流行的内涵符号？</strong>
<p>说起香蕉，可真不仅仅是样水果，可以从<strong>「蕉绿」想到「焦虑」</strong>，衍生出很多有意思的设计。</p>
</body>
</html>
在清单8中，定义了两个<strong>标记，并将第二个<strong>标记嵌套在<p>标记中，然后分别设置strong标记选择器和p strong后代选择器的样式。而后代选择器p strong定义的样式仅仅适用于嵌套在<p>标记元素中的<strong>标记元素，其他的<strong>标记元素不受影响。
后代选择器不限于使用两个标记元素，如果需要加入更多的标记元素，只需在标记元素之间加上空格即可。
2.2.7 并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。
清单 9：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器的使用</title>
<style>
h2,h3,p{
color: blue;
font-size: 14px;
}
h3,.p1,#p3{
text-decoration: underline;
}
</style>
</head>
<body>
<h2>5G 商用基站的通感融合测试验证</h2>
<h3>中兴通讯使用 4.9GHz 低频 5G 商用基站</h3>
<p class="p1">在一定环境下室外低空无人机最远感知距离超过 1400m。</p>
<p>实现无人机、车辆和行人多目标移动轨迹感知。</p>
<p id="p3">验证低频感知在低空安防、交通安全管理等应用可行性。</p>
</body>
</html>
在清单9的页面中有2个标题和3个段落，它们的字号和颜色相同。同时其中一个标题和两个段落文本有下划线效果，这时就可以使用并集选择器定义CSS样式。
首先使用由不同标记选择器通过逗号连接而成的并集选择器h2,h3,p，控制所有标题和段落的字号和颜色。然后使用由标记、类、id选择器通过逗号连接而成的并集选择器h3,.p1,#p3，定义某些文本的下划线效果。
使用并集选择器定义样式与对各个基础选择器单独定义样式效果完全相同，而且这种方式书写的CSS代码更简洁、直观。
三、CSS盒子模型
盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
3.1 认识盒子模型
3.1.1 盒子模型的定义
所谓盒子模型就是把HTML页面中的标记元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由标记元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。如图所示：
3.1.2 盒子模型的应用
清单 10：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型的使用</title>
<style>
.box{
width:200px;
height:50px;
border:15px solid red;
background:#CCC;
padding:30px;
margin:20px;
}
</style>
</head>
<body>
<p class="box">教育部：及时淘汰不适应社会需要的学科专业</p>
</body>
</html>
3.2 div标记元素的盒子模型应用
div是英文division的缩写，意为“分割、区域”。<div>标记元素简单而言就是一个区块容器块标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、图像等各种网页标记元素，也就是说大多数HTML标记元素都可以嵌套在<div>标记元素中，而且，<div>标记元素中还可以嵌套多层的<div>标记元素。
<div>标记元素非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。
清单 11：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div标记盒子模型</title>
<style>
.one {
width: 450px;
height: 30px;
line-height: 30px;
background: #FCC;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 3px 5px 3px 5px;
margin:20px auto;
}
.two {
width: 450px;
height: 100px;
background: #0F0;
font-size: 14px;
text-indent: 2em;
padding: 3px 5px 3px 5px;
margin:20px auto;
}
</style>
</head>
<body>
<div class="one">
中国究竟多重要并且受欢迎，G20提供了一面镜子
</div>
<div class="two">
<p>中国正在走近世界舞台的中央，也是这个舞台上最受欢迎的主角之一，是谦逊、友好的实力派，散发出挡不住的吸引力。</p>
</div>
</body>
</html>
3.3 盒子的宽与高
网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父标记元素的百分比，实际工作中最常用的是像素值。
注意：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />标记除外）。
清单 12：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型的宽度与高度</title>
<style>
.box {
width: 200px;
height: 80px;
background: #CCC;
border: 8px solid #00f;
}
</style>
</head>
<body>
<p class="box">二十国集团领导人峰会G20</p>
</body>
</html>
3.4 盒子模型相关属性
理解了盒子模型的结构后，要想自如地控制页面中每个盒子的样式，还需要掌握盒子模型的相关属性。
3.4.1 边框模型
在网页设计中，常常需要给元素设置边框效果。CSS边框顺序包括边框样式属性、边框宽度属性、边框颜色属性及边框的综合属性。同时为了进一步满足设计需求，CSS3中还增加了许多新的属性，如圆角边框及图片边框等属性。边框属性如下所示：
设置内容 样式属性 常用属性值
边框样式 border-style:上 [右 下 左]; none, solid, dashed, dotted, double
边框宽度 border-width:上 [右 下 左]; 像素值
边框颜色 border-color:上 [右 下 左]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框 border:宽度 样式 颜色;
圆角边框 border-radius:水平半径/垂直半径; 像素值或百分比
图片边框 border-images:路径/宽度/扩展距离;
1.边框样式（border-style）
在CSS属性中，border-style属性用于设置边框样式。其基本语法格式如下：
border-style:上边[右边 下边 左边];
border-style属性的常用属性值有四个，分别用于定义不同的显示样式，具体如下：
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
清单 13：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框样式</title>
<style>
/* 4条边框相同 -双实线 */
h2{
border-style:double;
}
/* 上下为点线，左右为实线 */
.p1{
border-style:dotted solid;
}
/* 上为实线，左右为点线，下为虚线 */
.p2{
border-style: solid dotted dashed;
}
</style>
</head>
<body>
<h2>汽车所用芯片</h2>
<p class="p1">新的应用有储能、逆变器等，从没有到有，是一个净增量。</p>
<p class="p2">这类芯片对质量的要求极高，需要花功夫去满足这个市场。</p>
</body>
</html>
在清单13中使用边框样式border-style的综合和单边属性，设置标题和段落文本的边框样式。这里要注意，由于兼容性的问题，在不同的浏览器中点线dotted和虚线dashed的显示样式可能会略有差异。
2.边框宽度（border-width）
border-width属性用于设置边框的宽度，其基本语法格式如下：
border-width:上边[右边 下边 左边];
在上面的语法格式中，border-width属性常用取值单位为像素px。并且遵循值复制的原则，其属性值可以设置1~4个，即一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左。
清单 14：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框宽度</title>
<style>
/* 边框宽度—3px。边框样式—单实线。 */
.p1{
border-width:3px;
}
/* 边框宽度—上下3px，左右1px。边框样式—单实线。 */
.p2{
border-width:3px 1px;
}
/* 边框宽度—上3px，左右1px，下2px。边框样式—单实线。 */
.p3{
border-width:3px 1px 2px;
}
/* 综合设置边框样式 */
p{
border-style:solid;
}
</style>
</head>
<body>
<p class="p1">第二十一届中国互联网大会在深圳召开</p>
<p class="p2">大会以“发展数字经济 促进数字文明”为主题</p>
<p class="p3">涵盖工业互联网、算力基础设施、下一代互联网发展与应用等热点话题。</p>
</body>
</html>
3.边框颜色（border-color）
border-color属性用于设置边框的颜色，其基本语法格式如下：
border-color:上边[右边 下边 左边];
CSS3在原边框颜色属性（border-color）的基础上派生了4个边框颜色属性。
border-top-colors
border-right-colors
border-bottom-colors
border-left-colors
4.综合设置边框
使用border-style、border-width、border-color虽然可以实现丰富的边框效果，但是这种方式书写的代码繁琐，且不便于阅读，为此CSS提供了更简单的边框设置方式，其基本格式如下：
border:宽度 样式 颜色;
清单 15：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>综合设置边框</title>
<style>
/* 单侧复合属性设置 */
h2{
border-top: 3px dashed #F00;
border-right: 10px double #900;
border-bottom: 5px double #FF6600;
border-left: 10px solid green;
text-align: center;
}
/* border复合属性设置 */
.j20{
border: 15px solid #FF6600;
margin: auto;
display: block;
}
</style>
</head>
<body>
<h2>国之重器歼20</h2>
<img src="img/j20.jpg" alt="歼20战斗机" class="j20">
</body>
</html>
在清单15中，首先使用边框的单侧复合属性设置二级标题，使其各侧边框显示不同样式，然后使用复合属性border，为图像设置四条相同的边框。运行效果如下图所示。
5.圆角边框（border-radius）
在网页设计中，经常需要设置圆角边框，运用CSS3中的border-radius属性可以将矩形边框圆角化，其基本语法格式如下：
border-radius:参数1/参数2
其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数之间用“/”隔开。
清单 16：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角边框</title>
<style>
.ci{
border: 8px solid #6C9024;
/* 设置水平半径为100像素，垂直半径为50像素 */
border-radius: 100px/50px;
}
</style>
</head>
<body>
<img src="img/ci.jpg" alt="拼音ci" class="ci">
</body>
</html>
在清单16中，设置图片圆角边框的水平半径为100px，垂直半径为50px。需要注意的是，在使用border-radius属性时，如果第二个参数省略，则会默认等于第一个参数。
6.图片边框（border-image）
border-image属性是一个简写属性，用于设置border-image-source、border-image-slice、 border-image-width、border-image-outset以及border-image-repeat等属性，其基本语法格式如下：
border-image:border-image-source border-image-slice / border-image-width / border-image-outset border-image-repeat;
border-image:默认值(none 100% 10 stretch)
如果省略值，会设置其默认值，使用border-image-*属性来构造漂亮的可伸缩按钮。对各属性的说明如下：
属性 说明
border-image-source 指定图片的路径
border-image-slice 指定边框图像的顶部、右侧、底部、左侧内偏移量
border-image-width 指定边框宽度
border-image-outset 指定边框背景向盒子外部延伸的距离
border-image-repeat 指定背景图片的平铺方式
平铺(repeat)、铺满(round)、拉伸(stretch)
清单 17：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片边框</title>
<style>
div{
border:10px solid transparent;
width: 40px;
padding: 5px 10px;
border-image: url(img/btn.png) 0 14 0 14 stretch;
}
</style>
</head>
<body>
<div>搜索</div>
<p>使用的图片</p>
<img src="img/btn.png" />
</body>
</html>
3.4.2 边距属性
1.内边距
在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置方法如下：
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
padding:上内边距 [右内边距 下内边距 左内边距];
清单 18：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置内边距</title>
<style>
/* 为图像和段落设置边框 */
.border{
border:5px solid #F60;
}
img{
margin: auto;
display: block;
/* 图像4个方向内边距相同 */
padding:80px;
/* 单独设置下内边距 */
padding-bottom:0; /*单独设置下内边距*/
} /* 上面两行代码等价于 padding:80px 80px 0; */
p{
padding:5%; /* 段落内边距为父元素宽度的5% */
text-align: center;
}
</style>
</head>
<body>
<img class="border" src="img/cat.jpg" />
<p class="border">在花丛中驻留</p>
</body>
</html>
2.外边距
在CSS中，margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下:
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
margin:上外边距 [右外边距 下外边距 左外边距];
清单 19：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置外边距</title>
<style>
img {
width: 300px;
border: 5px solid red;
float: left;
/*设置图像左浮动*/
margin-right: 50px;
/*设置图像的右外边距*/
margin-left: 30px;
/*设置图像的左外边距*/
/*上面两行代码等价于margin:0 50px 0 30px;*/
}
p {
text-indent: 2em;
}
</style>
</head>
<body>
<img src="img/tanmu.gif" />
<p>所谓“海南多阳，一木五香”，说的就是海南特产的黄花梨木。在海南阳光日晒的环境之下，吸收天地灵气逐渐成长为品质极佳的树木。 海南黄花梨木贵为我国五大名木之一，并不是毫无缘由的。自宋朝时期开始，黄花梨木就作为进贡的贡品献给各大王公贵族，明清时更是受到追捧，成为宫廷家具的主要用料。</p>
</body>
</html>
3.4.3 box-shadow属性
在网页制作中，经常需要对盒子添加阴影效果。CSS3中的box-shadow属性可以轻松实现阴影的添加，其基本语法格式如下：
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;
在上面的语法格式中，box-shadow属性共包含6个参数值，对它们的具体解释如下所示:
参数值 说明
像素值1 表示标记元素水平阴影位置，可以为负值（必选属性）。
像素值2 表示标记元素垂直阴影位置，可以为负值（必选属性）。
像素值3 阴影模糊半径（可选属性）。
像素值4 阴影扩展半径，不能为负值（可选属性）。
颜色值 阴影颜色（可选属性）。
阴影类型 内阴影（inset）/ 外阴影（默认）（可选属性）。
清单 20：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow属性</title>
<style>
img{
padding:20px;
border-radius:50%;
border:1px solid #ccc;
box-shadow:5px 5px 10px 2px #999 inset;
}
</style>
</head>
<body>
<img src="img/btn.png" alt="只是一个按钮">
</body>
</html>
在清单20中，定义了一个水平位置和垂直位置均为5px，模糊半径为10px，扩展半径为2px的浅灰色内阴影。效果如下：
3.4.4 box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。
box-sizing: content-box/border-box;
在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下：
属性值 说明
content-box 浏览器对盒子模型的解析遵从W3C 标准，当定义width和height时，它的参数值不包括border和padding。
border-box 当定义width和height时，border和padding的参数值被包含在width和height之内。
清单 21：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing属性</title>
<style>
.b1 {
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #ccc;
box-sizing: content-box;
}
.b2 {
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="b1">在这里用于表示content_box属性</div>
<div class="b2">在这里用于表示border_box属性</div>
</body>
</html>
在清单21中定义了两个盒子，并对它们设置相同的宽、高、右内边距和边框样式。并且，对盒子1定义“box-sizing:content-box;”样式，对盒子2定义“box-sizing:border-box;”样式。盒子1宽度比width参数值多出30px，总宽度变为330px；盒子2宽度等于width参数值，总宽度仍为300px。
可见应用“box-sizing:border-box;”样式后，盒子border和padding的参数值是被包含在width和height之内的。
四、标记元素的浮动与定位
4.1 标记元素的浮动
4.1.1 标记元素的浮动属性float
浮动属性作为CSS的重要属性，被频繁地应用在网页制作中。所谓元素的浮动是指设置了浮动属性的标记元素会脱离标准DOM流的控制，移动到其父标记元素中相应位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{
float:属性值;
}
其属性值有三个，分别表示不同的含义，具体如下所示：
属性值 描述
left 标记元素向左浮动
right 标记元素向右浮动
none 标记元素不浮动（默认值）
清单 22：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动属性</title>
<style>
.parent{
background: #ccc;
border: 1px dashed #999;
height: 80px;
}
.child1,.child2,.child3{
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left; /* 定义左浮动 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">
第一盒子
</div>
<div class="child2">
第二盒子
</div>
<div class="child3">
第三盒子
</div>
</div>
</body>
</html>
4.1.2 清除浮动属性clear
为了避免左浮动或右浮动对标记元素的影响，往往需要在该标记元素中清除浮动。在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{
clear:属性值;
}
clear属性的常用值有三个，分别表示不同的含义，具体如下所示。
属性值 描述
left 不允许左侧有浮动标记元素（清除左侧浮动的影响）
right 不允许右侧有浮动标记元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
需要注意的是，clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，会造成父元素高度塌陷。
清单 23：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动属性</title>
<style>
.parent{
background: #ccc;
border: 1px dashed #999;
}
.child1,.child2,.child3{
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left; /* 定义左浮动 */
}
.footer{
height: 50px;
background: blueviolet;
text-align: center;
padding: 10px;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">
第一盒子
</div>
<div class="child2">
第二盒子
</div>
<div class="child3">
第三盒子
</div>
</div>
<div class="footer">爱校码 版权所有</div>
</body>
</html>
在清单23中，由于受到子元素浮动的影响，没有设置高度的父元素变成了一条直线，即父元素不能自适应子元素的高度了。在浮动元素之后的<div class="footer">标记元素，显然受到了浮动影响，对该标记应用“clear:both”样式清除浮动。
运用clear属性只能清除元素左右两侧浮动的影响。对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动造成父元素高度塌陷产生的影响，运用overflow属性清除浮动，在父级标记元素的样式里面加: overflow:hidden;
4.2 overflow属性
当盒子内的标记元素超出盒子自身的大小时，内容就会溢出，这时如果想要规范溢出内容的显示方式，就需要使用CSS中的overflow属性，其基本语法格式如下：
选择器{
overflow:属性值;
}
overflow属性的常用值有四个，分别表示不同的含义，具体如下所示。
属性值 描述
visible 内容不会被修剪，会呈现在元素框之外（默认值）
hidden 溢出内容会被修剪，并且被修剪的内容是不可见的
auto 在需要时产生滚动条，即自适应所要显示的内容
scroll 溢出内容会被修剪，且浏览器会始终显示滚动条
清单 24：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
div {
width: 100px;
height: 140px;
background: yellowgreen;
overflow: visible;
/*溢出内容呈现在元素框之外*/
}
</style>
</head>
<body>
<div>
当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式。
</div>
</body>
</html>
在清单24中，通过设置div的标记选择器的“overflow:visible;”样式属性，定义溢出的内容不会被修剪，而呈现在元素框之外。一般而言，并没有必要设定overflow的属性为visible，除非你想覆盖它在其他地方设定的值。
如果希望溢出的内容被修剪，且不可见，可将overflow的属性值定义为hidden。如果希望元素框能够自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条，可以将overflow的属性值定义为auto。与“overflow: auto;”不同，当定义“overflow: scroll;”时，不论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。
4.3 标记元素的定位
4.3.1 标记元素的定位方式
（1）定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{
position:属性值;
}
position属性的常用值有四个，分别表示不同的定位模式，具体如下所示。
属性值 描述
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位
（2）边偏移
定位模式（position）仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对它们的具体解释如下所示。
边偏移属性 描述
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底部偏移量，定义元素相对于其父元素下边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离
4.3.2 position属性值
（1）静态定位Static
静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
（2）相对定位Relative
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
（3）绝对定位absolute
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
（4）固定定位fixed
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
（5）z-index层叠等级属性
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
注意：z-index属性仅对定位元素有效。
4.4 标记元素的类型与转换
4.4.1 元素的类型
HTML标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。了解它们的特性可以为使用CSS设置样式和布局打下基础。
（1）块元素
块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。
（2）行内元素
行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>标记是最典型的行内元素。
清单 25：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标记元素的转换</title>
<style>
div,span{
width: 200px;
height: 50px;
background: #FCC;
margin: 10px;
}
.one_d,.two_d{
display: inline;
}
.one_s{
display: inline-block;
}
.three_s{
display: block;
}
</style>
</head>
<body>
<div class="one_d">
第一个div文本内容
</div>
<div class="two_d">
第二个div文本内容
</div>
<div class="three_d">
第三个div文本内容
</div>
<span class="one_s">第一个span文本内容</span>
<span class="two_s">第二个span文本内容</span>
<span class="three_s">第三个span文本内容</span>
</body>
</html>
在清单25中，定义了三对<div>和三对<span>标记，为它们设置相同的宽度、高度、背景颜色和外边距。同时，对前两个<div>应用“display:inline;”样式，使它们从块元素转换为行内元素，对第一个和第三个<span>分别应用“display: inline-block;”和“display:inline;”样式，使它们分别转换为行内块元素和行内元素。
使用display的相关属性值，可以实现块元素、行内元素和行内块元素之间的转换。如果希望某个元素不被显示，还可以使用“display:none;”进行控制。
前两个<div>与第三个<div>之间的垂直外边距，并不等于前两个<div>的margin-bottom与第三个<div>的margin-top之和。这是因为前两个<div>被转换成了行内元素，而行内元素只可以定义左右外边距，定义上下外边距时无效。
五、CSS 伪类
在CSS中，通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类，他的名称是由系统定义的，通常由标记名、类名或id名加“:”构成。
超链接标记<a>的伪类有4种，具体如下所示：
超链接标记<a>的伪类 含义
a:link 未访问时超链接的状态
a:visited 访问后超链接的状态
a:hover 鼠标经过、悬停时超链接的状态
a:active 鼠标点击不动时超链接的状态
1 a:link属性
a:link伪类向未访问的链接添加特殊的样式。这个伪类应用于尚未访问过的链接；也就是说，链接所指的 URI尚未出现在用户代理的历史中。这种状态与a:visited状态是互斥的。
2 a:visited属性
a:visited伪类向已访问的链接添加特殊的样式。这个伪类应用于已访问过的链接；也就是说，链接所指的 URL已出现在用户代理的历史中。这种状态与a:link状态是互斥的。
3 a:hover属性
a:hover伪类在鼠标移到元素上时向此元素添加特殊的样式。这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过CSS没有定义究竟是哪些元素。
4 a:active属性
a:active伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活，不过CSS 对此没有定义。
四个伪类的设置需要有固定顺序，不然就会得不到期望的效果。顺序为: a: link、a: visited、a: hover、a: active。
清单 26：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标记a伪类的用法</title>
<style>
a:link{
color:#87CEFA;
}
a:visited{
color:#FF00FF;
}
/* a:hover必须位于 a:link和a:visited之后才能生效 */
a:hover{
color:#FFD700;
}
/* a:active必须位于 a:hover之后才能生效*/
a:active{
color:#0000FF;
}
</style>
</head>
<body>
<p><b><a href="#">我的家在黄土高坡</a></b></p>
</body>
</html>
六、带有导航功能的CSS设计
清单 27：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航伪类的使用</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: 微软雅黑, Arial, Helvetica, sans-serif;
color: #353535;
}
ul {
list-style: none;
}
li {
vertical-align: bottom;
}
a {
color: #626262;
text-decoration: none;
}
.clear {
clear: both;
}
.layout {
width: 1000px;
height: auto;
margin: 0 auto;
padding: 5px 3px 10px 3px;
background: #7A4363 url(img/layout.jpg) repeat-x top;
}
.header {
width: 1000px;
height: 125px;
position: relative;
}
.logo {
width: 292px;
height: 56px;
background: url(img/logo.png) no-repeat right top;
position: absolute;
left: 0;
top: 40px;
}
.navlist {
width: 704px;
height: 40px;
background: #A86E90;
position: absolute;
right: 0;
top: 46px;
padding: 0 2px;
}
.navlist li {
width: 88px;
height: 40px;
float: left;
font-size: 13px;
}
.navlist li a {
width: 64px;
height: 40px;
line-height: 40px;
display: block;
text-align: center;
margin: 0 auto;
color: #FFF;
}
.navlist li a:hover {
background: url(img/nav-list-li-ahover.gif) no-repeat left bottom;
color: #FFF;
}
.navlist .navHere {
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
BACKGROUND: url(img/nav-list-li-ahover.gif) no-repeat center bottom;
color: #FFF;
}
.navlist .navHere a {
width: 64px;
height: 40px;
line-height: 40px;
display: block;
text-align: center;
margin: 0 auto;
color: #FFF;
}
.navlist .navHere a:hover {
COLOR: #fff
}
</style>
</head>
<body>
<div class="layout">
<div class="header">
<div class="blank"></div>
<div class="logo"></div>
<div class="navlist">
<ul>
<li class="navHere"><a href="#">社区主页</a></li>
<li><a href="#">美食娱乐</a></li>
<li><a href="#">区内商圈</a></li>
<li><a href="#">女性天地</a></li>
<li><a href="#">儿童世界</a></li>
<li><a href="#">男性频道</a></li>
<li><a href="#">企业之窗</a></li>
<li><a href="#">返回主页</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
执行效果：
博文最后更新时间：