CSS为了能对网页布局、字体、颜色、背景和其他图文效果实现更加精确的控制，定义了相当数量的属性。从本章开始逐一介绍网页设计的各种元素的CSS属性，进而实现格式化排版。
在学习HTML 时，通常也会使用 HTML 对文本字体进行一些非常简单的样式设置，而使用CSS对字体样式进行设置远比使用HTML灵活、精确得多。
字体具有两方面的作用：一是传递语义功能，二是有美学效应。由于不同的字体给人来不同的风格感受，所以对于网页设计人员来说，首先需要考虑的问题就是准确地选择字体。
通常，访问者的计算机中不会安装诸如“方正综艺简体”和“方正水柱简体”等特殊字体，如果网页设计者使用这些字体，极有可能造成访问者看到的页面效果与设计者的本意为了避免这种情况的发生，一般使用系统默认的“宋体”“仿宋体”“楷体”、Arial、Verdana和Times New Roman等常规字体。
CSS 提供font-family属性来控制文本的字体类型。
格式如下：
font-family:字体名称；
参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。
说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名称。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体类型设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。</p>
</body>
</html> 在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中使用font- size属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”(绝对位)、“pt”(绝对单位)、“em”(相对单位)和“%”(相对单位)等。
语法：
font-size:绝对尺寸 | 相对尺寸;
参数：绝对字体尺寸是根据对象字体进行调节的，包括 xx-mall、x-small，small、edium，large，x-large 和xx-large 的7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者em以相对父元素大小的方式来设置字体尺寸。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体类型设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
font-size: 16pt;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。</p>
</body>
</html>css 样式中使用 font-weight 属性设置字体的粗细，它包含 normal、bold、bolder、lichter、100、200、300、400、500、600、700、800和900多个属性值。
语法：
font-weight :boldlnumberlnormalllighterl100-900;
参数：normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100~900共分为9个层次(100、200、…、900，数字越小字体越细、数字越大字体越粗，数字值400相当于关键字 normal，700等价于bold)。
说明：设置文本字体的粗细。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体类型设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
}
.one{
font-weight: normal;
font-size: 30px;
}
.two{
font-weight: bold;
font-size: 30px;
}
.three{
font-weight: bolder;
font-size: 30px;
}
.four{
font-weight: lighter;
font-size: 30px;
}
.five{
font-weight: 900;
font-size: 30px;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p><span class="one">用户</span>是上帝, 也是我们的衣食父母, 坚持<span class="two">用户</span>利益至上,
不断倾听和深刻理解<span class="three">用户</span>需求, 不断给<span class="four">用户</span>惊喜,
不断提供超预期的体验和服务, 不断创造新的<span class="five">用户</span>价值。</p>
</body>
</html>CSS 中的 font-style属性用来设置字体的倾斜。
语法：
font-style:normal l italic l oblique;
参数：normal为“正常”(默认值)，italic为“斜体”，oblique为“倾斜体”。
说明：设置文本字体的倾斜。
网页的排版离不开对文本的设置，本节主要讲述常用的文本样式，包括文本对齐方式行高、文本修饰、段落首行缩进、首字下沉、字符间距、文本截断、文本颜色及背景色等。
使用text-align属性可以设置元素中文本的水平对齐方式。
语法：text-align:leftI right I center I justify;
参数：left为左对齐，right为右对齐，center为居中，justify为两端对齐。
说明：设置对象中文本的对齐方式。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本的水平对齐方式设置</title>
<style type="text/css">
h1{
font-family: 黑体;
text-align: center;
}
p{
font-family: Arial,"times new roman";
text-align: left;
}
p.center{
text-align: center;
}
p.right{
text-align: right;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p class="center">作者：全球汇</p>
<p class="right">发布时间：2019年1月31日</p>
<p>用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。
</p>
</body>
</html>段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-height属性控制行与行之间的垂直间距。
语法：
line-height :lengthl normal;
参数：length为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。
说明：设置对象的行高。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行高设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
line-height: 200%;/*设置行高为字体高度的2倍*/
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。
</p>
</body>
</html>使用CSS样式可以对文本进行简单的修饰，text属性所提供的 text-decoration属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。
语法：
text-decoration:underlinel blinkl overline I line-through I none;
参数：underline为下划线，blink为闪烁，overline为上划线，line-through为贯穿线，none为无装饰。
说明：设置对象中文本的修饰。对象a、u、ins的文本修饰默认值为 underline。对象strike、s、del的默认值是line-through。如果应用的对象不是文本，则此属性不起作用。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本修饰效果的设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
line-height: 200%;/*设置行高为字体高度的2倍*/
}
.one{
font-size: 30px;
text-decoration: underline;/*设置下划线*/
}
.two{
font-size: 30px;
text-decoration: blink;/*设置闪烁*/
}
.three{
font-size: 30px;
text-decoration: overline;/*设置上划线*/
}
.four{
font-size: 30px;
text-decoration: line-through;/*设置贯穿线*/
}
.five{
font-size: 30px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>用户是<span class="one">上帝</span>, 也是我们的衣食父母, 坚持用户<span class="two">利益至上</span>,
不断<span class="three">倾听和深刻理解</span>用户需求, 不断给用户惊喜,
不断<span class="four">提供</span>,不断<span class="five">创造</span>新的用户价值。
</p>
</body>
</html> 首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变其目的是便于阅读和区分文章整体结构。
在Web页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果。在CSS 样式中 text-indent 属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或外边距创造这种效果。
语法：
text-indent:length;
单位是em！！！
参数：length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。说明：设置对象中的文本段落的缩进。本属应用于整块的内容。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体类型设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
text-indent: 2em;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。</p>
</body>
</html>在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
注：首字下沉会跟行高冲突！！！！
在CSS样式中伪对象“：first-letter”可以实现对象内第一个字符的样式控制。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体类型设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
}
p:first-letter{
float: left;
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。</p>
</body>
</html>letter-spacing为字符间距属性，可以设置字符与字符间的距离。
语法：
letter-spacing:length I normal;
参数：normal为默认值，定义字符间的标准间距。length表示由浮点数字和单位标识符组成的长度值，允许为负值。
说明：该属性定义元素中字符之间插入多少空白符。如果指定为长度值，会调整字符乙间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体类型设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
}
p.loose{
letter-spacing: 30px;
}
p.tight{
letter-spacing: -0.25em;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>坚持用户利益至上</p>
<p class="loose">坚持用户利益至上</p>
<p class="tight">坚持用户利益至上</p>
</body>
</html>在CSS样式中text-overflow属性可以实现文本的截断效果，该属性包含clip和ellipsis离个属性值。前者表示简单的裁切，不显示省略标记(·)；后者表示当文本溢出时显示省略标记(…)。
语法：
text-overflow:clip I ellipsis;
参数：clip定义简单的裁切，不显示省略标记。ellipsis定义当文本溢出时显示省略标记。
说明：设置文本的截断。要实现溢出文本显示省略号的效果，除了使用 text-overflow属性以外，还必须配合 white-space：nowrap(强制文本在一行内显示)和 overflow：hidden(溢出内容为隐藏)同时使用才能实现。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本截断的设置</title>
<style type="text/css">
h1{
font-family: 黑体;
}
p{
font-family: Arial,"times new roman";
}
p.ellipsis{
width: 260px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p class="ellipsis">用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。</p>
</body>
</html> 在CSS样式中，对文本增加颜色修饰十分简单，只需添加color属性即可。color属性的语法：
color:颜色值；
这里颜色值可以使用多种书写方式：
color:red; /*规定颜色值为颜色名称的颜色*/
color:#000000; /*规定颜色值为十六进制值的颜色*/
color:rgb(0，0，255)； /*规定颜色值为 rgb 代码的颜色*/
color:rgb(0%,0%,80%); /*规定颜色值为rgb百分数的颜色*/
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本颜色的设置</title>
<style type="text/css">
body{
color: blue;
}
h1{
font-family: 黑体;
color: #333;
}
p{
font-family: Arial,"times new roman";
}
p.red{
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p class="red">用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。
</p>
<p>由于在body中定义了文本颜色为蓝色，没有应用任何样式的普通段落的文字为蓝色。</p>
</body>
</html> 在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用 background-color属性来设置网页背景颜色，还可以设置文本的背景颜色。语法：
background-color:color I transparent
参数：color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。说明：background-color不能继承，默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本的背景颜色的设置</title>
<style type="text/css">
body{
background-color: #eee;
}
h1{
font-family: 黑体;
background-color: orange;
}
p{
font-family: Arial,"times new roman";
background:rgb(0, 255, 255);
}
</style>
</head>
<body>
<h1>经营理念</h1>
<p>用户是上帝, 也是我们的衣食父母, 坚持用户利益至上,
不断倾听和深刻理解用户需求, 不断给用户惊喜,
不断提供超预期的体验和服务, 不断创造新的用户价值。</p>
</body>
</html> 图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍CSS设置图像风格样式的方法，包括图像的边框、图像的缩放和背景图像等。
图像即img元素，在页面中的风格样式仍然用盒模型来设计。
作为单独的图像本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS绕一管理，不但可以更加精确地调整图像的各种属性，还可以实现很多特殊的效果。下面首先讲解用CSS设置图像基本属性的方法，为进一步深入探讨打下基础。
图像的边框就是利用border属性作用于图像元素而呈现的效果。在HTML中可以直接通过<img>标记的 border 属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置border属性值为0时，则显示为没有边框。
例如以下代码：
< img sre="images/fields. jpg"border="0”> <!-显示为没有边框-->
< img sre="images/fields. jpg"border="I”> <!-设置边框的粗细为1 px-->
< img sre = "images/fields. jpg"border="2"> <!--设置边框的粗细为 2px-->
< img sre= ”images/fields, jpg”border="3"> <!--设置边框的粗细为3px-->
通过浏览器的解析，图像的边框粗细从左至右依次递增。使用这种方法存在很大的限制，即所有的边框都只能是黑色，而且风格十分单一，都是实线，只是在边框粗细上能够进行调整。
如果希望更换边框的颜色，或者换成虚线边框，仅仅依靠HTML都是无法实现的。下面的实例讲解了如何用CSS样式美化图像的边框。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>/*页面内部的样式*/
h1{
text-align: center;
font-family: "kaiti";
font-size: 150px;
font-weight: 600;
font-style: italic/*设置斜体*/
}
/*p{
line-height: 450%;
}*/
#id1{
font-size: 50px;
font-weight: 200;
font-style: italic;
}
#id2{
font-size: 90px;
font-family: "fangsong";
font-weight: 300;
}
#id3{
font-size: 150px;
font-weight: 400;
font-style: italic;
}
#id4{
text-decoration: underline;
}
#id5{
text-decoration: overline;
}
#id6{
text-decoration: line-through;
}
.first:first-letter{
float: left;
font-size: 4em;
font-weight: 700;
}
.second:first-letter{
float: left;
font-size: 4em;
font-weight: 700;
}
.first{
letter-spacing: 2em;
}
.second{
width: 300px;
height: 20px;
overflow: hidden;
//显示省略号,与下行搭配使用
text-overflow: ellipsis;
white-space: nowrap;
}
h1{
/*文本的颜色*/
color: #ff0000;
}
.first{
/*文本背景的颜色*/
background-color: #ffbc00;
}
img{
/*上 右 下 左*/
border-color: #ff0000 #ffcb00 #00bcff #ffb;
border-width: 5px 10px 20px 30px;
border-style: dashed double dotted solid;
}
</style>
</head>
<body>
<h1>完美世界</h1>
<p class="first">
经典名言：
<span id="id1">吃掉吃掉</span>，
<span id="id2">统统吃掉</span>，
<span id="id3">胖子扛回家</span>。
</p>
<p class="second">
<span id="id4">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
求实创新、扬帆远航，在新时代的奋进中，<span id="id5">江西应用工程职业学院</span>承扬传统，
开拓新天。<span id="id6">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、
光荣与理想融会的新篇章！</p>
<img src="img/photo.jpg" id="img1"/><br/>
<img src="img/photo.jpg" id="img2"/><br/>
<img src="img/photo.jpg" id="img3"/><br/>
</body>
</html>
使用CSS样式控制图像的大小，可以通过width和height两个属性来实现。需要注意的是，当width和height两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像缩放的设置</title>
<style type="text/css">
#box{
padding: 10px;
width: 1000px;
height: 700px;
border: 2px dashed #9c3;
}
img.test1{
width: 30%;
height: 40%;
}
img.test2{
width: 150px;
height: 280px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/a.png">
<img src="img/a.png" class="test1">
<img src="img/a.png" class="test2">
</div>
</body>
</html>在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面带来丰富的视觉效果。CSS除了可以设置背景颜色，还可以用background-image来设置背景图像。
语法：
background-image:url(url) I none;
参数：url表示要插入背景图像的路径。nome表示不加载图像。
说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<body>标签中。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图像的设置</title>
<style type="text/css">
body{
background-color: #7bc144;
background-image: url(images/1.jpg);
background-repeat: no-repeat;
}
.test1{
border-style: dotted;
border-color: #996600;
border-width: 4px;
margin: 2px;
}
</style>
</head>
<body>
<img src="img/1.jpg" class="test1">
</body>
</html> 
背景重复(background-repeat)属性的主要作用是设置背景图片以何种方式在网页中显示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节的大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。
语法：
background-repeat;repeat I no-repeat I repeat-x I repeat-y;
参数：repeat表示背景图像在水平和垂直方向平铺，是默认值；repeat-x表示背景图在水平方向平铺；repeat-y表示背景图像在垂直方向平铺；no-repeat表示背景图像不平铺
说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。
浏览效果如下：
横向定位：
纵向定位：
不重复：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>/*页面内部的样式*/
#bg{
width: 800px;
height: 400px;
background-color: #ff0000;
background-image: url(img/bg.png);
background-repeat: repeat-x;
}
h1{
text-align: center;
font-family: "kaiti";
font-size: 150px;
font-weight: 600;
font-style: italic/*设置斜体*/
}
/*p{
line-height: 450%;
}*/
#id1{
font-size: 50px;
font-weight: 200;
font-style: italic;
}
#id2{
font-size: 90px;
font-family: "fangsong";
font-weight: 300;
}
#id3{
font-size: 150px;
font-weight: 400;
font-style: italic;
}
#id4{
text-decoration: underline;
}
#id5{
text-decoration: overline;
}
#id6{
text-decoration: line-through;
}
.first:first-letter{
float: left;
font-size: 4em;
font-weight: 700;
}
.second:first-letter{
float: left;
font-size: 4em;
font-weight: 700;
}
.first{
letter-spacing: 2em;
}
.second{
width: 300px;
height: 20px;
overflow: hidden;
//显示省略号,与下行搭配使用
text-overflow: ellipsis;
white-space: nowrap;
}
h1{
/*文本的颜色*/
color: #ff0000;
}
.first{
/*文本背景的颜色*/
background-color: #ffbc00;
}
img{
/*上 右 下 左*/
border-color: #ff0000 #ffcb00 #00bcff #ffb;
border-width: 5px 10px 20px 30px;
border-style: dashed double dotted solid;
}
#img2{
width: 400px;
height: 200px;
}
#img3{
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<h1>完美世界</h1>
<p class="first">
经典名言：
<span id="id1">吃掉吃掉</span>，
<span id="id2">统统吃掉</span>，
<span id="id3">胖子扛回家</span>。
</p>
<p class="second">
<span id="id4">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
求实创新、扬帆远航，在新时代的奋进中，<span id="id5">江西应用工程职业学院</span>承扬传统，
开拓新天。<span id="id6">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、
光荣与理想融会的新篇章！</p>
<img src="img/photo.jpg" id="img1"/><br/>
<img src="img/photo.jpg" id="img2"/><br/>
<img src="img/photo.jpg" id="img3"/><br/>
<div id="bg"></div>
</body>
</html>
当在网页中插入背景图像时，每一次插入的位置，都是位于网页的左上角，可以通过background-position属性来改变图像的插入位置。
语法：
backgeound-position:length I length;
backgpound-positionspositional I position；
参数：1mgh为百分比或者由数字和单位标识符组成的长度值，position可取top、center、bottom、left、right 之一
说明，利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空格隔开、一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right，关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。
设置背景定位有以下3种方法。
1. 使用关键字进行背景定位
关键字参数的取值及含义如下：
top：将背景图像同元素的顶部对齐。
bottom：将背景图像同元素的底部对齐。
left：将背景图像同元素的左边对齐。
right：将背景图像同元素的右边对齐。
center；将背景图像相对于元素水平居中或垂直居中。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>/*页面内部的样式*/
#bg{
width: 800px;
height: 400px;
background-color: #ff0000;
background-image: url(img/bg.png);
background-repeat: no-repeat;
background-position: right bottom;
}
h1{
text-align: center;
font-family: "kaiti";
font-size: 150px;
font-weight: 600;
font-style: italic/*设置斜体*/
}
/*p{
line-height: 450%;
}*/
#id1{
font-size: 50px;
font-weight: 200;
font-style: italic;
}
#id2{
font-size: 90px;
font-family: "fangsong";
font-weight: 300;
}
#id3{
font-size: 150px;
font-weight: 400;
font-style: italic;
}
#id4{
text-decoration: underline;
}
#id5{
text-decoration: overline;
}
#id6{
text-decoration: line-through;
}
.first:first-letter{
float: left;
font-size: 4em;
font-weight: 700;
}
.second:first-letter{
float: left;
font-size: 4em;
font-weight: 700;
}
.first{
letter-spacing: 2em;
}
.second{
width: 300px;
height: 20px;
overflow: hidden;
//显示省略号,与下行搭配使用
text-overflow: ellipsis;
white-space: nowrap;
}
h1{
/*文本的颜色*/
color: #ff0000;
}
.first{
/*文本背景的颜色*/
background-color: #ffbc00;
}
img{
/*上 右 下 左*/
border-color: #ff0000 #ffcb00 #00bcff #ffb;
border-width: 5px 10px 20px 30px;
border-style: dashed double dotted solid;
}
#img2{
width: 400px;
height: 200px;
}
#img3{
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<h1>完美世界</h1>
<p class="first">
经典名言：
<span id="id1">吃掉吃掉</span>，
<span id="id2">统统吃掉</span>，
<span id="id3">胖子扛回家</span>。
</p>
<p class="second">
<span id="id4">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、
面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
求实创新、扬帆远航，在新时代的奋进中，<span id="id5">江西应用工程职业学院</span>承扬传统，
开拓新天。<span id="id6">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、
服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、
光荣与理想融会的新篇章！</p>
<img src="img/photo.jpg" id="img1"/><br/>
<img src="img/photo.jpg" id="img2"/><br/>
<img src="img/photo.jpg" id="img3"/><br/>
<div id="bg"></div>
</body>
</html>
长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位设置</title>
<style type="text/css">
body{
background-color: #7bc144;
}
#box{
width: 900px;
height: 700px;
border: 6px dashed #fff;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
background-position: 150px 70px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位设置</title>
<style type="text/css">
body{
background-color: #7bc144;
}
#box{
width: 900px;
height: 700px;
border: 6px dashed #f33;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
background-position: 100% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。
文本域主要用于采集用户在其中编辑的文字信息，通过 CSS 样式可以对文本域内的字颜色以及背景图像加以控制。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本域修饰</title>
<style type="text/css">
.text1{
border: 1px solid #f60;
color: #03c;
}
.text2{
border: 1px solid #c3c;
height: 20px;
background: #fff url(img/Male.gif)left center no-repeat;
padding-left: 20px;
}
.area{
border: 1px solid#00f;
overflow: auto;
width: 99%;
height: 100px;
}
</style>
</head>
<body>
<p>
<input type="text" name="normal"/>
默认样式的文本
</p>
<p>
<input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1"/>
改变边框颜色和文字颜色的文本域，看起来更加醒目
</p>
<p>
<input name="pass" type="password" class="text2"/>
增加了背景图片的文本域，看起来更加形象直观
</p>
<p>
<textarea name="cha" cols="45" rows="5" class="area">改变边框颜色的多行文本域</textarea>
</p>
</body>
</html>按钮主要用于控制网页中的表单。通过CSS样式可以对按钮的字体、颜色、边框以及背景图像加以控制。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮修饰</title>
<style type="text/css">
.btn01{
background: url(img/btn_bg02.jpg) repeat-x;
border: 1px solid #f00;
height: 32px;
font-weight: bold;
padding-top: 2px;
cursor: pointer;
font-size: 14px;
color: #fff;
}
.btn02{
background: url(img/btn_bg03.jpg) 0 no-repeat;
width: 107px;
height: 37px;
border: none;
font-size: 14px;
font-weight: bold;
color: #d84700;
cursor: pointer;
}
</style>
</head>
<body>
<p>
<input name="button" type="submit" value="提交"/>
默认风格的“提交”按钮
</p>
<p>
<input name="button1" type="submit"
class="btn01" id="button1" value="自适应宽度按钮"/>
</p>
<p>
<input name="button2" type="submit"
class="btn02" id="button2" value="免费注册"/>
固定背景图片的按钮
</p>
</body>
</html>在许多网站中都有登录表单的应用，而登录表单所包含的元素通常由用户名文本域、密码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。
浏览效果如下：
实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录表单的制作</title>
<style type="text/css">
.login{
margin: 0 auto;
width: 280px;
padding: 14px;
border: dashed 2px #b7ddf2;
background: #ebf4fb;
}
.login *{
margin: 0;
padding: 0;
font-family: 宋体;
font-size: 12px;
;line-height: 1.5em;
}
.login h2{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: solid 1px #b7ddf2;
}
.login content{
padding: 5px;
}
.login frm_cont{
margin-bottom: 8px;
}
.login username input,.login password input{
width: 180px;
height: 18px;
padding: 2px 0px 2px 18px;
border: solid 1px #aacfe4;
}
.login username input{
background: #fff url(img/Male.gif)no-repeat left center;
}
.login btns{
text-align: center;
}
</style>
</head>
<body>
<div class="login">
<h2>用户登录</h2>
<div class="centent">
<form action="" method="post">
<div class="frm_cont username">用户名：
<label for="username"></label>
<input type="text" name="username" id="username"/>
</div>
<div class="frm_cont password">密 码
<label for="password"></label>
<input type="password" name="password" id="password"/>
</div>
<div class="bnts">
<input type="submit" name="button1" id="button" value="登录"/>
<input type="button" name="button2" id="button" value="注册"/>
</div>
</form>
</div>
</div>
</body>
</html>
6.5 综合案例——商城的注册页面
(1)栏目目录结构。在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。
(2)页面素材。将本页面需要使用的图像素材存放在文件夹images下。
(3)外部样式表。在文件夹css下新建一个名为 style.css的样式表文件。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
@import
<link type="text/css" rel="stylesheet" href="css/201-案例1.css"/>
</head>
<body style="background: #fff;">
<div class="loginLogo">
<div class="logoMid">
<h1 class="logo" style="height: 71px; padding-top: 10px;">
<a href="../index.html">
<img src="img/logo6.5.jpg"/>
</a >
</h1>
<div class ="loginBox">
<img src="img/chengguo.jpg" width="295" height="393" class="chengnuo" />
<form action ="#.html" method="get" class="reg">
<div class="regList">
<label><span class ="red">*</span>用户名</label>
<input type="text"/><span style="color:#999;">请输入邮箱/用户名/手机号</span>
</div>
<div class="regList">
<label><span class ="red">*</span>请设置密码</label>
<input type="text" />
</div>
<div class="regList">
<label><span class="password">*</span>请确认密码</label>
<input type="text" />
</div>
<div class="regList">
<label><span class="red">*</span>验证码</label>
<input type="text" class ="yanzheng" />
<img src="img/yanzheng.jpg" width="103" height="38" />
</div>
<div class="xieyi">
<input type="checkbox" />
我已经阅读并同意<a href="#">商城用户注册协议</a>
</div>
<div class="reg">
<input type="image" src="img/reg.jpg"/>
</div>
</form>
<div class="clears"></div>
</div>
</div>
</div>
</body>
</html>CSS代码如下：
/*页面全局样式--父元素*/
*{
margin : 0: /*所有元素外边距为 0*/
padding :0; /*所有元素内边距为 0*/
}
/*设置页面整体样式*/
body{
font-size:12px; /* 文字大小为12px */
color:#333; /*深灰色文字*/
}
ol,ul{
list-style:none; /*列表无修饰*/
}
img,a{ /*列表无修饰*/
border:0; /* 图像无边框 */
text-decoration:none; /* 链接无修饰 */
}
a{ /* 设置超链接样式 */
color:#333; /*深灰色文字*/
}
a:hover{ /*设置悬停链接样式*/
color:#f00; /*红色文字*/
}
/*会员注册表单的样式(与登录表单的样式共享)*/
.loginLogo{
width: 100% ;
border-bottom ; #efefef 1px solid;
}
.logoMid{ /* 顶部容器的样式 */
width; 1040px;
margin :0 auto;
}
.loginReg{
height: 30px;
line-height: 30px;
text-align: right;
}
.loginReg a{
color:#7bc144;
}
.loginReg a:hover{
color:#f00;
}
.loginBox{
width:1050px;
margin: 30px auto;
position:relative; /*相对定位*/
}
.regList{
height:35px;
line-height: 35px;
margin-bottom:30px;
position: relative;
}
.regList label{
float: left;
width:105px;
margin-right: 10px;
text-align:right;
color: #999;
}
.regList input{
margin:0;
padding:0;
width:283px;
height:33px;
border:3738400 1px solid;
background:#feffdf;
padding-left: 3px;
}
.regList.yanzheng{
width: 135px;
}
.regList img{
left:260px;
position: absolute;
}
.xieyi{
height:30px;
line-height:30px;
font-size:12px;
padding-left: 115px;
}
.xieyi input{
position: relative;
top:2px;
}
.xieyi a{
color:#7BC144;
}
.reg{
padding-left:115px;
margin-top: 10px;
}
.chengnuo{
position:absolute;
right:0;
top:0;
}
