共计 10904 个字符，预计需要花费 28 分钟才能阅读完成。
6.1 使用 CSS 设置字体样式
6.1.1. 字体类型
语法：
font-fanily: 字体名称；
参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。
说明：用 font-family 属性可控制显示字体。不同的操作系统，其字体名是不同的。对于 Windows 系统，其字体名就如 Word 中的“字体”列表中所列出的字体名称。
江西应用工程职业学院
校训：爱国明治，敢为人先
}6.1.2. 字体大小
语法：
font-size: 绝对尺寸 | 相对尺寸
参数：绝对字体尺寸是根据对象字体进行调节的，包括 xx-mall、x-small, small、c dium, large, x-large 和 xx-large 的 7 种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者 em 以相对父元素大小的方式来设置字体尺寸。
h1{font-size: 20px;}运行结果：
6.1.3. 字体粗细
语法：
font-weight:bold | number | normal | lighter | 100-900
参数：nomal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，lighter 表示比默认字体还细，100~900 共分为 9 个层次 (100、200、…、900，数字越小字体越细、数字越大字体越粗，数字值 400 相当于关键字 normal,700 等价于 bold)。
font-weight: 500;6.1.4. 字体倾斜
语法：
font-style:normal | italic | obinque
参数：normal 为“正常”（默认值），italic 为“斜体”，oblique 为“倾斜体”。
font-style: italic;运行结果：
6.2 使用 CSS 设置文本样式
6.2.1. 文本水平对齐方式
语法：
text-align:left | right | center | justify;
参数：left 为左对齐，right 为右对齐，center 为居中，justify 为两端对齐。
text-align: center;运行结果：
6.2.2. 行高
语法：
line-heighi:length | normal;
参数：length 为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百
分比取值是基于字体的高度尺寸。normal 为默认行高。
p{line-height: 200%;}运行结果：
6.2.3. 文本的修饰
语法：
text-decoration:underline | blink | overline | line-through | none;
参数：underline 为下划线，blink 为闪烁，overline 为上划线，line-through 为贯穿线，none 为无装饰。
说明：设置对象中文本的修饰。对象 a、u、ins 的文本修饰默认值为 underline。对象 stike、8、del 的默认值是 line-through。如果应用的对象不是文本，则此属性不起作用。
江西应用工程职业学院
校训：爱国明治 敢为人先
江西应用工程职业学院 系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应
用工程职业学院 承扬传统，开拓新天。江西应用工程职业学院 将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
运行结果：
6.2.4. 段落首行缩进
语法：
text-indent:length;
参数：length 为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。
江西应用工程职业学院
校训：爱国明治 敢为人先
江西应用工程职业学院 系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应
用工程职业学院 承扬传统，开拓新天。江西应用工程职业学院 将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
运行结果：
6.2.5. 首字下沉
在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在 CSS 样式中伪对象“：first-letter”可以实现对象内第一个字符的样式控制。
江西应用工程职业学院
校训：爱国明治 敢为人先
江西应用工程职业学院 系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应
用工程职业学院 承扬传统，开拓新天。江西应用工程职业学院 将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
运行结果：
6.2.6. 字符间距
letter-spacing 为字符间距属性，可以设置字符与字符间的距离。
语法：
letter-spacing:length | normal;
参数：nomal 为默认值，定义字符间的标准间距。length 表示由浮点数字和单位标识体组成的长度值，允许为负值。
说明：该属性定义元素中字符之间插入多少空白符。如果指定为长度值，会调整字符之间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤。
.first{letter-spacing: 2em;}运行结果：
6.2.7. 文本的截断
语法：
text-overflow:clip | ellipsis;
参数：dlip 定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省略标记。
说明：设置文本的截断。要实现溢出文本显示省略号的效果，除了使用 text-ovelow 属性以外，还必须配合 white-space: nowrap（强制文本在一行内显示）和 overflow: hidden（溢出内容为隐藏）同时使用才能实现。
.second{
width: 300px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}运行结果：
6.2.8. 文本的颜色
语法：
color: 颜色;
h1{color: #ff0000;}运行结果：
6.2.9. 文本的背景颜色
语法：
background-color:color | transparent
参数：color 用于指定颜色。transparent 表示透明的意思，也是浏览器的默认值。
说明：background-color 不能继承，默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。
.first{background-color: #ff0000;}运行结果：
6.3 使用 CSS 设置图像样式
图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍 CSS 设置图像风格样式的方法，包括图像的边框、图像的缩放和背景图像等。
6.3.1. 设置图像边框
图像的边框就是利用 border 属性作用于图像元素而呈现的效果。在 HTML 中可以直接通过 标记的 border 属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。
江西应用工程职业学院
校训：爱国明治 敢为人先
江西应用工程职业学院 系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应
用工程职业学院 承扬传统，开拓新天。江西应用工程职业学院 将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
![]()
运行结果：
6.3.2. 图像缩放
使用 CSS 样式控制图像大小，可以通过 width 和 height 两个属性来实现。需要注意的是，当 widh 和 height 两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于 body 的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。
江西应用工程职业学院
校训：爱国明治 敢为人先
江西应用工程职业学院 系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应
用工程职业学院 承扬传统，开拓新天。江西应用工程职业学院 将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
![]()
![]()
![]()
运行结果：
6.3.3. 设置背景图像
语法：
background-image:url(url) | none;
参数：url 表示要插人背景图像的路径。nome 表示不加载图像。
说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到
江西应用工程职业学院
校训：爱国明治 敢为人先
江西应用工程职业学院 系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公
办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应
用工程职业学院 承扬传统，开拓新天。江西应用工程职业学院 将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想
融会的新篇章！
![]()
![]()
![]()
运行结果：
#bg{
width: 660px;
height: 330px;
background-color: #ff0000;
background-image: url(img/xiaohui.png);
}运行结果：
6.3.4 设置背景重复
语法：
backyround-repeat;repeat | no-repeat | repeat-x | repeat-y;
参数：repeat 表示背景图像在水平和垂直方向平铺，是默认值；repeat-x 表示背景图像在水平方向平铺；repeat-y 表示背景图像在垂直方向平铺；no-repeat 表示背景图像不平铺。
说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。
background-repeat: no-repeat;
运行结果：
6.3.5. 背景图像定位
语法：
background-position:length | length;
background-position:positional | position;
参数：length 为百分比或者由数字和单位标识符组成的长度值，position 可取 top、center、bottom、left、right 之一。
说明：利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空格隔开，一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有 left、center、right, 关键宇在垂直方向的主要 top、center、botom。水平方向和垂直方向相互搭配使用。
6.3.5.1. 使用关键字进行背景定位
关键字参数的取值及含义如下：
top: 将背景图像同元素的顶部对齐。
bottom: 将背景图像同元素的底部对齐。
Left: 将背景图像同元素的左边对齐。
right: 将背景图像同元素的右边对齐。
center：将背景图像相对于元素水平居中或垂直居中。
background-position: center bottom;运行结果:
6.3.5.2. 使用长度进行背景定位
长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置。
background-position: 100px 50px;运行结果：
6.3.5.3. 使用百分比进行背景定位
使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。
background-position: 30% 50%;运行结果：
6.4 使用 CSS 设置表单样式
在前面章节中讲解的表单设计大多采用表格布局，这种布局方法对表单元素的样式控制
很少，仅局限于功能上的实现。本节主要讲解如何使用 CSS 控制和美化表单。
6.4.1. 使用 CSS 修饰常用的表单元素
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通过一个实例讲解怎样使用 CSS 修饰常用的表单元素。
6.4.1.1. 修饰文本域
文本域主要用于采集用户在其中编辑的文字信息，通过 CSS 样式可以对文本域内的字
体、颜色以及背景图像加以控制。下面以示例的形式介绍如何使用 CSS 修饰文本域。
文本域修饰
默认样式的文本域
改变边框颜色和文字颜色的文本域，看起来更加醒目
增加了背景图片的文本域，看起来更加形象直观
运行结果：
6.4.1.2. 修饰按钮
按钮主要用于控制网页中的表单。通过 CSS 样式可以对按钮的字体、颜色、边框以及
背景图像加以控制。下面以示例的形式介绍如何使用 CSS 修饰按钮。
按钮修饰
默认风格的“提交”按钮
自适应宽度按钮
固定背景图片的按钮
运行结果：
6.4.1.3. 制作登录表单
在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、密码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。
6.5 综合案例——商城的注册页面
6.5.1. 前期准备
/* 页面全局样式——父元素 */
*{
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; /* 底部边框 1px，深灰色实线 */
}
.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; /* 上下边距为 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{ /* 注册表单中 input 元素的样式 */
margin: 0; /* 外边距 0px*/
padding: 0; /* 内边距 0px*/
width: 283px;
height: 33px;
border: 3738400 1px solid; /*1px 深红色实线边框 */
background: #feffdf; /* 浅黄色背景 */
padding-left: 3px; /* 左内边距 3px*/
}
.regList.yanzheng{ /* 注册表单中验证码区域的样式 */
width: 135px;
}
.regList img{ /* 注册表单中验证码图片的样式 */
left: 260px; /* 距离容器左侧为 260px*/
position: absolute; /* 绝对定位 */
}
.xieyi{ /* 注册表单中注册协议的样式 */
height: 30px;
line-height: 30px; /* 行高等于设定的高度，内容在垂直方向上居中对齐 */
font-size: 12px;
padding-left: 115px; /* 左内边距 115px*/
}
.xieyi input{ /* 注册表单中接受协议复选框的样式 */
position: relative; /* 相对定位 */
top: 2px; /* 距离容器顶部为 2px*/
}
.xieyi a{ /* 注册表单中协议链接的样式 */
color: #7BC144; /* 绿色文字 */
}
.reg{ /* 注册表单中注册按钮的样式 */
padding-left: 115px; /* 左内边距 115px*/
margin-top: 10px; /* 上外边距 10px*/
}
.chengnuo{ /* 注册表单中右侧的样式 */
position: absolute; /* 绝对定位 */
right: 0;
top: 0;
}6.5.2. 制作页面
会员注册
![]()
![]()
运行结果：
原文地址: 第六章元素应用 CSS
