6.1 使用 CSS 设置字体样式

        在学习 HTML 时，通常也会使用 HTML 对文本字体进行一些非常简单的样式设置，而使用 CSS 对字体样式进行设置远比使用 HTML 灵活、精确得多。

6.1.1. 字体类型

        字体具有两方面的作用：一是传递语义功能，二是有美学效应。由于不同的字体给人带来不同的风格感受，所以对于网页设计人员来说，首先需要考虑的问题就是准确地选择字体。
通常，访问者的计算机中不会安装诸如“方正综艺简体”和“方正水柱简体”等特殊字体，如果网页设计者使用这些字体，极有可能造成访问者看到的页面效果与设计者的本意存在很大差异。为了避免这种情况的发生，一般使用系统默认的“宋体”“仿宋体”“黑体”“楷体”、Aial、Verdana 和 Times New Roman 等常规字体。
          CSS 提供 font-family 属性来控制文本的字体类型。
        格式如下：
        font-family: 字体名称；
        参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。
        说明：用 font-family 属性可控制显示字体。不同的操作系统，其字体名是不同的。对于 Windows 系统，其字体名就如 Word 中的“字体”列表中所列出的字体名称。

6.1.2. 字体大小

        在设计页面时，通常使用不同大小的字体来突出要表现的主题，在 CSS 样式中使用 说 font- size 属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”（绝对【例位)、“pt”(绝对单位)、“em”(相对单位)和“%”(相对单位)等。
        语法：
        font-size: 绝对尺寸 1 相对尺寸；
        参数：绝对字体尺寸是根据对象字体进行调节的，包括 xx-mall、x-small、small、medium, large,x-large 和 xx-large 的 7 种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者 em 以相对父元素大小的方式来设置字体尺寸。

6.1.3. 字体粗细 

        css 样式中使用 font-weight 属性设置字体的粗细，它包含 normal、bold、bolder、her、100、200、300、400、500、600、700、800 和 900 多个属性值。语法：
        rdana 和 fant-weight:bold I number I normal l lighter| 100-900:
         参数：normal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，lighter 表示比默字体还细，100~900 共分为 9 个层次 (100、200、…、900，数字越小字体越细、数字越大字体越粗，数字值 400 相当于关键字 normal，700 等价于 bold)。
式中使用 说明：设置文本字体的粗细。

#id1{font-weight: 600;}

6.1.4. 字体倾斜

        CSS 中的 font-style 属性用来设置字体的倾斜。语法：
        font-style:normallitalicloblique;
        参数：normal 为“正常”(默认值)，italic 为“斜体”，oblique 为“倾斜体”。说明：设置文本字体的倾斜。

#id2{font-style: italic; /* 字体倾斜 */}

6.2 使用 CSS 设置文本样式

        网页的排版离不开对文本的设置，本节主要讲述常用的文本样式，包括文本对齐方式

CSS 样式中有关文本样式的常用属性见表 6 -2。

6.2.1. 文本水平对齐方式

        使用 text-align 属性可以设置元素中文本的水平对齐方式。语法：
        text-align:leftl right I center I justify;
        参数：left 为左对齐，right 为右对齐，center 为居中，justify 为两端对齐。说明：设置对象中文本的对齐方式。

6.2.2. 行高

        段落中两行文本之间垂直的距离称为行高。在 HTML 中是无法控制行高的，在 CSS 样式中，使用 line-height 属性控制行与行之间的垂直间距。语法：
        line-height:lengthl normal;
        参数：length 为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal 为默认行高。
说明：设置对象的行高。

line-height: 200%;  /* 行高的设置 */

6.2.3. 文本的修饰.

        使用 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。如果应用的对象不是文本，则此属性不起作用。

#id3{text-decoration: underline;  /* 下划线的设置 */}
			#id4{text-decoration: overline; /* 上划线的设置 */}
			#id5{text-decoration: line-through; /* 贯穿线的设置 */}

