在实战一中，我们了解了CSS的基本写法还有其在Dreamweaver中所放置的位置。简单的说，以上介绍我们只是搬来了CSS的一个固定框架，就好像一个箱子，里面具体放什么，又应该怎么来放呢？具体的CSS样式又是怎么发挥其作用的呢？下面，我们用一段简单的CSS代码来解释一下CSS的基本用法。
打开Dreamweaver，我们现在来尝试改变页面的背景颜色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">body {background-color: yellow}
</style>
</head><body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>
在上面的代码中，你会看到在<style type="text/css"> </style>中多出了一段代码。那这段代码是做什么用的呢？
body {background-color: yellow}
body：也就是我们在Dreamweaver中经常看到的<body>。是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容。
background-color: yellow
background-color:这个定义的就是body的属性，意思是背景颜色。后面的yellow就是具体的颜色，黄色。
将这段代码拷贝到Dreamweaver中，你就会看到再Dreamweaver的视图页面中，整个网页的背景都变成黄色的了。
由上面的练习，我们大致可以知道，基本CSS的写法，是由三个部分构成的。如下：
CSS的定义 选择符(selector)，属性(properties)和属性的取值(value)。
语法: body { background-color: yellow } (选择符 {属性:值})
.gif){kind=small}
.png){kind=small}
立即创建免费网站