第六章元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型

字体类型 ( font-family ): 指定字体族
font-family: Arial, sans-serif;

6.1.2.字体大小

字体大小 ( font-size ): 指定字体大小

font-size: 16px;

6.1.3.字体粗细

字体粗细 ( font-weight ): 指定字体粗细

font-weight: bold;

6.1.4.字体倾斜

字体倾斜 ( font-style ): 指定字体样式，如斜体

font-style: italic;

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

文本水平对齐方式 ( text-align ): 控制文本的对齐方式

text-align: center; /* 居中对齐 */

6.2.2.行高

行高 ( line-height ): 控制行间距

ine-height: 1.6;

6.2.3.文本的修饰.

文本的修饰 ( text-decoration ): 添加下划线、删除线等

text-decoration: underline;

6.2.4.段落首行缩进

段落首行缩进 ( text-indent ): 设置首行缩进

text-indent: 2em;

6.2.5.首字下沉

首字下沉 ( ::first-letter ): 用于首字下沉效果

p::first-letter {
float: left;
font-size: 2em;
}

6.2.6.字符间距

字符间距 ( letter-spacing ): 控制字符间距

letter-spacing: 2px;

6.2.7.文本的截断

文本的截断 ( text-overflow ): 当文本溢出时显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

6.2.8.文本的颜色

文本的颜色 ( color ): 设置文本颜色

color: #333;

6.2.9.文本的背景颜色

文本的背景颜色 ( background-color ): 设置文本背景颜色

background-color: #f8f8f8;

/* 6.2.9.文本的背景颜色 */
			.first{
				background-color: #ff0000;
			}

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

在CSS中，可以使用border属性来设置图像的边框。

border-width：指定边框的宽度，可以是具体的像素值（如2px）或相对值（如1em）。
border-style：指定边框的样式，常用的样式有：solid（实线），dashed（虚线），dotted（点线）等。
border-color：指定边框的颜色，和设置文本颜色一样，可以使用颜色关键字、十六进制颜色值、RGB值或HSL值。

6.3.2.图像缩放

图像缩放 ( width 和 height ): 控制图像大小

width: 100%;
height: auto;

6.3.3.设置背景图像

设置背景图像 ( background-image ): 设置元素的背景图像

background-image: url('path/to/image.jpg');


/* 6.3.3.设置背景图像 */
				#bg{
					width: 660px;
					height: 500px;
					background-color: #dd00cc;
					background-image: url(img/bg.png);
			}

6.3.4设置背景重复

在CSS中，可以使用background-repeat属性来设置背景图像的重复方式。

可以是以下几个值之一：
- repeat：默认值，表示图像在水平和垂直方向上重复；
- repeat-x：表示图像在水平方向上重复；
- repeat-y：表示图像在垂直方向上重复；
- no-repeat：表示图像不重复，只显示一次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>6.3.4设置背景重复</title>
		<style>
				/* 6.3.3.设置背景图像 */
				#bg{
					width: 660px;
					height: 500px;
					background-color: #dd00cc;
					background-image: url(img/bg.png);
					
					/* 6.3.4设置背景重复 */
					background-repeat: no-repeat;  不重复 */
					/* background-repeat: repeat-x; 在x轴重复 */
					/* background-repeat: repeat-y; 在y轴重复 */
			}
			
		</style>
	</head>
	
		<body>
				<div id="bg"></div>
		</body>
</html>

6.3.5.背景图像定位

在CSS中，可以使用background-position属性来设置背景图像的位置。

百分比值：相对于容器的宽度和高度进行定位，如50% 50%表示水平和垂直方向上居中定位；
长度值：相对于容器的左上角进行定位，如10px 20px表示水平方向上偏移10像素，垂直方向上偏移20像素；
关键字：常用的关键字有left、center、right、top、bottom，表示相对于容器的左侧、居中、右侧、顶部、底部进行定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>6.3.4设置背景重复</title>
		<style>
				/* 6.3.3.设置背景图像 */
				#bg{
					width: 660px;
					height: 500px;
					background-color: #dd00cc;
					background-image: url(img/bg.png);
					
					/* 6.3.4设置背景重复 */
					background-repeat: no-repeat; /* 不重复 */
					/* background-repeat: repeat-x; 在x轴重复 */
					/* background-repeat: repeat-y; 在y轴重复 */
					
					/* 6.3.5.背景图像定位 */
					/* 6.3.5.1.使用关键字进行背景定位 */
					/* background-position: center bottom; */
					
					/* 6.3.5.2.使用长度进行背景定位 */
					/* background-position: 100px 50px; */
					
					/* 6.3.5.3.使用百分比进行背景定位 */
					background-position:30% 50%;
				}
			
		</style>
	</head>
	
		<body>
				<div id="bg"></div>
		</body>
</html>

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

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

background-position: center bottom;

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

/* 6.3.5.2.使用长度进行背景定位 */
background-position: 100px 50px;

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

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

background-position:30% 50%;

6.4 使用CSS设置表单样式

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

6.4.1.1.修饰文本域

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

<!DOCTYPE html>
<html>
	<head>
	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>文本域修饰</title>
		</head>
		<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>
		<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.修饰按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮修饰</title>
		<style type="text/css">
			.btn01{
				background: url(img/btn_bg02.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_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>
		<input name="button01" type="submit"
		class="btn01" id="button1" value="自适应按钮"/>
		自适应宽度按钮
		<p>
			<input name="button02" type="submit"
			class="btn02" id="button2" value="免费注册"/>
			固定背景图片的按钮
		</p>
	</body>
</html>

6.4.1.3.制作登录表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录表单的制作</title>
	</head>
	<style type="text/css">
		.login{
			margin: 0 auto;
			width: 280px;
			height: 150px;
			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 #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;码
						<label for="password"></label>
						<input type="password" name="password" id='password'/>
					</div>
					<div class="btns">
						<input type="submit" name="button1" id="button01" value="登录"/>
						<input type="submit" name="button2" id="button02" value="注册"/>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>

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

6.5.1.前期准备

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>会员注册</title>
		<link type="text/css" href="css/text.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=" ">
						<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="regList.yanzheng"/>
							<img src="img/yanzheng.jpg" width="103" height="38"/>
						</div>
						<div class="xieyi">
							<input type="checkbox"/>
							我已经阅读并同意商城用户注册协议
						</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;
	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;
}
.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;
}
.regList.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{
	columns: #7bc144;
}
.reg{
	padding-left: 115px;
	margin-top: 10px;
}
.chengnuo{
	position: absolute;
	right: 0;
	top: 0;
}