第六章 元素应用css

已于 2024-10-17 10:12:34 修改
阅读量1.2k 收藏 9
点赞数 32
文章标签： css 前端
于 2024-10-17 10:05:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2402_83184791/article/details/142911235
版权

6.1 使用css设置字体样式

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

6.1.1  字体类型

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

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

格式如下：

font-family：字体名称；

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

说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*6.1使用css设置字体样式*/
			h1{
				/*6.1.1字体样式*/
				font-family:fangsong;
			}
			</style>
			
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
		<p>爱国明志 敢为人先</p>
	</body>
</html>

a570c1810c5c49d8a8e20b9d5fe0cc0c.png

6.1.2  字体大小

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

语法：

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*6.1使用css设置字体样式*/
			h1{
				/*6.1.1字体样式*/
				font-family:fangsong;
				/*6.1.2字体大小*/
				font-size:20px;
			}
			</style>
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
		<p>爱国明志 敢为人先</p>
	</body>
</html>

69949b95cfaa444c9544e511a4294e10.png

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；

参数：normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100~900共分9个层次

说明：设置文本的粗细 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*6.1使用css设置字体样式*/
			h1{
				/*6.1.1字体样式*/
				font-family:fangsong;
				/*6.1.2字体大小*/
				font-size:20px;
				/*6.1.3字体粗细*/
				font-weight: 500;
			}
			</style>
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
		<p>爱国明志 敢为人先</p>
	</body>
</html>

 17ef1ad38f95499ca0e469032e7db70e.png

6.1.4  字体倾斜

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

语法：

font-style：normal|italic|oblique；

参数：normal为“正常”，italic为“倾斜”，oblique为“倾斜体”

说明：设置文本字体的倾斜 

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

5910a30bb7a7490e999fdcb8c5a41433.png

6.2  使用css设置文本样式

6.2.1  文本水平对齐方式

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

语法：

text-align：left|right | center | justify；

参数：left为左对齐，right为右对齐；center未居中，justify为两段对齐；

说明：设置对象中文本的对齐方式 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*6.1使用css设置字体样式*/
			h1{
				/*6.1.1字体样式*/
				font-family:fangsong;
				/*6.1.2字体大小*/
				font-size:20px;
				/*6.1.3字体粗细*/
				font-weight: 500;
				/*6.1.4字体倾斜*/
				font-style:italic;
				/*6.2.1文本水平对齐方式*/
				text-align:center;
			}
			#id1{
				/*6.1.3字体粗细*/
				font-weight: 500;
			}
			#id2{
				/*6.1.4字体倾斜*/
				font-style:italic;
			}
			p{
				/*6.2.2行高*/
				
			}
			</style>
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
		<p>
		校训：
	    <span id="id1">爱国明志</span>
		<span id="id2">敢为人先</span>
		</p>
		<p>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、
		面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实
		创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，
		开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
		，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

47428158fb0146e486e48638e13981c6.png

6.2.2  行高

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

语法:

line-height:length | normal;

 参数：length为百分比数字或由数值、单位标识符组成的长度值，允许为负值 。其百分比取值是基于字体的高度尺寸。normal为默认行高

说明：设置对象的行高

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

 490bbceec4bb4998a6814ca530055f85.png

6.2.3  文本的修饰

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

语法: 

text-decoration: underline l blink l overline I line-through I none;

 
参数:underline为下划线，b1ink为闪烁，overline为上划线，line-through为贯穿线， none为无装饰。 
说明:设置对象中文本的修饰。对象a、 u、ins 的文本修饰默认值为underline。对象strike、s、 del 的默认值是line-through。如果应用的对象不是文本，则此属性不起作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*6.1使用css设置字体样式*/
			h1{
				/*6.1.1字体样式*/
				font-family:fangsong;
				/*6.1.2字体大小*/
				font-size:20px;
				/*6.1.3字体粗细*/
				font-weight: 500;
				/*6.1.4字体倾斜*/
				font-style:italic;
				/*6.2.1文本水平对齐方式*/
				text-align:center;
			}
			#id1{
				/*6.1.3字体粗细*/
				font-weight: 500;
			}
			#id2{
				/*6.1.4字体倾斜*/
				font-style:italic;
			}
			p{
				/*6.2.2行高*/
				line-height: 400%;
			}
			/*6.2.3 文本的修饰*/
			#id3{
				text-decoration: underline;
			}
			#id4{
				text-decoration: line-through;
			}
			#id5{
				text-decoration: overline;
			}
			/*6.2.4 段落首行缩进*/
			p{
				text-indent: 2em;
			}
			
			</style>
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
		<p>
		校训：
	    <span id="id1">爱国明志</span>
		<span id="id2">敢为人先</span>
		</p>
		<p>
		<span id="id3">江西应用工程职业学院</span>
		系一所经江西省政府批准、中国教育部备案、
		面向全国招生的国有公办全日制普通高职院校，隶属
		<span id="id4">江西省教育厅</span>
		。求实
		创新、扬帆远航，在新时代的奋进中，
		<span id="id5">江西应用工程职业学院承扬传统，</span>
		开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
		，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

8ea1341359f44c73ae299124a76c19f8.png

6.2.4  段落首行缩进

首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变， 
其目的是便于阅读和区分文章整体结构。 
在Web 页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果。在
CSS样式中text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距外边距创造这种效果。语法: 

text-indent; length; 


参数:length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。 说明:设置对象中的文本段落的缩进。本属应用于整块的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*6.1使用css设置字体样式*/
			h1{
				/*6.1.1字体样式*/
				font-family:fangsong;
				/*6.1.2字体大小*/
				font-size:20px;
				/*6.1.3字体粗细*/
				font-weight: 500;
				/*6.1.4字体倾斜*/
				font-style:italic;
				/*6.2.1文本水平对齐方式*/
				text-align:center;
			}
			#id1{
				/*6.1.3字体粗细*/
				font-weight: 500;
			}
			#id2{
				/*6.1.4字体倾斜*/
				font-style:italic;
			}
			p{
				/*6.2.2行高*/
				line-height: 400%;
			}
			/*6.2.3 文本的修饰*/
			#id3{
				text-decoration: underline;
			}
			#id4{
				text-decoration: line-through;
			}
			#id5{
				text-decoration: overline;
			}
			/*6.2.4 段落首行缩进*/
			p{
				text-indent: 2em;
			}
			
			</style>
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
		<p>
		校训：
	    <span id="id1">爱国明志</span>
		<span id="id2">敢为人先</span>
		</p>
		<p>
		江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、
		面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。求实
		创新、扬帆远航，在新时代的奋进中，江西应用工程职业学院承扬传统，
		开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
		，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

 d954e29b8d304d10936122c5f110ab59.png

6.2.5  首字下沉 

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-family: 黑体;
				text-align: center;
			}
			p{
				font-family: arial,"times new roman";
				text-align: left;
			}
			p.center{
				text-align: center;
			}
			p.right{
				text-align: right;
			}
			p::first-letter{
				float:left;
				font-size: 2em;
				font-weight: bold;
			}
			</style>
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
			<p>
			校训：
		    <span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
			</p>
			<p class="red">
			江西应用工程职业学院
			系一所经江西省政府批准、中国教育部备案、
			面向全国招生的国有公办全日制普通高职院校，隶属
			江西省教育厅
			。求实
			创新、扬帆远航，在新时代的奋进中，
			江西应用工程职业学院承扬传统，
			开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
			，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

1c8077bcac774f00b883b835ef67e67c.png

6.2.6  字符间距

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

语法:

 letter-spacing:length I normal; 


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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-family: 黑体;
				text-align: center;
			}
			p{
				font-family: arial,"times new roman";
				text-align: left;
			}
			p.center{
				text-align: center;
			}
			p.right{
				text-align: right;
			}
			p.lose{
				letter-spacing: 30px;
			}
			p.tight{
				letter-spacing: -0.25em;
			}
			</style>
	</head>
	<body>
		<h1>江西应用工程职业学院校训</h1>
			<p>
			校训：
		    <span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
			</p>
			<p>
			江西应用工程职业学院
			系一所经江西省政府批准、中国教育部备案、
			面向全国招生的国有公办全日制普通高职院校，隶属
			江西省教育厅
			。<p class="loose">求实
			创新、扬帆远航，在新时代的奋进中，</p>
			江西应用工程职业学院承扬传统，
			开拓新天。<p class="tight">江西应用工程职业学院将始终肩负培育国家金蓝领人才、
			，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
	</body>
</html>

f4733cdeb07c4b2d8d1c8658fdf4403f.png

6.2.7  文本的截段 

在CSS样式中 lext-ovefow属性可以实现文本的截断效果，该属性包含c租晰e 个属性值。前者表示简单的裁切，不显示省略标记(.·);后者表示当文本溢出时的标记(.…)。

语法: 

text-overflow:clip I ellipsis; 


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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-family: 黑体;
				text-align: center;
			}
			p{
				font-family: arial,"times new roman";
				text-align: left;
			}
			p.ellipsis{
				width:260px;
				height: 20px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			</style>
		</head>
		<body>
		<h1>江西应用工程职业学院</h1>
		<p class="ellipsis">
		江西应用工程职业学院
		系一所经江西省政府批准、中国教育部备案、
		面向全国招生的国有公办全日制普通高职院校，隶属
		江西省教育厅
		。求实
		创新、扬帆远航，在新时代的奋进中，
		江西应用工程职业学院承扬传统，
		开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
		，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
		</body>
		</html>

b890eb6428b246bbbb9318e60edf7349.png

6.2.8  文本的颜色

在CSS样式中，对文本增加颜色修饰十分简单，只需添加 color属性即可。colorn属性的
语法: 
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 I transparent 


参数:color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。 
说明:background-color不能继承，默认值是transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-family: 黑体;
				text-align: center;
			}
			p{
				font-family: arial,"times new roman";
				text-align: left;
			}
			body{
				background-color: #eee;
			}
			h1{
				font-family:黑体;
				background-color: orange;
			}
			p{
				font-family: arial,"times new roman";
				background: rgb(0,255,255);
			}
			</style>
			</head>
			<body>
			<h1>江西应用工程职业学院校训</h1>
			<p>
			校训：
			<span id="id1">爱国明志</span>
			<span id="id2">敢为人先</span>
			</p>
			<p>
			江西应用工程职业学院
			系一所经江西省政府批准、中国教育部备案、
			面向全国招生的国有公办全日制普通高职院校，隶属
			江西省教育厅
			。求实
			创新、扬帆远航，在新时代的奋进中，
			江西应用工程职业学院承扬传统，
			开拓新天。江西应用工程职业学院将始终肩负培育国家金蓝领人才、
			，再谱现代职业教育大学继承与创新并进、光荣与理想融会的新篇章！</p>
			</body>
			</html>

3b977c1903bb471581857079287cfc19.png

 6.3  使用css设置图像样式

6.3.1  设置图像边框

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

例如以下代码: 

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


使用这种方法存在很大的限制，即所有的边框都只能是黑色，而且风格十分单一，都是实线，只是在边框粗细上能够进行调整。

6.3.2 图像缩放

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				padding: 10px;
				width: 1000px;
				height: 700px;
				border: 2px dashed #9c3;
			}
			img.text1{
				width: 30%;
				height: 40%;
			}
			img.text2{
				width: 150px;
				height: 280px;
			}
			</style>
	</head>
	<body>
		<div id="box">
		<img src="img/1.1.png">
		<img src="img/1.1.png" class="text1">
		<img src="img/1.1.png" class="text2">
	</body>
</html>

 509c6ec092784212844a63c5793b24aa.png

6.3.3  设置背景图像

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

语法:

background-image：url（url） | none；

参数:ul表示要插人背景图像的路径。nome表示不加载图像。 

说明:设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到body >标签中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
        body{
				background-color: #7bc144;
				background-image:url(img/1.1.png);
				background-repeat: no-repeat;
			}
			</style>
	</head>
<body></body>
</html>

2928d3a486474a21b2946593fe720b05.png 6.3.4 设置背景重复

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

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

Ьасkgrоund-rереаt : rереаt | по-тереаt | rереаt-х | ереаt-у; 

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

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

6.3.5  背景图像定位

