首页 > 其他分享 >第六章 元素应用CSS

第六章 元素应用CSS

时间：2024-10-18 22:20:22浏览次数：3  
标签：6.1 text 元素 height 字体 background 第六章 font CSS

6.1 使用CSS设置字体样式

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

CSS样式中有关字体样式的常用属性见下表

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

6.1.1 字体类型

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

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

格式如下: font-family:字体名称;

font-family:字体名称;

参数:字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。

说明:用 font-family 属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如 Word 中的“字体”列表中所列出的字体名称。

6.1.2.字体大小

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

语法:font-size:绝对尺寸|相对尺寸;

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

  参数:绝对字体尺寸是根据对象字体进行调节的，包括xx-mal1、x-small，small、mdium，large，x-large 和 xx-large 的7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。

  相对尺寸是利用百分比或者em 以相对父元素大小的方式来设置字体尺寸

示例代码

<!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;

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

参数:normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100~900共分为9个层次(100、200、…、900，数字越小字体越细、数字越大字体越粗，数字值 400 相当于关键字 normal，700 等价于 bold)。

6.1.4.字体倾斜

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

语法：font-style:normal|italic|oblique;

font-style:normal|italic|oblique;

参数: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 设置文本样式

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

文本样式的常用属性
属性说明属性说明
text-align设置文本的水平对齐方式letter-spacing设置字符间距
line-height设置行高text-overflow设置文本的截断
text-decoration设置文本修饰效果color设置文本的颜色
text-indent设置段落的首行缩进background-color设置文本的背景颜色
first-letter设置首字下沉

6.2.1.文本水平对齐方式

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

语法:text-align :leftl right l center l justify;

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

参数：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;

line-height:lenght|normal;

参数：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;

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

参数:underline为下划线，blink为闪烁，overline为上划线，line-through为贯穿线none 为无装饰。

说明:设置对象中文本的修饰。对象a、u、ins 的文本修饰默认值为underline。对象strike、s、del 的默认值是 line-through。如果应用的对象不是文本，则此属性不起作用。

<!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;

text-indent:length;

参数：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;

letter-spacing:length | normal;

参数：normal为默认值，定义字符间的标准间距。length 表示由浮点数字和单位标识符组成的长度值，允许为负值。
说明：该属性定义元素中字符之间插人多少空白符。如果指定为长度值，会调整字符间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤。

示例代码

<!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;

text-overflow:clip | ellipsis;

参数：clip定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省路标记。
说明：要实现溢出文本显示省略号的效果，除了使用 text-overflow属性以外，还必须配合 white-space:nowrap(强制文本在一行内显示)和 overflow:hidde（溢出内容为隐藏）同时使用才能实现。

示例代码

<!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:颜色值;

color:颜色值;

这里颜色值可以使用多种书写方式:

color:red;/*规定颜色值为颜色名称的颜色*/
color:#000000;/*规定颜色值为十六进制值的颜色*/
color:rgb(0,0,255);/*规定颜色值为rgb代码的颜色*/
color:rgb(0%,0%,80%);/*规定颜色值为rgb百分数的颜色*/

6.2.9.文本的背景颜色

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

语法：background-color:color | transparent;

background-color:color | transparent;

参数：color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。
说明：background-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元素，在页面中的风格样式仍然用盒模型来设计。CSS样式中有关图像控制的常用属性见下表

图像样式的常用属性
属性说明属性说明
border设置图像的边框样式background-repeat设置背景图像的重复方式
width 、 height设置图像的缩放background-position设置背景图像的定位
background-image设置背景图像

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;

background-image: url(url)| none;

参数：url表示要插入背景图像的路径，nome表示不加载图像。
说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<boby>标签中。如果网页中某元素同时具有background-image 属性商和background-color 属性，那么background-image 属性优先于background-color 属性。

示例代码

<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/bgcolor.png);
			}
		</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>

执行结果如下

示例代码

<!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: 330px;
				height: 330px;
				background-color: #ffaa00;
				background-image: url(img/bgcolor.png);
			}
		</style>
	</head>
	<body>
		<div class="bg"></div>
		<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.4设置背景重复

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

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

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

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

参数:repeat表示背景图像在水平和垂直方向平铺，是默认值;repeat-x表示背景图像在水平方向平铺;repeat-y表示背景图像在垂直方向平铺;no-repeat 表示背景图像不平铺。

说明:设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。

示例代码

<!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/bgcolor.png);
				background-repeat: no-repeat;
				}
		</style>
	</head>
	<body>
		<div class="bg"></div>
		<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.5 背景图像定位

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

语法：background-position:length | length;
           background-position:positional | position;

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

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

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

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

示例代码

<!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/bgcolor.png);
				background-repeat: no-repeat;
				background-position: right center;
				}
		</style>
	</head>
	<body>
		<div class="bg"></div>
		<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>

