位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > HTML > 問(wèn)題詳情

2.4.2 樣式引用 HTML

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-03

嵌入式樣式 ：內(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>

image.png

全局樣式表

通過(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>

全局樣式表示例

image.png

鏈接的樣式表 

以.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è)

鏈接的樣式表示例

image.png


繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部