6.2.4. 段落首行缩进

6.2.5. 首字下沉

在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第行保持不 一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在 CSS 样式中伪对象“：first-letter”可以实现对象内第一个字符的样式控制。

.second:first-letter{
				float: left;
				font-size: 2em; /* 首字下沉，伪类标签 */
				font-weight: 900;
			}

6.2.6. 字符间距

以上示例中，如果不使用伪对象“：first-letter”来实现首字下沉的效果，就要对段落中第一个文字添加 标签，然后定义 标签的样式。但是这样做的后果是，每个段落都要对第一个文字添加 标签，非常烦琐。因此，使用伪对象“：first-letter，来实现首字下沉就提高了网页排版的效率。

.first{letter-spacing: 2em; /* 字符间距，可以用 em，也可以用像素点 em*/}

6.2.7. 文本的截断

在 CSS 样式中 text-overflow 属性可以实现文本的截断效果，该属性包含 clip 和 ellipsis 个属性值。前者表示简单的裁切，不显示省略标记 (·)；后者表示当文本溢出时显示省略标记(…)。语法：
text-overflow:clip I ellipsis;
参数：clip 定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省略标记。
说明：设置文本的截断。要实现溢出文本显示省略号的效果，除了使用 text-overflow 属性以外，还必须配合 white-space：nowrap（强制文本在一行内显示）和 overflow：hidden 解用户需 (溢出内容为隐藏) 同时使用才能实现。

.second{
				width: 300px;
				height: 50px;
				text-overflow: ellipsis;  /* 文本的截断 */
				overflow: hidden;
				white-space: nowrap;  /* 搭配这个使用才会有省略号 */
			}

6.2.8. 文本的颜色

