第6章 元素应用CSS
6.1 使用CSS设置字体样式
要使用CSS设置字体样式，可以使用font-family属性来指定字体系列，使用font-size属性来指定字体大小，使用font-weight属性来指定字体粗细，使用font-style属性来指定字体样式。
body {
font-family: Arial, sans-serif; /* 设置字体系列，优先使用Arial字体，如果没有则使用sans-serif字体 */
font-size: 16px; /* 设置字体大小为16像素 */
font-weight: bold; /* 设置字体粗细为粗体 */
font-style: italic; /* 设置字体样式为斜体 */
}
h1 {
font-family: "Times New Roman", serif; /* 设置h1元素的字体系列，优先使用Times New Roman字体，如果没有则使用serif字体 */
font-size: 24px; /* 设置字体大小为24像素 */
font-weight: normal; /* 设置字体粗细为正常 */
font-style: normal; /* 设置字体样式为正常 */
}
6.2 使用CSS设置文本样式
要使用CSS设置文本样式，可以使用以下CSS属性：
1. 字体属性：用于设置字体的样式、大小和颜色。例如：
font-family: Arial, sans-serif; // 设置字体为Arial或sans-serif字体
font-size: 16px; // 设置字体大小为16像素
color: #333333; // 设置字体颜色为深灰色
2. 文本对齐属性：用于设置文本的对齐方式。例如：
text-align: center; // 设置文本居中对齐
text-align: left; // 设置文本左对齐
text-align: right; // 设置文本右对齐
3. 文本装饰属性：用于给文本添加装饰效果。例如：
text-decoration: underline; // 给文本添加下划线
text-decoration: line-through; // 给文本添加删除线
text-decoration: none; // 移除文本的装饰效果
4. 字间距和行高属性：用于控制字符之间的距离和行与行之间的距离。例如：
letter-spacing: 1px; // 设置字符间距为1像素
line-height: 1.5; // 设置行高为当前字体大小的1.5倍
5. 文本阴影属性：用于给文本添加阴影效果。例如：
text-shadow: 2px 2px 4px #000000; // 给文本添加2像素水平和垂直偏移的黑色阴影，模糊半径为4像素
这些只是一些常用的CSS属性，还有很多其他的属性可以用于设置文本样式。要使用这些属性，只需将其应用于希望样式化的文本元素的CSS样式中。
6.3 使用CSS设置图像格式
使用CSS设置图像格式是通过使用`background-image`属性来设置背景图片的格式。可以使用以下几种格式来设置背景图像：
1. 使用`url()`函数指定图像路径：
.element {
background-image: url("image.jpg");
}
2. 使用相对路径或绝对路径指定图像路径：
.element {
background-image: url("image.jpg");
}
3. 使用Base64编码格式的图像：
.element {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...);
}
4. 使用线性渐变作为背景图像：
.element {
background-image: linear-gradient(red, blue);
}
5. 使用径向渐变作为背景图像：
.element {
background-image: radial-gradient(red, blue);
}
请注意，某些图像格式可能需要指定宽度和高度来正确显示。通常情况下，使用适当的图像编辑工具将图像转换为所需的格式，并将其文件路径或Base64编码值用作背景图像。
6.4 使用CSS设置表单样式
要使用CSS设置表单的样式，可以使用以下几个常用属性和选择器：
1. 输入框样式：
可以使用`input`选择器来选择所有的输入框，然后使用以下属性进行样式设置：
input {
width: 200px; /* 设置输入框宽度 */
height: 30px; /* 设置输入框高度 */
padding: 5px; /* 设置输入框内边距 */
border: 1px solid #ccc; /* 设置输入框边框样式 */
border-radius: 5px; /* 设置输入框边框圆角 */
font-size: 14px; /* 设置输入框字体大小 */
}
2. 下拉菜单样式：
可以使用`select`选择器来选择下拉菜单，然后使用以下属性进行样式设置：
select {
width: 200px; /* 设置下拉菜单宽度 */
height: 30px; /* 设置下拉菜单高度 */
padding: 5px; /* 设置下拉菜单内边距 */
border: 1px solid #ccc; /* 设置下拉菜单边框样式 */
border-radius: 5px; /* 设置下拉菜单边框圆角 */
font-size: 14px; /* 设置下拉菜单字体大小 */
}
3. 按钮样式：
可以使用`button`选择器来选择按钮，然后使用以下属性进行样式设置：
button {
width: 100px; /* 设置按钮宽度 */
height: 30px; /* 设置按钮高度 */
padding: 5px; /* 设置按钮内边距 */
border: none; /* 取消按钮边框样式 */
background-color: #ddd; /* 设置按钮背景颜色 */
border-radius: 5px; /* 设置按钮边框圆角 */
font-size: 14px; /* 设置按钮字体大小 */
color: #333; /* 设置按钮文字颜色 */
cursor: pointer; /* 设置鼠标悬停样式 */
}
以上是设置表单样式的基本方法，可以根据需要自行调整样式属性。
6.4.1.1.修饰文本域
<!--示例6.21程序-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本城修饰</title>
<style type="text/css">
.text1{
border:1px solid #f60; /*1px 实线红色边框*/
color:#03c; /*文字颜色为蓝色*/
}
.text2{
border:1px solid #C3C; /*1px 实线紫红色边框*/
height:20px;
background:#fff url(img/背景.jpg) center no-repeat;/*背景图像无重复*/
padding-left:20px;
}
.area{
border:1px solid #00f ; /*1px 实线蓝色边框*/
overflow:auto;
width:99%;
height:100px;
}
</style>
</head>
<body>
<p>
<input type= "text" name ="normal" />
默认样式的文本域
</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.21程序-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本城修饰</title>
<style type="text/css">
.text1{
border:1px solid #f60; /*1px 实线红色边框*/
color:#03c; /*文字颜色为蓝色*/
}
.text2{
border:1px solid #C3C; /*1px 实线紫红色边框*/
height:20px;
background:#fff url(img/背景.jpg) center no-repeat;/*背景图像无重复*/
padding-left:20px;
}
.area{
border:1px solid #00f ; /*1px 实线蓝色边框*/
overflow:auto;
width:99%;
height:100px;
}
</style>
</head>
<body>
<p>
<input name="pass" type="password" class="text2"/>
增加了背景图片的文本域,看起来更加形象直观
</p>
</body>
</html>
6.4.1.2.修饰按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮修饰</title>
</head>
<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>
<body>
<p>
<input name="button" type="submit" value="提提交"/>默认风格的“提交”按钮
</p>
<p>
<input name="button1" type="submit" class="btn01" id="button1" value="自适应宽度按钮"/>自适应宽度按钮
</p>
<p>
<input name="button2" 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;
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;
}
.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">密 码
<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="submit" 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="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"/>我已经阅读并同意<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>
6.5.1.前期准备
6.5.2.制作页面
<!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="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"/>我已经阅读并同意<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>
