在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法
CSS是Cascading Style Sheets（级联样式表）的缩写，CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所必须掌握的。
为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。
● 方法一：行内样式表（style属性）
为HTML应用CSS的第一种方法，是使用HTML属性style，将属性和值放在style属性中即可。我们在上例的基础之上，通过行内样式表将页面背景设为红色：
<html>
<head>
<title>例子</title>
</head>
<body style="background-color: #FF0000;">
<p>这个页面是红色的</p>
</body>
</html>
● 方法二：内部样式表（style元素）
为HTML应用CSS的另一种方法，是采用HTML元素style，添加在<head></head>元素之间。比如下面这样：
<html>
<head>
<title>例子</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>这个页面是红色的</p>
</body>
</html>
● 方法三：外部样式表（引用一个样式表文件）
我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。比方说你的样式表文件名为style.css。style.css文件的代码如下例所示：
body {background-color: #FF0000;}
在一个HTML文档里引用一个外部样式表文件（style.css）的方法是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可：
<link rel="stylesheet" type="text/css" href="style.css" />
要在href属性里给出样式表文件的地址。这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间：
<html>
<head>
<title>例子</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>这个页面是红色的</p>
</body>
</html>
这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。
CSS可以使用更多的属性来定义网页的显示样式，先来让我们看看下面这段没有CSS样式修饰的HTML代码的显示效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>登录</title>
</head>
<body>
<div id="box">
<div id="title">登录</div>
<table id="loginTable">
<tr>
<td width="90px;"><label for="username">用户名：</label></td>
<td><input type="text" name="username" id="username"
style="width: 120px;" /></td>
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td><input type="password" name="password" id="password"
style="width: 120px;" /></td>
</tr>
</table>
<br />
<div id="submit"><span style="width: 100px;"> <input
type="submit" name="submit" value="登录" style="width: 80px;"></span> <span>
<a href="register.do?method=init">注册</a></span></div>
</div>
</body>
</html>
显示的界面样式如下所示：
图3-1 使用CSS之前的页面
然后我们在该页面的<head></head>中添加如下的样式表代码：
<style>
body{
margin: 0px;
padding: 0px 0px 0px 0px;
font-family:Arial,"MS Sans Serif",Tahoma,sans-serif;
font-size: 12pt;
text-align:center;
}
#box{
width: 350px;
margin:15% auto;
background:#f6f8f7 url(images/bottom-left.gif) no-repeat left bottom;
padding:0px 0px 20px 0px;
border-top: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
}
#title{
text-align : left;
padding:5px 10px 5px 5px;
font-family: Courier, "Courier New", monospace;
font-size: 15pt;
color: #000033;
font-weight :bolder;
border-left:1px solid #d1d1d1;
}
#loginTable{
border:0;
margin:0 auto;
text-align:left;
}
#submit{
font-weight:bolder;
}
input:focus{
background:#ffc;
}
</style>
经过美化后的效果如图3-2所示：
图3-2 使用CSS以后的页面
对比上面两个页面的代码，我们发现，两者的唯一区别就是一个没有使用CSS而另一个使用了，其余的代码完全一样。由此可见CSS在Web页面中发挥的重要作用。
本文出自《Java高手真经. 网络开发卷：Java Web核心技术：Web基础+数据库+JSP/JavaBean/Servlet+JSF 》一书