当在网页中插入背景图像时，每一次插人的位置，都是位于网页的左上角，可以通过

background-position属性来改变图像的插人位置。

语法:

background-position：length | length；
background-position： positional | position；

参数:length为百分比或者由数字和单位标识符组成的长度值，position 可取top. center, bottom, left, right之一。

说明:利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空

格隔开，一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right,关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。 

设置背景定位有以下3种方法。 

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

关键字参数的取值及含义如下:

top:将背景图像同元素的顶部对齐。

bottom:将背景图像同元素的底部对齐。

left:将背景图像同元素的左边对齐。

right:将背景图像同元素的右边对齐。

center:将背景图像相对于元素水平居中或垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			background-color:#7bc144;
			}
		#box{
			width:400px;
			height: 700px;
			border: 6px dashed;
			background-image: url(img/1.1.png);
			background-repeat: no-repeat;
			background-position: center bottom;
		}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			background-color:#7bc144;
			}
		#box{
			width:900px;
			height: 7000px;
			border: 6px dashed #fff;
			background-image: url(img/1.1.png);
			background-repeat: no-repeat;
			background-position: 150px 70px;
		}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

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

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

6.4    使用css设置表单样式

6.4.1   使用css修饰常用的表单元素

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

1.修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体颜色以及背景图像加以控制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.text1{
				border: 1px solid #f60;
				color: aqua;
			}
			.text2{
				border: 1px solid #c3c;
				height: 20px;
				background: #fff url(img/1.1.png)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="text"/>
			改变边框颜色和文字颜色的文本域，看起来更加醒目
		</p>
		<p>
			<input name="pass" type="password" class="text2"/>
			增加了背景图片的文本域，看起来更加形象直观
		<p>
			<textarea name="cha" cols="45"row="5"class="area">改变边框颜色的多行文本域</textarea>
		</p>
	</body>
</html>

2.修饰按钮

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

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

 

3.制作登录表单

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.login{
			margin: 0auto;
			width: 280px;
			padding: 14px;
			border: dashed 2px #b7ddf2;
			 background: #ebf41b;
		}
			.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 Opx 2px 18px;
			border: solid Ipx #aacfe4;
		}
		.login.username input{
		    background:#fff url(img/username.JPG)no-repeat left center; 
		}
		.login.password input{
		    background: #fff url(img/lock.JPG)no-repeat left center; 
		}
		 .login.btns{
		text-align:center;
		}
		</style> 
		<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>
	<body>
	</body>
</html>

​​​​​​​ 

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<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="chengnuo"/>
		<form action ="#. html" method=" get" class="reg"> 
		<div class="regList"> 
		<label><span class=" red">*</span>用户名</label> 
		<input type=" text"/><span style=" color:#999;">请输入邮箱/用户名/手机号</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" name="agreement" required/>
		    我已经阅读并同意商城用户注册协议
		</div>
		<div class="reg">
		    <input type="submit" value="注册" />
		</div>
		</form>
		<div class="clears"></div>
		</div>
		</div>
		</div>
	</body>
</html>
*{
	margin: 0;
	padding: 0;
}
body{
	font-size: 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;
}
.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; 
	position:relative;
}
.regList{
	height:35px; 
	line-height; 35px; 
	margin-bottom:30px; 
	position: relative; 
}
.regList label{
	float:left; 
	width: 105px; 
	margin-right: 10px; 
	text-align:right; 
	color: #999;
}
.regList input{
	margin:0; 
	padding:0, 
	width:283px; 
	height: 33px; 
	border:3738400 1px solid; 
	background: #feffdf; 
	padding-left:3px;
}
.regLst.yanzheng{
	width: 135px;
}
.regList img{
	left:260px;
	position: absolute;
}
.xieyi{
	height: 30px; 
	line-height:30px; 
	font-size: 12px; 
	padding-left: 115px;
}
	.xieyi input{
	position: relative; 
	top:2px; 
}
	 .xieyi a{
	color: #7BC144; 
}
	.reg{
	padding-left:115px; 
	margin-top:10px;
}
	.chengnuo{
	position:absolute; 
	right:0; 
	top:0;
}

 

Tuscany。
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值