📄 7-3-4.cfm.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>在HTML标识符的Class中加入Styles</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
</head>
<body>
<font FACE="宋体"><b>
<p ALIGN="JUSTIFY">在HTML标识符的Class中加入Styles</p>
</b></font><font FACE="宋体" SIZE="3">
<p ALIGN="JUSTIFY">假设你想为网页上特定的段落设定规则，而不是全部的内容。例如，你可能想让网页上的第一段以24点大小的字体显示，而第二段则以14点的大小显示，要利用Style
Sheets实现这一点，你必须找到一种方法来区别不同的<P>标识符。</p>
<p ALIGN="JUSTIFY">一个特殊的属性专门为这一目的而被引入，每一个HTML标识符都有一CLASS属性，它是用来将标识符分隔成不同的部分，下面的例子说明了如何使用这个属性：</p>
<p ALIGN="JUSTIFY"><HTML><br>
<HEAD></p>
<p ALIGN="JUSTIFY"><TITLE> Style </TITLE></p>
<p ALIGN="JUSTIFY"><STYLE></p>
<p ALIGN="JUSTIFY"><!--</p>
<p ALIGN="JUSTIFY">P.TheFirstClass {font-size: 24pt}</p>
<p ALIGN="JUSTIFY">P.TheSecondClass {font-size: 14pt}</p>
<p ALIGN="JUSTIFY">--></p>
<p ALIGN="JUSTIFY"></STYLE></p>
<p ALIGN="JUSTIFY"></HEAD></p>
<p ALIGN="JUSTIFY"><BODY></p>
<p ALIGN="JUSTIFY"><P CLASS=“TheFirstClass”></p>
<p ALIGN="JUSTIFY">I am the first paragraph and I am formatted with a 24 point font.</p>
<p ALIGN="JUSTIFY"></P></p>
<p ALIGN="JUSTIFY"><P CLASS=“TheSecondClass”></p>
<p ALIGN="JUSTIFY">I am the second paragraph and I am formatted with a 14 point font.</p>
<p ALIGN="JUSTIFY"></P></p>
<p ALIGN="JUSTIFY"></BODY></p>
<p ALIGN="JUSTIFY"></HTML></p>
<p ALIGN="JUSTIFY">位于两个<P>标识符之间的文字将以不同大小的字体显示出来（见图7.21）。这两个段落分别由它们的CLASS属性区别开来，例如，第一个段落与名为TheFirstClass的class相关联，而第二个段落则与名为TheSecondClass的class相关联。</p>
<p ALIGN="JUSTIFY"><img SRC="Image64.gif" tppabs="http://210.74.168.175/guide/asp/part7/Image64.gif" WIDTH="595" HEIGHT="412"></p>
<b>
<p ALIGN="CENTER">图7.21 使用CLASS标识符</p>
</b>
<p ALIGN="JUSTIFY">当指定了这些规则后，它们就和特定的class相关联。例如，第一个规则通过使用class选择符P.TheFirstClass与第一个class：TheFirstClass相关联。class选择符可用来区别一个标识符中不同的class，第一个段落的格式由第一个规则决定，因为这条规则选择了与class：TheFirstClass相关联的所有<P>标识符。</p>
<p ALIGN="JUSTIFY">不只一个<P>标识符可成为同一个class的成员。例如，假设有第三个<P>标识符被添加进上述HTML文件中，并指定属性CLASS＝“TheFirstClass”，则处于这个新的<P>标识符中的文字也受第一条规则的控制，第一条规则将作用于所有具备属性CLASS＝“TheFirstClass”的段落中。</p>
</font>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -