有了上面的基本了解，下面我们就看一下稍复杂的代码是如何来操作的。 先在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}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}p.no2 {background-color: gray; padding: 20px;}
</style>
</head><body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>
在上面这段代码中，除了定义<body>的背景外，还定义了其他的一些元素，比如说<p>段落的样式。而<h1> - <h6> 标签则是定义标题的大小。<h1> 定义最大的标题。<h6> 定义最小的标题。现在，我们主要来说一下p.no2 {background-color: gray; padding: 20px;}
我们知道，p {background-color: rgb(250,0,255)}是定义一个网页中的段落的样式。那么p.no2又是什么呢？其实，p.no2同样也是定义段落的样式，只不过它是定义某一个特殊段落的样式。在这里，p.no2的意思是段落下面的一个二级属性。具体的应用方式就是<p class="no2">。no2这个名字可以随意命名。最后要单独再对不一样的那个段落引用这个二级样式，即class="no2"。
上面的代码效果如下：
.jpg)
.gif){kind=small}
.png){kind=small}
立即创建免费网站