css中h1的基础写法

下面是一个例子，在这个简单的样式规则中包含选择符、属性和值。
h1 { font:36pt Courier; }

在这行代码中，h1是选择符，font是样式属性，而36pt Courier是值。选择符很重要，因为它意味着该字体设置将应用网页中所有h1元素。但你可能想挑出一些h1元素，这时该怎么办？答案是使用样式类。

假设要在文档中使用两种不同的<h1>标签。可以在样式表中添加下列CSS代码，为每种标签创建一个样式类：
h1.silly { font:36pt Comic Sans; }
h1.serious { font:36pt Arial; }

注意，这些选择符在h1之后包含一个点号（.），然后是一个描述性类名。在HTML页面中需要选择这两个样式类之一时，可使用class属性，如下所示：
<h1 class="silly">Marvin’s Munchies Inc.<h1>
<p>
Text about Marvin’s Muchies goes here.
</p>
<h1 class="serious">MMI Investor Information</h1>
<p>
Text for business investors goes here.
</p>

在HTML代码中引用样式类时，只要在元素的class属性中指定类名。在这个例子中，如果在网页开头包含一个指向样式表的<link />标签，且用户安装了Comic Sans字体，Marvin’s Munchies Inc.将显示为36点的Comic Sans字体；而MMI Investor Information将显示为36点的Arial字体。

如果要创建可应用于任何元素的样式表，而不仅仅应用于标题或其他特定标签，该如何办呢？可以将样式类与<div>标签相关联（第5章介绍过，该标签将文本放在类似于文本段落的块中）。

使用div选择符加上点号以及样式类名和样式说明，可创建自定义的HTML标签。这种标签可同时控制任意数量的字体、间距和边距设置。要在网页中应用自定义标签，可使用<div>标签和class="创建的类名"。

例如，程序清单12.1中的样式表包括下面的样式类说明：
div.footnote {
font-size:9pt;
line-height:12pt;
text-align:center;
}

提示：你可能注意到了，样式规则包含多个属性时，样式编码将稍有不同。对于只包含一个属性的样式规则，通常属性与规则放在同一行，如下所示：
div.footnote { font-size:9pt; }

然而，样式规则包含多个样式属性时，如果每个属性都单独一行，代码将更易于阅读和理解，如下所示：
div.footnote {
font-size:9pt;
line-height:12pt;
text-align:center;
}

在程序清单12.2中，使用下面的标签应用该样式表：
<div class="footnote">

在程序清单12.2中，<div>标签和结束标签</div>之间的文本内容都显示为9点并居中对齐，行间距为12点。

使用样式类的优点在于，它们将样式代码同网页分离，从而将HTML代码用于网页内容，而不是这些内容在屏幕上如何显示。然后，可以集中精力来调整样式表，控制内容如何显示。很少的样式表代码就能对整个网站产生很大的影响。这使得网页更易于维护和操作。