第六章元素应用CSS

标签：text 元素 height 字体 6.1 第六章 font 职业 CSS

6.1 使用CSS设置字体样式

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

字体样式的常用属性
属性	说明	属性	说明
font-family	设置字体的类型	font-welght	设置字体的粗细
font-size	设置字体的大小	font-style	设置字体的倾斜

6.1.1.字体类型

体具有两方面的作用:一是传递语义功能，二是有美学效应。由于不同的字体给人带来不同的风格感受，所以对于网页设计人员来说，首先需要考虑的问题就是准确地选择字体。

CSS 提供 font-family 属性来控制文本的字体类型。

格式如下:

font-family:字体名称;

6.1.2.字体大小

在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中font- size 属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”(笔位)、“pt”(绝对单位)、“em”(相对单位)和“%”(相对单位)等。

语法:

font-size:绝对尺寸|相对尺寸；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:爱国明志 敢为人先</p>
	</body>
</html>

6.1.3.字体粗细

CSS样式中使用 font-weight属性设置字体的粗细，它包含 normal、bold、bolder、lighter、100、200、300、400、500、600、700、800和900多个属性值。

语法:

font-weight:bold|number|normal|lighter|100-900;

6.1.4.字体倾斜

CSS 中的 font-style属性用来设置字体的倾斜。

语法：

font-style:normal|italic|oblique;

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
                /* 6.1.3.字体粗细 */
				font-weight: 600;
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:爱国明志 敢为人先</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
				/* 6.1.3.字体粗细 */
				font-weight: 600;
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
	</body>
</html>

6.2 使用CSS设置文本样式

网页的排版离不开对文本的设置，本节主要讲述常用的文本样式，包括文本对齐方式行高、文本修饰、段落首行缩进、首字下沉、字符间距、文本截断、文本颜色及背景色等。

6.2.1.文本水平对齐方式

使用text-align属性可以设置元素中文本的水平对齐方式。

语法:

text-align: left | right | center | justify;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
	</body>
</html>

6.2.2.行高

段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-height属性控制行与行之间的垂直间距。

语法：

line-height:lenght|normal;

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
				/* 6.1.3.字体粗细 */
				font-weight: 600;
				/* 6.1.4.字体倾斜 */
				font-style: italic;
				text-align: center;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

6.2.3.文本的修饰

使用CSS样式可以对文本进行简单的修饰，text属性所提供的text-decoration属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。

语法:

text-decoration:underline|blink|overline|line-through|none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
				/* 6.1.3.字体粗细 */
				font-weight: 600;
				/* 6.1.4.字体倾斜 */
				font-style: italic;
				text-align: center;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
			#id3{
					text-decoration: underline;/* 下划线 */
			}
			#id4{
					text-decoration: overline;/* 上划线 */
			}
			#id5{
					text-decoration: line-through;/* 贯穿线 */
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

6.2.4.段落首行缩进

首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变其目的是便于阅读和区分文章整体结构。

在CSS样式中text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或外边距创造这种效果。

语法：

text-indent:length;

6.2.5.首字下沉

