6.1 使用CSS设置字体样式
在学习 HTML时，通常也会使用HTML,对文本字体进行一些非常简单的样式设置，而使用CSS 对字体样式进行设置远比使用 HTML灵活、精确得多,CSS样式中有关字体样式的常用属性见表6-1。
6.1.1.字体类型
通常，访问者的计算机中不会安装诸如“方正综艺简体”和“方正水柱简体”等特殊字体，如果网页设计者使用这些字体，极有可能造成访问者看到的页面效果与设计者的本意存在很大差异。为了避免这种情况的发生，一般使用系统默认的“宋体”“仿宋体”“黑体”“楷体”、Aial、Verdana 和 Times New Roman 等常规字体。CSS 提供 font-family 属性来控制文本的字体类型。
font-family: fangsong;6.1.2.字体大小
在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中使用font-size 属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”(绝对位)、“pt”(绝对单位)、“em”(相对单位)和“%”(相对单位)等。
font-size: 25px;
6.1.3.字体粗细
Css样式中使用 font-weight 属性设置字体的粗细，它包含 normal、bold、bolder、
e、100、200、300、400、500、600、700、800 和 900 多个属性值。语法:
font-weight: 500;
6.1.4.字体倾斜
CSS 中的 font-style 属性用来设置字体的倾斜。语法:
font-style: italic;
6.2 使用CSS设置文本样式
网页的排版离不开对文本的设置，本节主要讲述常用的文本样式，包括文本对齐方式行高、文本修饰、段落首行缩进、首字下沉、字符间距、文本截断、文本颜色及背景色等,CSS 样式中有关文本样式的常用属性见表 6-2。
6.2.1.文本水平对齐方式
使用 text-align 属性可以设置元素中文本的水平对齐方式。语法:
text-align: center;
6.2.2.行高
段落中两行文本之间垂直的距离称为行高。在 HTML, 中是无法控制行高的，在 CSs 样式中，使用 line-height 属性控制行与行之间的垂直间距。语法:
line-height: 150%;
6.2.3.文本的修饰.
使用CSS样式可以对文本进行简单的修饰，text属性所提供的text-decoration 属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。语法:
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
6.2.4.段落首行缩进
首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变其目的是便于阅读和区分文章整体结构，在 Web页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果。在CSS样式中 text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent ,但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或indent ,外边距创造这种效果。语法:
text-indent: 2em;
6.2.5.首字下沉
在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第-个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。在CSS样式中伪对象“:first-letter”可以实现对象内第一个字符的样式控制。
float:left;
font-size: 2em;
font-weight: 900;6.2.6.字符间距
letter-spacing 为字符间距属性，可以设置字符与字符间的距离。语法:
letter-spacing: 2em;
6.2.7.文本的截断
在 CSS 样式中 text-overlow 属性可以实现文本的截断效果，该属性包含 clip和ellipsis 两个属性值。前者表示简单的裁切，不显示省略标记(…);后者表示当文本溢出时显示省略标记(…)。语法:
text-overflow: ellipsis;
6.2.8.文本的颜色
在CSS样式中，对文本增加颜色修饰十分简单，只需添加color属性即可。color 属性的语法:
color:颜色值;
color: #ff0000;
6.2.9.文本的背景颜色
在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用 background-color属性来设置网页背景颜色，还可以设置文本的背景颜色。语法:
border-color: #ff0000 #00ff00 #0000ff #000000;
border-top-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
6.3 使用CSS设置图像样式
图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍CSS设置图像风格样式的方法，包括图像的边框图像的缩放和背景图像等。
图像即img元素，在页面中的风格样式仍然用盒模型来设计。CSS样式中有关图像控制的常用属性见表6-3。
6.3.1.设置图像边框
图像的边框就是利用 border属性作用于图像元素而呈现的效果。在HTML中可以直通过<img>标记的 border 属性值为图像添加边框，属性值为边框的粗细，以像素为单位,而控制边框的粗细。当设置 border属性值为0时，则显示为没有边框。
6.3.2.图像缩放
使用CSS样式控制图像的大小，可以通过 width 和 height 两个属性来实现。需要注意的是，当 width 和 height 两个属性的取值使用百分比数值时，它是相对于父元素而言的,如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。
width: 50%;
height: 50%;6.3.3.设置背景图像
在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面带来丰富的视觉效果。CSS除了可以设置背景颜色，还可以用background-image来设置背景图像。语法:
background-image: url(img/bg.png);
6.3.4设置背景重复
背景重复(background-repeat)属性的主要作用是设置背景图片以何种方式在网页中路通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节的示。
大小。在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希沿着一个方向平铺，可以使用 background-repeat属性来控制。语法:
background-repeat: no-repeat;6.3.5.背景图像定位
当在网页中插入背景图像时，每一次插入的位置，都是位于网页的左上角，可以通过background-position 属性来改变图像的插人位置。语法:
background-position: right center;
6.3.5.1.使用关键字进行背景定位
关键字参数的取值及含义如下，
top:将背景图像同元素的顶部对齐
bottom:将背景图像同元素的底部对齐
lef:将背景图像同元素的左边对齐
night:将背景图像同元素的右边对齐。
center:将背景图像相对于元素水平居中或垂直居中。
6.3.5.2.使用长度进行背景定位
长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置
6.3.5.3.使用百分比进行背景定位
使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长单位定位时，使用背景图像和元素的左上角为对齐基点。
6.4 使用CSS设置表单样式
6.4.1.使用CSS修饰常用的表单元素
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过一个实例讲解怎样使用 CSS 修饰常用的表单元素
6.4.1.1.修饰文本域
文本城主要用于采集用户在其中编辑的文字信息，通过CSS 样式可以对文本域内的字颜色以及背景图像加以控制。下面以示例的形式介绍如何使用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(images/password_bg.JPG) 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>
6.4.1.2.修饰按钮
按钮主要用于控制网页中的表单。通过CSS样式可以对按钮的字体、颜色、边框以及書景图像加以控制。下面以示例的形式介绍如何使用 CSS 修饰按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮修饰</title>
</head>
<style type="text/css">
.btn01{
background:url(img/btn_bg02.jpg) repeat-x; /*背景图像水平重复*/
border:1px solid #f00;/*1px 实线红色边框*/
height:32px;
font-weight:bold;/*字体加粗*/
padding-top:2px;
cursor:pointer;/*鼠标样式为手形*/
font-size:14px;
color:#FFF;/*文字颜色为白色*/
}
.btn02{
background:url(img/btn_bg03.jpg)00no-repeat;/*背景图像无重复*/
width:107px;
height: 37px;
border:none;
font-size: 14px;
font-weight: bold;
color: #d84700;
cursor: pointer;
}
</style>
</head>
</html>
6.4.1.3.制作登录表单
在许多网站中都有登录表单的应用，而录表单所包含的元素通常有用户名文本域、密码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。
6.5 综合案例——商城的注册页面
6.5.1.前期准备
（1）栏目目录结构。在栏目文件夹下创建文件夹images和 css，分别用来存放图像素材
和外部样式表文件
(2)页面素材。将本页面需要使用的图像素材存放在文件夹images下
（3）外部样式表。在文件夹css下新建一个名为style.css的样式表文件名
6.5.2.制作页面
*{
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: #000;
}
.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: #000;
}
.loginBox{
width: 1050px;
margin: 30px auto; /* 上下边距为30px,水平居中对齐 */
position: relative; /* 相对定位 */
}
.regList{
height: 35px;
line-height: 35px; /* 行高等于设定的高度，内容垂直居中 */
margin-bottom: 30px; /* 上下边距30px */
position: relative;/* 相对定位 */
}
.regList label{
float: left; /* 向左浮动 */
width: 105px;
margin-right: 10px; /* 右外边距10px */
text-align: right; /* 文本水平右对齐 */
color: #999;
}
.regList input{
margin: 0; /* 外边距0px */
padding: 0; /* 内边距0px */
width: 283px;
height: 33px;
border: 3738400 1px solid; /* 1px深红色实线边框 */
background: #fefdff; /* 浅黄色背景 */
padding-left: 3px; /* 左内边距3px */
}
.regList .yanzheng{
width: 135px;
}
.regList img{
left: 260px; /* 距离容器左侧为260px */
position: adsolute;
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
<link type="text/css" href="css/CSS.css" rel="stylesheet"/>
</head>
<body style="background: #fff;">
<div class="loginLogo"></div>
<div class="logoMid"></div>
<h1 class="logo" style="height: 71px; padding-top: 10px;">
<a href="index.html">
<img src="images/logo.jpg"/>
</a>
</h1>
<div class="loginBox">
<img src="images/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="images/yanzheng.jpg" width="103" height="38"/>
</div>
<div class="xieyi">
<input type="checkbox"/>
我已经阅读并同意<a href="#">商城用户注册协议</a>
</div>
<div class="reg">
<input type="image" src="images/reg.jpg"/>
</div>
</form>
<div class="clears"></div>
</div>
</div>
</div>
</body>
</html>
