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页面中发挥的重要作用。 |
|