首字下沉是指设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在CSS样式中伪对象“:first-letter”可以实现对象内第一个字符的样式控制。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
				/* 6.1.3.字体粗细 */
				font-weight: 600;
				/* 6.1.4.字体倾斜 */
				font-style: italic;
				text-align: center;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
			#id3{
					text-decoration: underline;/* 下划线 */
			}
			#id4{
					text-decoration: overline;/* 上划线 */
			}
			#id5{
					text-decoration: line-through;/* 贯穿线 */
			}
			/* 6.2.4.段落首行缩进 */
			.first{
					text-indent: 2em;
			}
			/* 6.2.5.首字下沉 伪类选择器*/
			.second:first-letter{
					float: left;
					font-size: 2em;
					font-weight: 900;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p class="first">校训:
				<span id="id1">爱国明志</span>
				<span id="id2">敢为人先</span>
		</p>
		<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

6.2.6.字符间距

letter-spacing 为字符间距属性，可以设置字符与字符间的距离。

语法：

letter-spacing:length | normal;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
				/* 6.1.3.字体粗细 */
				font-weight: 600;
				/* 6.1.4.字体倾斜 */
				font-style: italic;
				text-align: center;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
			#id3{
					text-decoration: underline;/* 下划线 */
			}
			#id4{
					text-decoration: overline;/* 上划线 */
			}
			#id5{
					text-decoration: line-through;/* 贯穿线 */
			}
			/* 6.2.4.段落首行缩进 */
			/* 6.2.6.字符间距 */
			.first{
					letter-spacing: 2em;
			}
			/* 6.2.5.首字下沉 伪类选择器*/
			.second:first-letter{
					float: left;
					font-size: 2em;
					font-weight: 900;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p class="first">校训:
				<span id="id1">爱国明志</span>
				<span id="id2">敢为人先</span>
		</p>
		<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

6.2.7.文本的截断

在CSS样式中 text-overnow属性可以实现文本的截断效果，该属性包含 clip和elipsis个属性值。前者表示简单的裁切，不显示省略标记(…);后者表示当文本溢出时显示省标记(…)。

语法:

text-overflow:clip | ellipsis;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				/* 6.1.1.字体类型 */
				font-family: fangsong;
				/* 6.1.2.字体大小 */
				font-size: 25px;
				/* 6.1.3.字体粗细 */
				font-weight: 600;
				/* 6.1.4.字体倾斜 */
				font-style: italic;
				text-align: center;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
			#id3{
					text-decoration: underline;/* 下划线 */
			}
			#id4{
					text-decoration: overline;/* 上划线 */
			}
			#id5{
					text-decoration: line-through;/* 贯穿线 */
			}
			/* 6.2.4.段落首行缩进 */
			/* 6.2.6.字符间距 */
			.first{
					letter-spacing: 2em;
			}
			.second{
				width: 300px;
				height: 50px;
				text-overflow: ellipsis;
				overflow: hidden;/* 溢出内容隐藏 */
				white-space: nowrap;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p class="first">校训:
				<span id="id1">爱国明志</span>
				<span id="id2">敢为人先</span>
		</p>
		<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

6.2.8.文本的颜色

在CSS样式中，对文本增加颜色修饰十分简单，只需添加color 属性即可。color 属性的语法

语法：

color: ;

6.2.9.文本的背景颜色

在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用background- color属性来设置网页背景颜色，还可以设置文本的背景颜色。

语法：

background-color:color | transparent;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				color: #ff0000;
			}
			/* 6.2.9.文本的背景颜色 */
			.first{
				background-color: #ff0000;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
			#id3{
					text-decoration: underline;/* 下划线 */
			}
			#id4{
					text-decoration: overline;/* 上划线 */
			}
			#id5{
					text-decoration: line-through;/* 贯穿线 */
			}
			.second{
				width: 300px;
				height: 50px;
				text-overflow: ellipsis;
				overflow: hidden;/* 溢出内容隐藏 */
				white-space: nowrap;
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p class="first">校训:
				<span id="id1">爱国明志</span>
				<span id="id2">敢为人先</span>
		</p>
		<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

6.3 使用CSS设置图像样式

图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍CSS设置图像风格样式的方法，包括图像的边框图像的缩放和背景图像等。

图像即img元素，在页面中的风格样式仍然用盒模型来设计。

6.3.1.设置图像边框

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

代码：

<img src="images/fields.jpg" border="0"> <!--显示为没有边框-->
<img src="images/felds.jpg" border="1"> <!--设置边框的粗细为 1px-->
<img src="images/fields.jpg" border="2"> <!--设置边框的粗细为 2px-->
<img src="images/fields.jpg" border="3"> <!--设置边框的粗细为 3px-->

如果希望更换边框的颜色，或者换成虚线边框，仅仅依靠HTML都是无法实现。如果希望分别设置4条边框的不同样式，在CSS 中也是可以实现的，只需要分别设定 border-left、border-right、border-top 和 border-bottom的样式，依次对应于左、右、上、下4条边框。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			h1{
				color: #ff0000;
			}
			/* 6.2.9.文本的背景颜色 */
			.first{
				background-color: #ff0000;
			}
			#id1{
				/* 6.1.3.字体粗细 */
				font-weight: 900;
			}
			#id2{
				/* 6.1.4.字体倾斜 */
				font-style: italic;
			}
			/* 6.2.2.行高 */
			p{
				line-height: 200%;
			}
			#id3{
					text-decoration: underline;/* 下划线 */
			}
			#id4{
					text-decoration: overline;/* 上划线 */
			}
			#id5{
					text-decoration: line-through;/* 贯穿线 */
			}
			.second{
				width: 300px;
				height: 50px;
				text-overflow: ellipsis;
				overflow: hidden;/* 溢出内容隐藏 */
				white-space: nowrap;
			}
			img{
				border-color: #ff0000 #00ff00 #0000ff #ffaa00;
				border-width: 10px 20px 30px 40px;
				border-style: dashed solid dotted double; 
			}
		</style>
	</head>
	<body>
		<h1>江西应用工程职业学院</h1>
		<p>校训:
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<p class="first">校训:
				<span id="id1">爱国明志</span>
				<span id="id2">敢为人先</span>
		</p>
		<p class="second"><span id="id3">江西应用工程职业学院</span>系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实创新、扬帆远航，在新时代的奋进中，<span id="id4">江西应用工程职业学院</span>承扬传统，开拓新天。<span id="id5">江西应用工程职业学院</span>将始终肩负培育国家金蓝领人才、服务社会发展进步的历史使命与社会责任，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		<img src="img/school.png"/>
	</body>