h1{color: #ffff00;}

6.2.9. 文本的背景颜色

在 HTML 中，可以使用标签的 bgcolor 属性设置网页的背景颜色。而在 CSS 里，不仅可以用 background-color 属性来设置网页背景颜色，还可以设置文本的背景颜色。语法：
background-color:color I transparent
参数：color 用于指定颜色。transparent 表示透明的意思，也是浏览器的默认值。说明：background-color 不能继承，默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。

background-color: #ff0000;

6.3 使用 CSS 设置图像样式

图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍 CSS 设置图像风格样式的方法，包括图像的边框、图像的缩放和背景图像等。
图像即 img 元素，在页面中的风格样式仍然用盒模型来设计。CSS 样式中有关图像控制的常用属性见表 6 -3。

6.3.1. 设置图像边框

图像的边框就是利用 border 属性作用于图像元素而呈现的效果。在 HTML 中可以直接通过 标记的 border 属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置 border 属性值为 0 时，则显示为没有边框。例如以下代码：

通过浏览器的解析，图像的边框粗细从左至右依次递增，效果如图 6 -14 所示。使用这种方法存在很大的限制，即所有的边框都只能是黑色，而且风格十分单一，都是实线，只是在边框粗细上能够进行调整。
如果希望更换边框的颜色，或者换成虚线边框，仅仅依靠 HTML 都是无法实现的。下面的实例讲解了如何用 CSS 样式美化图像的边框。

img{
				/*border: #ff0000 10px dashed;*/
				border-color: #ff0000 #ffff00 #ff00ff #00ff00; /* 上右下左 */
				border-style: dashed dotted double solid;
				border-width: 10px;
			}

6.3.2. 图像缩放

6.3.3. 设置背景图像

在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面带来的视觉效果。CSS 除了可以设置背景颜色，还可以用 background-image 来设置背景图语法：
background-image:url(url) I none;
参数：url 表示要插入背景图像的路径。nome 表示不加载图像。
说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到 cbod>标签中。

body{
				background-color: #000FFF;
				background-image: url(img/bgground.png); /* 设置背景图像 */
			}

 6.3.4 设置背景重复

背景重复 (background-repeat) 属性的主要作用是设置背景图片以何种方式在网页中显示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节的大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用 background-repeat 属性来控制。语法：
background-repeat:repeat I no-repeat I repeat-x I repeat-y;
参数：repeat 表示背景图像在水平和垂直方向平铺，是默认值；repeat- x 表示背景图像在水平方向平铺；repeat- y 表示背景图像在垂直方向平铺；no-repeat 表示背景图像不平铺
说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。

				background-repeat: repeat-x;

				background-repeat: no-repeat;

6.3.5. 背景图像定位

当在网页中插入背景图像时，每一次插入的位置，都是位于网页的左上角，可以通过 background-position 属性来改变图像的插入位置。语法：

background-position:length I length;
background-position:positional I position; position 可取 top、
参数：length 为百分比或者由数字和单位标识符组成的长度值，
center、bottom、left、right 之一。
说明：利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空格隔开，一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有 left、center、right，关键字在垂直方向的主要有 top、center、bottom。水平方向和垂直方向相互搭配使用。设置背景定位有以下 3 种方法。
 

6.3.5.1. 使用关键字进行背景定位

. 使用关键字进行背景定位
关键字参数的取值及含义如下：
top：将背景图像同元素的顶部对齐。
bottom：将背景图像同元素的底部对齐。
left：将背景图像同元素的左边对齐。
right：将背景图像同元素的右边对齐。
center：将背景图像相对于元素水平居中或垂直居中。

background-position: right top;

6.3.5.2. 使用长度进行背景定位

长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置
【例 6.19】使用长度进行背景定位，本例浏览效果如图 6 -19 所示。
在例 6.18 的基础上，修改 box 的 CSS 定义，代码如下：
#box
width:900px; /* 设置元素的宽度 */
height:700px；/* 设置元素的高度 */
border:6px dashed #fff; /*6px 白色虚线边框 */
background-image:url(images/fu.JPG)；/* 背景图像 */
background-repeat:no-repeat; /* 背景图像不重复 */
background-position:150px 70px; /* 定位背景向在距容器左侧 150px，距顶部 70px 的
位置 */

background-position: 100px 50px; /* 使用长度进行定位，左右 */

6.3.5.3. 使用百分比进行背景定位

				background-position: 20% 50%;

6.4 使用 CSS 设置表单样式

在前面章节中讲解的表单设计大多采用表格布局，这种布局方法对表单元素的样式控制很少，仅局限于功能上的实现。本节主要讲解如何使用 CSS 控制和美化表单元素。
6.4.1. 使用 CSS 修饰常用的表单元素

6.4.1.1. 修饰文本域

表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过一个实例讲解怎样使用 CSS 修饰常用的表单元素。

	
		
		
		
	
	
		

			默认样式的文本域
		
		

			改变边框颜色和文字的文本域，看起来更加醒目
		
		

			增加了背景同图片的文本域，看起来更加形象直观
		
		

			改变边框颜色的多行文本域
		
	

6.4.1.2. 修饰按钮

按钮主要用手控制网页中的表单。通过 CSS 样式可以对按钮的字体、色、边框以及青景图像加以控制。下面以示例的形式介绍如何使用 CSS 修饰按钮。

	
		
		
		
	
	
		

			默认风格的“提交”按钮
		
		

			改变边框颜色和文字的文本域，看起来更加醒目
		
		

			增加了背景同图片的文本域，看起来更加形象直观
		
		
	

6.4.1.3. 制作登录表单

	
		
		
		
	
	
		

			
用户登录
			

				

					
用户名：
						
					
					
密  码
					
						
					
					

						
						
					
				
			
		
	

6.5 综合案例——商城的注册页面

	
		
		
		
		
	
	
		

			

				

					
						
					
				
				

					
					

						

							*用户名
							请输入邮箱 / 用户名 / 手机号
						
						

							*请设置密码
							
						
						

							请确认密码
							
						
						

							验证码
							
							
						
						

							我已阅读并同意  商城用户注册协议