6.1 使用CSS设置字体样式
在CSS中，设置字体样式（font style）是通过一系列与字体相关的属性来实现的。以下是一些常用的字体属性及其用法：
6.1.1.字体类型
在CSS中，设置字体类型是通过font-family属性来实现的。font-family属性允许你指定一个或多个字体系列名称，浏览器会按照你提供的顺序尝试加载这些字体。如果用户的计算机上没有安装第一个指定的字体，浏览器会尝试加载第二个指定的字体，依此类推，直到找到一个可用的字体或者尝试完所有指定的字体。
以下是使用font-family属性的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
h1{
font-family: fangsong;
}
</style>
</head>
<body>
<h1 >
你好世界
</h1>
</body>
</html>
6.1.2.字体大小
在CSS中，设置字体大小是通过font-size属性来实现的。font-size属性允许你指定文本字符的大小，可以使用多种单位来设置，包括像素（px）、相对单位（em、rem）、百分比（%）等。
以下是使
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
h1{
font-family: fangsong;
font-size: 30px;
}
</style>
</head>
<body>
<h1 >
你好世界
</h1>
</body>
</html>用font-size属性的示例：
6.1.3.字体粗细
在CSS中，设置字体粗细是通过font-weight属性来实现的。font-weight属性允许你指定字体的粗细程度，可以使用预定义的关键字或数字值来设置。
以下是使用font-weight属性的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
h1{
font-family: fangsong;
font-size: 30px;
font-weight: 900;
}
</style>
</head>
<body>
<h1 >
你好世界
</h1>
</body>
</html>
6.1.4.字体倾斜
在CSS中，设置字体倾斜是通过font-style属性来实现的。这个属性允许你指定文本是否应该被渲染为斜体。
以下是使用font-style属性的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
h1{
font-family: fangsong;
font-size: 30px;
font-weight: 900;
font-style: italic;
}
</style>
</head>
<body>
<h1 >
你好世界
</h1>
</body>
</html>
6.2 使用CSS设置文本样式
在CSS中，设置文本样式涉及多个属性，这些属性允许你控制文本的外观，包括字体、颜色、大小、对齐方式、行高、字间距、装饰（如下划线、删除线）等
6.2.1.文本水平对齐方式
在CSS中，有多种方式可以对文本进行水平对齐。下面是一些常见的方法：
1. 使用 text-align 属性
text-align 属性是最常用和直接的方法，适用于块级元素（如 <div>、<p> 等）内部的文本对齐。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
h1{
text-align: center;
}
</style>
</head>
<body>
<h1 >
你好世界
</h1>
</body>
</html>
6.2.2.行高
在CSS中，line-height 属性用于设置文本行之间的垂直间距，也就是行高。行高会影响文本的可读性和整体布局。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
p{
line-height: 200%;
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
</body>
</html>
6.2.3.文本的修饰.
在CSS中，有多种方法可以对文本进行修饰，从基本的字体样式到高级的文本效果。以下是对文本修饰。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
p{
line-height: 200%;
text-decoration: underline;
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
</body>
</html>
6.2.4.段落首行缩进
在CSS中，段落首行缩进可以通过text-indent属性来实现。这个属性允许你为段落的第一行设置一个固定的缩进量，通常用于增强文本的可读性和美观性，尤其是在排版较长的文章时。
以下是使用text-indent属性的示例：
6.2.5.首字下沉
在CSS中，实现首字下沉效果通常依赖于伪元素::first-letter以及浮动属性float。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
p::first-letter {
color: #c69c6d;
/* 设置首字母颜色（可选） */
font-size: 2em;
/* 设置首字母字体大小 */
float: left;
/* 将首字母浮动到左侧 */
margin: 0.1em 0.2em 0 0;
/* 调整首字母与后续文本之间的间距 */
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
</body>
</html>
6.2.6.字符间距
CSS字符间距是控制文本中字符之间距离的重要样式属性，它直接影响文本的阅读体验和视觉美感。在CSS中，主要通过letter-spacing属性来设置字符间距。
letter-spacing属性的使用
letter-spacing属性用于设置文本字符之间的间距。可以通过指定一个固定的像素值（如1px、2px等）或者一个相对值（如0.1em、0.2em等，其中em是相对于当前字体大小的单位）来调整字符之间的间距。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
p {
letter-spacing: 2em;
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
</body>
</html>效果浏览如图：
6.2.7.文本的截断
CSS文本的截断是指当文本内容超过其容器的大小限制时，通过CSS样式来截断文本并显示省略号（...）或其他自定义的截断字符，以提示用户还有更多内容未显示。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
</body>
</html>效果浏览如图：
6.2.8.文本的颜色
CSS文本的颜色主要通过c
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
p {
color: #ff0000;
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
</body>
</html>olor属性来设置。
效果浏览如图：
6.2.9.文本的背景颜色
在CSS中，文本的背景颜色主要通过background-color属性来设置。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
p {
background-color: #ff0000;
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
</body>
</html>6.3 使用CSS设置图像样式
在CSS中，设置图像样式通常涉及调整图像的尺寸、边框、对齐方式、阴影效果以及其他视觉效果。以下是一些常用的CSS属性，用于设置图像的样式。
6.3.1.设置图像边框
使用border属性可以为图像添加边框。你可以指定边框的宽度、样式和颜色。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
img {
border: 5px solid #000; /* 5像素宽的黑色实线边框 */
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
<img src="img/as.png"/>
</body>
</html>效果浏览如图：
6.3.2.图像缩放
在CSS中，图像缩放通常涉及调整图像的尺寸以适应特定的设计需求或响应不同的屏幕尺寸。以下是几种常见的CSS属性和技术，用于图像的缩放：
使用 width 和 height 属性
最直接的方法是使用 width 和 height 属性来指定图像的宽度和高度。这会导致图像按照指定的尺寸进行缩放。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
img {
width: 200px;
/* 设置图像的宽度 */
height: auto;
/* 高度自动调整以保持宽高比 */
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
<img src="img/as.png" />
</body>
</html>效果浏览如图：
6.3.3.设置背景图像
在CSS中，设置背景图像是通过background-image属性来实现的。这个属性允许你指定一个图像的URL，该图像将作为元素的背景显示。以下是一些关于如何使用background-image属性以及其他相关背景属性的基本指南：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
body {
background-image: url(img/as.png);
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
<img src="img/as.png" />
</body>
</html>效果浏览如图：
6.3.4设置背景重复
背景重复（background-repeat)属性的主要作用是设置背景图片以何种方式在网页中显示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用 background-repeat属性来控制。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8">
<title>示例</title>
<style type="text/css">
body {
width: 660px;
height: 330px;
background-color: #ffaa00;
/* 6.3.3.设置背景图像 */
background-image: url(img/bgcolor.png);
/* 6.3.4设置背景重复 */
/* background-repeat: repeat;*/
/* 重复(默认值) */
background-repeat: no-repeat;
/* 不重复 */
/* background-repeat: repeat-x;*/
/* x轴重复 */
/* background-repeat: repeat-y;*/
/* y轴重复 */
}
</style>
</head>
<body>
<p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、
大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台，
是就业、培训等方面皆具雄厚实力的院校。</p>
<img src="img/as.png" />
</body>
</html>效果浏览如图：
6.3.5.背景图像定位
在CSS中，背景图像的定位是通过background-position属性来实现的。这个属性允许你指定背景图像在元素背景区域中的起始位置。
一、基本语法
-
.element { background-position: horizontal-position vertical-position; }horizontal-position：表示水平方向上的位置。vertical-position：表示垂直方向上的位置。你可以使用多种类型的值来指定这两个位置，包括关键字、长度单位（如像素、百分比等）以及组合值。
二、定位方式
6.3.5.1.使用关键字进行背景定位
top left：左上角。top center：顶部中央。
top right：右上角。
center left：左侧中央。
center center：中央。
center right：右侧中央。
bottom left：左下角。
bottom center：底部中央。
bottom right：右下角。
6.3.5.2.使用长度进行背景定位
可以使用像素（px）或其他长度单位来指定位置。例如：background-position: 10px 20px; 表示背景图像从元素的左上角向右偏移10像素，向下偏移20像素。
6.3.5.3.使用百分比进行背景定位
使用百分比（%）来指定位置。百分比定位是基于背景区域的尺寸来计算的。
例如：background-position: 50% 50%; 表示背景图像的中心点与背景区域的中心点对齐。
需要注意的是，百分比定位与关键字和长度单位定位的机制不同。在百分比定位中，图像本身的某个点与背景区域的某个点重合，而不是将图像的左上角放置在指定位置。。
三、注意事项
如果只指定了一个值，那么该值将用于横坐标（水平方向），而纵坐标（垂直方向）将默认为50%（即中央）。
当使用百分比定位时，要考虑到背景区域的尺寸以及图像的尺寸，以确保图像能够正确地显示在期望的位置。
在进行响应式设计时，可以使用百分比定位来确保背景图像在不同屏幕尺寸上都能良好显示。
四、示例
<!DOCTYPE html> <html> <head> <meta charset=" UTF-8"> <title>示例</title> <style type="text/css"> body { width: 300px; height: 200px; background-image: url('example.jpg'); background-repeat: no-repeat; /* 防止图像重复 */ background-position: 50% 50%; /* 将图像中心与元素中心对齐 */ } </style> </head> <body> <p>学校以工科为主、兼顾文理，现有教育部、人力资源和社会保障部等部委设立的全国信息技术应用培训教育工程基地、计算机信息技术考试站、 大学英语等级考试中心、国家职业技能鉴定所、国家安全培训中心以及汽车驾驶员培训中心等多个基地，为广大学子取得各专业国家级技能等级证和从业资格打造了良好的平台， 是就业、培训等方面皆具雄厚实力的院校。</p> <img src="img/as.png" /> </body> </html>效果浏览如图：
6.4 使用CSS设置表单样式
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。6.4.1.使用CSS修饰常用的表单元素
使用CSS修饰表单元素是提升网页用户体验和美观度的关键步骤。以下是一些常用的表单元素及其CSS修饰方法：6.4.1.1.修饰文本域
文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体、颜色以及背景图像加以控制。示例6.21：
<!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/aaa.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="norml"/> 默认样式的文本域 </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样式可以对按钮的字体、颜色、边框以及
背景图像加以控制。示例6.22：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>按钮修饰</title> <style type="text/css"> .htn01{ background: url(img/btn_bg02.jpg) repeat-x; border: 2px solid #f00; height: 32px; font-weight: bold; padding-top: 2px; cursor: pointer; font-size: 14px; color: #fff; } .htn02{ background: url(img/btn_bg03.jpg) 0 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="button01" type="submit" class="htn01" id="button1" value="自适应宽度按钮"/> 自适应宽度按钮 </p> <p> <input name="button02" type="submit" class="htn02" id="button2" value="免费注册"/> 固定背景图片的按钮 </p> </body> </html>效果浏览如图：
6.4.1.3.制作登录表单
在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、密
码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。示例6.23：
<!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; } .username input{ background: #fff url(img/username.JPG)no-repeat left center; } .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>效果浏览如图：