</html>

6.3.2.图像缩放

使用CSS样式控制图像的大小，可以通过width和height两个属性来实现。需要注意的是，当width 和height两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			#img2{
					width: 400px;
					height: 300px;
			}
			#img3{
					width: 50%;
					height: 50%;
			}
			img{
				border-color: #ff0000 #00ff00 #0000ff #ffaa00;
				border-width: 10px 20px 30px 40px;
				border-style: solid dashed dotted double;
			}
		</style>
	</head>
	<body>
		<img src="img/school.png" id="img1"/><br />
		<img src="img/school.png" id="img2"/><br />
		<img src="img/school.png" id="img3"/><br />
		<img src="img/school.png" id="img4"/><br />
	</body>
</html>

6.3.3.设置背景图像

在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面带来丰富的视觉效果。CSS除了可以设置背景颜色，还可以用background-image来设置背景图像。

语法：

background-image: url(url)| none;

<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			#img2{
					width: 400px;
					height: 300px;
			}
			#img3{
					width: 50%;
					height: 50%;
			}
			img{
				border-color: #ff0000 #00ff00 #0000ff #ffaa00;
				border-width: 10px 20px 30px 40px;
				border-style: solid dashed dotted double;
			}
			body{
				background-color: #ffaa00;
				background-image: url('../img/bg.png');
			}
		</style>
	</head>
	<body>
		<img src='../img/school.jpg' id="img1"/><br />
		<img src='../img/school.jpg' id="img2"/><br />
		<img src='../img/school.jpg' id="img3"/><br />
		<img src='../img/school.jpg' id="img4"/><br />
	</body>
</html>

6.3.4设置背景重复

背景重复(background-repeat)属性的主要作用是设置背景图片以何种方式在网页中显示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节的大小。

在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。

语法:

background-repeat:repeat | no-repeat | repeat-x | repeat-y;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			#img2{
					width: 400px;
					height: 300px;
			}
			#img3{
					width: 50%;
					height: 50%;
			}
			img{
				border-color: #ff0000 #00ff00 #0000ff #ffaa00;
				border-width: 10px 20px 30px 40px;
				border-style: solid dashed dotted double;
			}
			.bg{
				width: 660px;
				height: 330px;
				background-color: #ffaa00;
				background-image: url('../img/bg.png');
				background-repeat: no-repeat;
				}
		</style>
	</head>
	<body>
		<div class="bg"></div>
		<img src='../img/school.jpg' id="img1"/><br />
		<img src='../img/school.jpg' id="img2"/><br />
		<img src='../img/school.jpg' id="img3"/><br />
		<img src='../img/school.jpg' id="img4"/><br />
	</body>
</html>

6.3.5.背景图像定位

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

语法：

