【網(wǎng)絡(luò)建設(shè)的】
【案例6-1l使用內(nèi)部樣式表排版商品促銷頁面。
【案例展示】本例文件6-l.html在瀏覽器中顯示的效果如圖6-2所示。
圖6-2使用內(nèi)部樣式表
【學(xué)習(xí)目標(biāo)】掌握內(nèi)部樣式表的定義方法與格式要求。
【知識要點(diǎn)】使用內(nèi)部樣式表修改HTML標(biāo)簽進(jìn)行頁面的排版。
代碼如下：
<! doctype html>
<html>
<head>
<meta charseF"gb2312">
<title>內(nèi)部樣式表實(shí)例</title>
</head>
<style type="text/css">
body {font-size:llpt)
hl {font-family：宋體；font-size:30pt;font-weight:bold;color:purple;text-align:center}/*修改標(biāo)題1的樣式+
hl.title {font-size:13pt; font-weight:bold;color:#666;text-align:center)
p {font-size:llpt;color:black;text-indent: 2em)／幸定義段落文字llpt;藍(lán)色；文本縮進(jìn)兩個字符+／
p.author {color:blue;text-align:right) p定義作者文字藍(lán)色、右對齊+／
·92·
p.img{text-align:center)
p.content {color:blue)
p.note{ color:green;text-align:left)
</style>
<body>
<hl>美亞手機(jī)限時促銷</hl>
嚴(yán)定義圖像居中對齊t／
／+定義內(nèi)容文字藍(lán)色+／
／+定義注釋文字綠色、左對齊t／
<p>6月26日至6月28日，回答問題……最高價(jià)值900元。</p>
<hl class="title">超薄超值款</hl>
<p class=”author”>發(fā)布：樂天之星</p>
<p class=”img”><img src=”images/phone.jpg'’／><／p>
<p class=”content”>超級商務(wù)……手機(jī)電量。</p>
<p class=”note”>購買美亞手機(jī)……不勝枚舉。</p>
<／body>
</html>
【案例說明】
①p元素定義了4個類：author、img、content和note。當(dāng)<p>標(biāo)簽使用定義的這些類時，會按照類所定義的屬性來顯示。如果不是指定的類中的標(biāo)簽，就不能使用該設(shè)置的屬性。例如，<h2 class=”note”>屬性就不受class=”note”的影響，仍然保持黑色。 ②當(dāng)一個網(wǎng)頁文檔具有唯一的樣式時，可以使用嵌入的樣式表。但是，如果多個網(wǎng)頁都使用同一樣式表，則采用外部樣式表會更適合。