执行结果如下

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

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

示例代码

<!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/bgcolor.png);
				background-repeat: no-repeat;
				background-position: 100px 50px;
				}
		</style>
	</head>
	<body>
		<div class="bg"></div>
		<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>

执行结果如下

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

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

示例代码

<!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/bgcolor.png);
				background-repeat: no-repeat;
				background-position: 20% 50%;
				}
		</style>
	</head>
	<body>
		<div class="bg"></div>
		<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.4 使用CSS设置表单样式

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

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

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/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>

执行结果如下

2.修饰按钮

按钮主要用于控制网页中的表单。通过CSS样式可以对按钮的字体、颜色、边框以及
背景图像加以控制。

例题6.22 示例代码

<!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>

执行结果如下

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">密&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="CSS/style.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>

CSS代码

/*页面全局样式--父元素*/
*{
	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;
}

执行效果如下

标签：6.1,text,元素,height,字体,background,第六章,font,CSS
From： https://blog.csdn.net/songboy1/article/details/143060695

相关文章

  • 代码随想录算法训练营第三天|203.移除链表元素,707.设计链表,206.反转链表
    1前言今日主要学习链表的基础leetcode203移除链表元素leetcode707设计链表leetcode206反转链表2链表的基础链表分为单链表和双链表，与字符串的区别就是链表是在一个里面存储了数据+下一个数据的内存地址链表中存储的内存空间是可以不连续的2.1链表的定义2.1.1......
  • css3新增盒子属性：怪异盒子、resize、box-shadow、opacity
    1.怪异盒子（常用）box-sizing：border-box   设置怪异盒子后，盒子的border和padding都计算在内容当中，给元素设置多少宽高，就是多少宽高2.resize的使用（不常用）resize：horizontal；使元素可水平拖动调整resize：horizontal；使元素可垂直拖动调整resize：both；使元素可水平垂直拖动调整......
  • 史上最全CSS解读（二）
    本偏讲到的内容会有背景，文本，字体，链接，列表等内容CSS背景：CSS背景属性用于定义HTML元素的背景。CSS属性定义背景效果:•background-color•background-image•background-repeat•background-attachment•background-position背景颜色background-color属性......
  • 83. 删除排序链表中的重复元素 线性法&快慢双指针
    83.删除排序链表中的重复元素给定一个已排序的链表的头 head ， 删除所有重复的元素，使每个元素只出现一次 。返回 已排序的链表 。示例1：输入：head=[1,1,2]输出：[1,2]示例2：输入：head=[1,1,2,3,3]输出：[1,2,3]提示：链表中节点数目在范围 [0,300] 内-100<=......
  • 史上最全CSS样式解读（一）
    CSS介绍：CSS(CascadingStyleSheets，层叠样式表），是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。通过使用CSS我们可以大大提升网页开发的工作效率！CSS语法：CSS规则由两个主要的部分构成：选择器，以及一条或......
  • css动画
    几年前与一个同事共同开发一个项目，当时只知道css3但是并没有实际用过，看了她写的页面着实给了我一个很大的震撼，今天因故翻到了她写的代码，现在来看，感慨万千//这是一个dom&>.left{animation:0.4seaseenter_from_left;}//这是另一个dom&>.right{ani......
  • 高等数学 6.1 定积分的元素法
    在定积分的应用中，经常采用所谓的元素法。为了说明这种方法，先回顾一下曲边梯形的面积问题。设\(f(x)\)在区间\([a,b]\)上连续且\(f(x)\geqslant0\)，求以曲线\(y=f(x)\)为曲边、底为\([a,b]\)的曲边梯形的面积\(A\)。把这个面积\(A\)表示为定积分\[A=\int_a^......
  • CSS文本属性
    在CSS中，我们可以通过文本属性来控制文字的样式。下面是一些常用的文本属性：font-family：用于指定文字的字体。font-size：用于指定文字的大小。font-style：用于指定文字的样式，例如italic或normal。font-weight：用于指定文字的粗细程度。color：用于指定文字的颜色。text-align：用于指定......
  • 第六章 元素应用CSS
    6.1使用CSS设置字体样式<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <style> /*6.1使用CSS设置字体样式*/ h1{ /*6.1.1.字体类型*/ font-family:fangsong; /*6.1.2.字体大小*/ f......
  • CSS笔记—盒子定位之固定定位（重难点！！小白刚需）
    1、固定定位的概念        固定定位（fixed）的元素位置相对于浏览器窗口进行定位（会脱离文档流），即使页面滚动，固定定位元素不会随滚动条滚动，除非改变浏览器窗口的位置或大小‌ 2、语法格式： <head>        选择器{position:fixed;}</head>水平位置:left定......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99