2.4.2 樣式引用 HTML
嵌入式樣式 :內(nèi)聯(lián)引用
樣式表
全局樣式表:內(nèi)部引用
鏈接的格式頁(yè):外部引用
嵌入式樣式
使用style屬性將樣式應(yīng)用于單個(gè)元素上,實(shí)現(xiàn)對(duì)特定元素的精確控制,優(yōu)先于樣式表控制,可以應(yīng)用于任何標(biāo)記,并且只影響所應(yīng)用的標(biāo)記
style=”單個(gè)或以分號(hào)分隔的若干樣式聲明(聲明塊)”
樣式聲明:屬性:屬性值
<HTML>
<HEAD>
<TITLE>Listing 11-2</TITLE>
</HEAD>
<BODY>
<SPAN STYLE="font-weight: bold">
This text is in a SPAN.</SPAN><BR>
This text is not in a SPAN.
</BODY>
</HTML>
全局樣式表
通過(guò)將樣式表嵌入<head>標(biāo)記內(nèi)的<style>標(biāo)記對(duì)內(nèi)實(shí)現(xiàn),控制文檔中相應(yīng)標(biāo)記的樣式
標(biāo)記的格式
<head>
…
<style>
樣式表
</style>
</head>
<HTML>
<HEAD>
<TITLE>Listing 11-7</TITLE>
<STYLE>
H1 {font-size: 16pt; font-weight: bold; color: red}
H2 {font-style: italic; font-size: 24pt; color: green}
SPAN {font-weight: bold; font-style: italic}
.adiv{height:52px;width:145px}
:hover{background-color:red} //本文檔懸停狀態(tài)的超接鏈的背景色為紅色
</STYLE>
</HEAD>
<BODY>
<SPAN>This text is in a SPAN.</SPAN>
<H1>This text is in an H1.</H1>
<H2>This text is in an H2.</H2>
<div class=”adiv”> //本塊的高度為52px,寬度為145px
<a href="herding.html">Herding Group:</a>
<a href="toy.html">Toy Group:</a>
</div>
<H2 STYLE=“font-size: 36pt”>This is modified H2 text.</H2>//本塊的高度為52px,寬度為145px
</BODY>
</HTML>
全局樣式表示例
鏈接的樣式表
以.css為擴(kuò)展名的包含格式定義的文本文件,可用來(lái)控制若干個(gè)網(wǎng)頁(yè)或整web站點(diǎn)的樣式。使用方法為在文檔的<head>區(qū)使用<link>標(biāo)記引用:
H1 {font-size: 16pt; font-weight: bold; color: red} (styles.css)
H2 {font-style: italic; font-size: 24pt; color: green}
SPAN {font-weight: bold; font-style: italic}
<HTML>
<HEAD>
<TITLE>Listing 11-8</TITLE>
<LINK HREF="styles.css" REL="STYLESHEET" TYPE="text/css">
</HEAD>
<BODY>
<SPAN>This text is in a SPAN.</SPAN>
<H1>This text is in an H1.</H1>
<H2>This text is in an H2.</H2>
<H2 STYLE="font-size: 36pt">This is modified H2 text.</H2>
</BODY>
</HTML>
@import命令: 格式頁(yè)包含命令,即在格式頁(yè)中加載其它格式頁(yè)
鏈接的樣式表示例
點(diǎn)擊加載更多評(píng)論>>