background-position:length | length;
background-position:positional | position;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			#img2{
					width: 400px;
					height: 300px;
			}
			#img3{
					width: 50%;
					height: 50%;
			}
			img{
				border-color: #ff0000 #00ff00 #0000ff #ffaa00;
				border-width: 10px 20px 30px 40px;
				border-style: solid dashed dotted double;
			}
			.bg{
				width: 660px;
				height: 330px;
				background-color: #ffaa00;
				background-image: url('../img/bg.png');
				background-repeat: no-repeat;
				background-position: right center;
				}
		</style>
	</head>
	<body>
		<div class="bg"></div>
		<img src='../img/school.jpg' id="img1"/><br />
		<img src='../img/school.jpg' id="img2"/><br />
		<img src='../img/school.jpg' id="img3"/><br />
		<img src='../img/school.jpg' id="img4"/><br />
	</body>
</html>

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

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

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

长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置。

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

使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。

6.4.1.1.修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过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('../img/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样式可以对按钮的字体、颜色、边框以及
背景图像加以控制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			.btn01{
				background: url('../img/btn_bg03.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_bg02.jpg') 0 0 no-repeat;
				border: 1px solid #f00;
				height: 32px;
				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="btn01" id="button1"value="自适应宽度按钮"/>
			自适应宽度按钮
		</p>
		<p>
			<input name="button02" type="submit"
			class="btn02" id="button02" value="免费注册"/>
			固定背景图片的按钮
		</p>
	</body>
</html>

6.4.1.3.制作登录表单

在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、密
码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。

示例代码

<!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">密&nbsp;&nbsp;码
					<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>
		<link type="text/css" href="zhal.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="chengguo"/>
					<form action="#.html" method="get" class="reg">
					<div class="regList">
						<label><span class="red">*</span>用户名</label>
						<input type="text"/><span style="color:0999;">请输入邮箱/用户名/手机号码</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>

/*页面全局样式--父元素*/
*{
	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:hovert{                    /*顶部注册提示悬停链接的样式*/
	color: #f00;                            /*红色文字*/
}
.loginBox{                             /*注册内容区域的样式*/
	width: 1050px;
	margin: 30px auto;                      /*上下边距为30px，水平居中对齐*/
	position: relative;                   /*相对定位*/
}
.regList{                              /*注册内容项的样式*/
	height: 35px;
	line-height: 35px;                     /*行高等于设定的高度，内容垂直方向居中对齐*/
	margin-bottom: 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: #ff0000 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*/
	 }
.chengguo{                          /* 注册表单中右侧的样式 */
	position:absolute;                    /* 绝对定位 */
	right:0;
	top:0;
}

执行结果：

标签：text,元素,height,字体,6.1,第六章,font,职业,CSS
From： https://blog.csdn.net/2302_80346539/article/details/143041753

6.1 使用CSS设置字体样式

6.1.1.字体类型

6.1.2.字体大小

6.1.3.字体粗细

6.1.4.字体倾斜

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

6.2.2.行高

6.2.3.文本的修饰

6.2.4.段落首行缩进

6.2.5.首字下沉

6.2.6.字符间距

6.2.7.文本的截断

6.2.8.文本的颜色

6.2.9.文本的背景颜色

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

6.3.2.图像缩放

6.3.3.设置背景图像

6.3.4设置背景重复

6.3.5.背景图像定位

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

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

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

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

6.4.1.1.修饰文本域

6.4.1.2.修饰按钮

6.4.1.3.制作登录表单

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

相关文章

赞助商

阅读排行

第六章 元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型

6.1.2.字体大小

6.1.3.字体粗细

6.1.4.字体倾斜

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

6.2.2.行高

6.2.3.文本的修饰

6.2.4.段落首行缩进

6.2.5.首字下沉

6.2.6.字符间距

6.2.7.文本的截断

6.2.8.文本的颜色

6.2.9.文本的背景颜色

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

6.3.2.图像缩放

6.3.3.设置背景图像

6.3.4设置背景重复

6.3.5.背景图像定位

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

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

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

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

6.4.1.1.修饰文本域

6.4.1.2.修饰按钮

6.4.1.3.制作登录表单

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

相关文章

赞助商

阅读排行

第六章元素应用CSS