6.1使用CSS设置字体样式
font-family：设置字体的类型
font-weight：设置字体的粗细
font-size：设置字体的大小
font-style：设置字体的倾斜
6.1.1字体类型
字体具有传递语义功能和美学效应两方面作用
CSS 提供font-family属性来控制文本的字体类型
参数: 字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。
说明: 用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。
<!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>
6.1.2字体大小
CSS样式中使用font-size属性设置字体的大小，其值设置字体的大小，其值可以是绝对值也可以是相对值。“px”绝对位，“pt”绝对单位，“em”相对单位，“%”相对单位。参数:绝对字体尺寸是根据对象字体进行调节的，包括xx-mal1、x-small，small、me-dium,large，x-large和xx-large的7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者em以相对父元素大小的方式来设置字体尺寸。
6.1.3字体粗细
CsS 样式中使用font-weight属性设置字体的粗细，它包含normal, bold、bolder、 lighter、100、200、300、400、500、600、700、800和900多个属性值。
参数:normal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，lighter表示比默认字体还细，100~900共分为9个层次(100、200、…、900，数字越小字体越细、数字越大字体越粗，数字值400相当于关键字normal，700等价于bold)。
使用 说明:设置文本字体的粗细。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
font-size: 25px; /* 设置字体大小 */
font-weight: 500; /* 设置字体粗细 */
}
.one{
font-weight: 800;
font-size: 30px;
}
.two{
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：
<span class="one">爱国明志</span> <!-- span可以指定一个或者多个字体的样式，而不是全部 -->
<span class="two">敢为人先</span>
</p >
</body>
</html> 
6.1.4 字体倾斜
CSS 中的font-style属性用来设置字体的倾斜。
参数:normal为“正常”(默认值)，italic为“斜体”，oblique为“倾斜体”。
说明:设置文本字体的倾斜。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
font-size: 25px; /* 设置字体大小 */
font-weight: 500; /* 设置字体粗细 */
font-style: italic; /* 设置字体倾斜 */
}
.one{
font-weight: 800;
font-size: 30px;
}
.two{
font-weight: bold;
font-size: 30px;
font-style: italic;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：
<span class="one">爱国明志</span> <!-- span可以指定一个或者多个字体的样式，而不是全部 -->
<span class="two">敢为人先</span>
</p>
</body>
</html> 
6.2使用CSS设置文本样式
6.2.1.文本水平对齐方式
使用 text-align 属性可以设置元素中文本的水平对齐方式。
语法:text-align :leftl right l center l justify;
参数:left 为左对齐，right为右对齐，center为居中，justify为两端对齐说明:设置对象中文本的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：爱国明志 敢为人先</p>
<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html> 
6.2.2.行高
段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用 line-height属性控制行与行之间的垂直间距。
语法:line-height:lengthl normal ;
参数:lengh为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。
说明:设置对象的行高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
}
p{
line-height: 200%; /* 设置行高为字体的两倍 */
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：爱国明志 敢为人先</p>
<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html> 
6.2.3.文本的修饰.
使用CSS样式可以对文本进行简单的修饰，text属性所提供的text-decoration 属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。
语法:text-decoration :underlinel blink| overline l line-through l none ;
参数:underline为下划线，blink为闪烁，overline为上划线，line-through为贯穿线none 为无装饰。
说明:设置对象中文本的修饰。对象a、u、ins的文本修饰默认值为underline。对象stike、s、del的默认值是 line-through。如果应用的对象不是文本，则此属性不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
}
p{
line-height: 200%; /* 设置行高为字体的两倍 */
}
.one{
font-size: 30px;
text-decoration: underline; /* 设置下划线 */
}
.two{
font-size: 30px;
text-decoration: line-through; /* 设置为贯穿线 */
}
.three{
font-size: 30px;
text-decoration:overline; /* 设置上划线 */
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：爱国明志 敢为人先</p>
<p><span class="one">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span class="two">江西应用工程职业学院</span>承扬传统，开拓新天。
<span class="three">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html> 
6.2.4.段落首行缩进
语法:text-indent:length ;
参数:length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。
说明:设置对象中的文本段落的缩进。本属应用于整块的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章</title>
<style>
h1{
font-family: 黑体; /* 设置字体 */
font-size: 25px; /* 设置字体大小 */
}
p{
font-family: Arial, Helvetica, sans-serif;
text-indent: 2em;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p>校训：爱国明志 敢为人先</p >
</body>
</html> 
6.2.5.首字下沉
在CSS样式中伪对象“:first-letter”可以实现对象内第一个字符的样式控制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
}
.one{
text-indent: 2em; /* 设置首行缩进 */
}
.second:first-letter{ /* 设置首字下沉 （注意：首字下沉跟行高冲突）*/
float: left;
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="one">校训：爱国明志 敢为人先</p>
<p class="second">江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。
江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html> 
6.2.6.字符间距
letter-spacing 为字符间距属性，可以设置字符与字符间的距离。
语法:letter-spacing:length lnormal ；
参数:normal为默认值，定义字符间的标准间距。length表示由浮点数字和单位标识符组成的长度值，允许为负值。
说明:该属性定义元素中字符之间插入多少空白符。如果指定为长度值，会调整字符之间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
}
.one{
text-indent: 2em; /* 设置首行缩进 */
}
.second:first-letter{ /* 设置首字下沉 （注意：首字下沉跟行高冲突）*/
float: left;
font-size: 2em;
font-weight: bold;
}
.one{
letter-spacing: 2em; /* 设置字符间距 */
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="one">校训：爱国明志 敢为人先</p>
<p class="second">江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。
江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.2.7.文本的截断
在 CSS 样式中 text-overflow 属性可以实现文本的截断效果，该属性包含 clip 和 ellipsis 两个属性值。前者表示简单的裁切，不显示省略标记(…);后者表示当文本溢出时显示省略标记(…)。语法:
text-overflow:clip | ellipsis ;
参数:clip定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省略
标记。说明:设置文本的截断。要实现溢出文本显示省略号的效果，除了使用text-overtlow属性以外，还必须配合 white-space:nowrap(强制文本在一行内显示)和overtlow:hidden(溢出内容为隐藏)同时使用才能实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
}
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>校训：爱国明志 敢为人先</p>
<p class="ellipsis">江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。
江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html> 
6.2.8.文本的颜色
在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>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
color: #ff0000; /* 设置文本颜色 */
}
p{
font-family: arial,"times new roman";
}
p.red{
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="red">校训：爱国明志 敢为人先</p >
<p class="red">江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。
江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p >
</body>
</html> 
6.2.9.文本的背景颜色
在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用 background-color 属性来设置网页背景颜色，还可以设置文本的背景颜色。语法:background-color :color | transparent
参数:color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。说明:background-color不能继承，默认值是transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
color: #ff0000; /* 设置文本颜色 */
}
.first{
background-color: aqua; /* 设置背景颜色 */
}
p{
font-family: arial,"times new roman";
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<p class="first">校训：爱国明志 敢为人先</p>
<p class="first">江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。
江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.3 使用CSS设置图像样式
6.3.1.设置图像边框
使用border来设置图像边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
color: #ff0000; /* 设置文本颜色 */
}
.first{
background-color: aqua; /* 设置背景颜色 */
}
p{
font-family: arial,"times new roman";
}
img{
border-color: #ff0000 #ff00ff #00ffff #ffff00; /* 上 右 下 左 */
border-width: 10px;
border-style: dashed dotted double solid; /* 同上 */
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png"/>
<p class="first">校训：爱国明志 敢为人先</p>
<p class="first">江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。
江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html>
6.3.2.图像缩放
使用width和height来实现控制图像的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
color: #ff0000; /* 设置文本颜色 */
}
.first{
background-color: aqua; /* 设置背景颜色 */
}
p{
font-family: arial,"times new roman";
}
img{
border-color: #ff0000 #ff00ff #00ffff #ffff00; /* 上 右 下 左 */
border-width: 10px;
border-style: dashed dotted double solid; /* 同上 */
}
img.test1{
width: 30%;
height: 40%;
}
img.test2{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png"/>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png" class="test1"/>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png" class="test2"/>
<p class="first">校训：爱国明志 敢为人先</p>
<p class="first">江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，
隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。
江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
</body>
</html> 
6.3.3.设置背景图像
在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面带来丰富的视觉效果。CSS 除了可以设置背景颜色，还可以用background-image 来设置背景图像。
语法:
background-image : url( url )| none ;
参数:u 表示要插人背景图像的路径。nome表示不加载图像。
说明:设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<body>标签中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
color: #ff0000; /* 设置文本颜色 */
}
.first{
background-color: aqua; /* 设置背景颜色 */
}
p{
font-family: arial,"times new roman";
}
img{
border-color: #ff0000 #ff00ff #00ffff #ffff00; /* 上 右 下 左 */
border-width: 10px;
border-style: dashed dotted double solid; /* 同上 */
}
img.test1{
width: 30%;
height: 40%;
}
img.test2{
width: 200px;
height: 150px;
}
body{
background-color: #00ffff;
background-image: url(img/da9951c8575a4806d9c65fab7c42c0c.png); /* 设置背景图像 */
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png"/>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png" class="test1"/>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png" class="test2"/>
<p >校训：爱国明志 敢为人先</p>
<p >江西应用工程职业学院！</p>
</body>
</html> 
6.3.4设置背景重复
景重复(background-repeat)属性的主要作用是设置背景图片以何种方式在网页中示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节的大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。语法:
background-repeat :repeat | no-repeat | repeat-x | repeat-y;参数:repeat表示背景图像在水平和垂直方向平铺，是默认值;repeat-x表示背景图像在水平方向平铺;repeat-y表示背景图像在垂直方向平铺;no-repeat表示背景图像不平铺。说明:设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
h1{
font-family: 黑体; /* 设置字体样式 */
text-align: center; /* 设置对齐方式 */
color: #ff0000; /* 设置文本颜色 */
}
.first{
background-color: aqua; /* 设置背景颜色 */
}
p{
font-family: arial,"times new roman";
}
img{
border-color: #ff0000 #ff00ff #00ffff #ffff00; /* 上 右 下 左 */
border-width: 10px;
border-style: dashed dotted double solid; /* 同上 */
}
/* img.test1{
width: 30%;
height: 40%;
}
img.test2{
width: 200px;
height: 150px;
} */
body{
background-color: #00ffff;
background-image: url(img/a7aaf65b0d6cf7e30a13af703752c78.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>江西应用工程职业学院</h1>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png"/>
<!-- <img src="img/a7aaf65b0d6cf7e30a13af703752c78.png" class="test1"/>
<img src="img/a7aaf65b0d6cf7e30a13af703752c78.png" class="test2"/> -->
<p >校训：爱国明志 敢为人先</p>
<p >江西应用工程职业学院！</p>
</body>
</html>
6.3.5.背景图像定位
语法：background-position :length l length ;
background-position : positional l position ;
参数:length为百分比或者由数字和单位标识符组成的长度值，position可取top、center、bottom、left、right之一。
说明:利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空格隔开，一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有let、center、right，关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。
6.3.5.1.使用关键字进行背景定位
1.使用关键字进行背景定位
关键字参数的取值及含义如下:
top:将背景图像同元素的顶部对齐。
bottom:将背景图像同元素的底部对齐。
lef:将背景图像同元素的左边对齐。
right;将背景图像同元素的右边对齐。
center:将背景图像相对于元素水平居中或重直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
body{
background-color: #00ffff;
}
#box{
width: 400px;
height: 700px;
border: 6px dashed #fff;
background-image: url(img/a7aaf65b0d6cf7e30a13af703752c78.png);
background-repeat: no-repeat;
background-position: center bottom; /* 定位背景向box的底部中央对齐 */
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html> 
6.3.5.2.使用长度进行背景定位
长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置
6.3.5.3.使用百分比进行背景定位
使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style>
body{
background-color: #00ffff;
}
#box{
width: 400px;
height: 700px;
border: 6px dashed #fff;
background-image: url(img/21b7ac4a018b5e69ab093280df08dcf.png);
background-repeat: no-repeat;
/* background-position: center bottom; */ /* 定位背景向box的底部中央对齐 */
/* background-position: 100px 50px; */ /* 使用长度进行背景定位 */
background-position: 100% 50%; /* 使用百分比进行背景定位 */
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
6.4 使用CSS设置表单样式
6.4.1.使用CSS修饰常用的表单元素
在前面章节中讲解的表单设计大多采用表格布局，这种布局方法对表单元素的样式控制很少，仅局限于功能上的实现。本节主要讲解如何使用 CSS 控制和美化表单元素。
6.4.1.1.修饰文本域
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过一个实例讲解怎样使用CSS修饰常用的表单元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style type="text/css">
.text1{
border: 1px solid #f60;
color: #03c;
}
.text2{
height: 20px;
padding-left: 20px;
border: 1px solid #c3c;
background: #fff url(img/password_bg.JPG) left center no-repeat;
}
.area{
border: 1px solid #00f;
overflow: auto;
width: 99%;
height: 100px;
}
</style>
</head>
<body>
<p>
<input type="text1" name="nourmal"/>默认样式的文本域
</p>
<p>
<input type="text" name="chbd" value="输入的文字显示为蓝色" class="text1"/>改变边框颜色和文字的文本域，看起来更加醒目
</p>
<p>
<input type="password" name="pass" class="text2"/>增加了背景同图片的文本域，看起来更加形象直观
</p>
<p>
<textarea name="cha" cols="45" rows="area">改变边框颜色的多行文本域</textarea>
</p>
</body>
</html>
6.4.1.2.修饰按钮
按钮主要用手控制网页中的表单。通过CSS样式可以对按钮的字体、色、边框以及青景图像加以控制。下面以示例的形式介绍如何使用CSS修饰按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</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);
width: 107px;
height: 37px;
border: none;
font-size: 14px;
color: #d84700;
cursor: pointer;
}
</style>
</head>
<body>
<p>
<input type="submit" name="button" value="提交"/>默认风格的“提交”按钮
</p>
<p>
<input type="submit" name="button01" value="自适应宽度按钮" id="button1" class="btn01"/>改变边框颜色和文字的文本域，看起来更加醒目
</p>
<p>
<input type="submit" name="buttono2" id="button2" class="btn02" value="免费注册"/>增加了背景同图片的文本域，看起来更加形象直观
</p>
</body>
</html>
6.4.1.3.制作登录表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第六章 元素应用 CSS</title>
<style type="text/css">
.login{
margin: 0 auto;
width: 280px;
padding: 14px;
border: dashed 2px #b7ddf2;
}
.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/username.JPG) no-repeat left center;
}
.login.password input{
background: #fff url(img/lock.JPG)no-repeat left center;
}
.login.btns{
text-align: center;
}
</style>
</head>
<body>
<div class="login">
<h2>用户登录</h2>
<div class="content">
<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="btns">
<input type="submit" name="button1" id="button1" value="登录"/>
<input type="button" name="button2" id="button2" value="注册"/>
</div>
</form>
</div>
</div>
</body>
</html>
6.5 综合案例——商城的注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
font-size: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 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;
}
</style>
<link type="text/css" href="CSS/style.css" rel="stylesheet"/>
</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/logo.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>