CSS入门简介二
作者:蛛蛛虎 日期:2008-07-02
CSS里用到的许多CSS属性都与HTML属性相似。比如下面的HTML代码用来设置网页的背景颜色：
<body bgcolor="#FF0000"> |
使用CSS的话，我们可以这样获得同样的效果：
body {background-color: #FF0000;}
|
你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型：
selector { property: value;}
|
它包含三个元素。
selector选择符：表明花括号中的属性设置将应用于哪些HTML元素，例如body。
property属性：指定设置目标元素的哪些属性，比如body的background-color。
value值：设置指定属性的值，比如设置body背景颜色属性的值为#FF0000。
为HTML文档使用CSS，有3种方法可供选择。下面对这3种方法进行了概括，我们建议你对第三种方法（即外部样式表）予以关注。
方法一：行内样式表（style属性）。
为HTML应用CSS的第一种方法，是使用HTML属性style，将属性和值放在style属性中即可。我们在上例的基础之上，通过行内样式表将页面背景设为红色：
<html> |
方法二：内部样式表（style元素）。
为HTML应用CSS的另一种方法，是采用HTML元素style，添加在<head></head>元素之间。比如：
<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代码的头部（head），即放在标签<head>和标签</head>之间：
<html> |
这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用同一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工修改这100个HTML文档的工作，只需几秒钟即可搞定-修改外部样式表文件里的代码即可。
CSS可以使用更多的属性来定义网页的显示样式，这将在下一节中进行基本语法的讲解。在进行展开之前，我们先来看看CSS的魅力。
先来让我们看看下面这段没有CSS样式修饰的HTML代码的显示效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
显示的界面样式如图3-1所示。
| |
| 图3-1 使用CSS之前的页面 |
然后我们在该页面的<head></head>中添加如下的样式表代码：
<style> |
经过美化后的效果如图3-2所示。
| |
| 图3-2 使用CSS以后的页面 |
对比上面两个页面的代码，我们发现，两者的唯一区别就是一个没有使用CSS而另一个使用了，其余的代码完全一样。由此可见CSS在Web页面中发挥的重要作用。
| 上一节 回书目录 下一节 |
上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
相关日志: