【网络建设的】
【案例6-1l使用内部样式表排版商品促销页面。
【案例展示】本例文件6-l.html在浏览器中显示的效果如图6-2所示。
图6-2使用内部样式表
【学习目标】掌握内部样式表的定义方法与格式要求。
【知识要点】使用内部样式表修改HTML标签进行页面的排版。
代码如下：
<! doctype html>
<html>
<head>
<meta charseF"gb2312">
<title>内部样式表实例</title>
</head>
<style type="text/css">
body {font-size:llpt)
hl {font-family：宋体；font-size:30pt;font-weight:bold;color:purple;text-align:center}/*修改标题1的样式+
hl.title {font-size:13pt; font-weight:bold;color:#666;text-align:center)
p {font-size:llpt;color:black;text-indent: 2em)／幸定义段落文字llpt;蓝色；文本缩进两个字符+／
p.author {color:blue;text-align:right) p定义作者文字蓝色、右对齐+／
·92·
p.img{text-align:center)
p.content {color:blue)
p.note{ color:green;text-align:left)
</style>
<body>
<hl>美亚手机限时促销</hl>
严定义图像居中对齐t／
／+定义内容文字蓝色+／
／+定义注释文字绿色、左对齐t／
<p>6月26日至6月28日，回答问题……最高价值900元。</p>
<hl class="title">超薄超值款</hl>
<p class=”author”>发布：乐天之星</p>
<p class=”img”><img src=”images/phone.jpg'’／><／p>
<p class=”content”>超级商务……手机电量。</p>
<p class=”note”>购买美亚手机……不胜枚举。</p>
<／body>
</html>
【案例说明】
①p元素定义了4个类：author、img、content和note。当<p>标签使用定义的这些类时，会按照类所定义的属性来显示。如果不是指定的类中的标签，就不能使用该设置的属性。例如，<h2 class=”note”>属性就不受class=”note”的影响，仍然保持黑色。 ②当一个网页文档具有唯一的样式时，可以使用嵌入的样式表。但是，如果多个网页都使用同一样式表，则采用外部样式表会更适合。
