Dreamweaver 教程-CSS樣式表的3種關(guān)聯(lián)方法

2022-05-05發(fā)布者：ylm大小：下載：0

文件大小:

軟件介紹

內(nèi)部樣式表

內(nèi)部樣式表需要在網(wǎng)頁(yè)的<head>部分定義，格式如下：

<head>
    <style type="text/css">
     /*符合CSS語(yǔ)法結(jié)構(gòu)的CSS語(yǔ)句，例如*/   body { background-color: blue; }
    </style>
     </head>

行內(nèi)樣式表(內(nèi)嵌樣式表)

它的使用方法我們?cè)谇皟晒?jié)也已經(jīng)使用過(guò)了。行內(nèi)樣式表直接在標(biāo)簽內(nèi)部定義，使用style屬性，格式如下：

<標(biāo)簽 style="符合CSS語(yǔ)法結(jié)構(gòu)的CSS語(yǔ)句">

例如：

外部樣式表

使用外部樣式表時(shí)，CSS文件與網(wǎng)頁(yè)文件(html)是分離開(kāi)來(lái)的。要讓某一個(gè)網(wǎng)頁(yè)調(diào)用一個(gè)外部CSS文件，你需要在網(wǎng)頁(yè)的<head>部分插入以下內(nèi)容：

<head>
     <link rel="stylesheet" type="text/css"   href="文件位置/你的CSS文件名.css" />
    /*文件位置就是所處在的文件夾相對(duì)與當(dāng)前網(wǎng)頁(yè)的相對(duì)路徑*/
  </head>

下面我們以一個(gè)實(shí)例來(lái)看看如何使用外部樣式表：

link標(biāo)簽為網(wǎng)頁(yè)鏈入了一個(gè)CSS樣式表文件“waibu.css”，HTML文檔和CSS文件的源代碼分別如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>我真慘!被用來(lái)演示CSS!</title>
     <meta http-equiv="Content-Type"  content="text/html; charset=gb2312" />  <link rel="stylesheet" type="text/css" href="waibu.css">
     </head>
     <body>
     <h1>我是頁(yè)面最上端的標(biāo)題1</h1>
     <h1 id="daohang">我是頁(yè)面左側(cè)的標(biāo)題1，用來(lái)導(dǎo)航</h1>
     <h1>我是頁(yè)面新聞的標(biāo)題1</h1>
     <p>我是新聞的內(nèi)容。</p>
     </body>
  </html>

提示：此例中，HTML文檔和外部CSS文件要保存在同一個(gè)文件夾。

h1.dabiaoti {
           font-weight: bolder;
           text-align: center;
           }
           h1#daohang {
           font-size: 12px;
           font-weight: bolder;
           text-align: left;
           }
           .xinwen {
           font-size: 16px;
           font-weight:bold;
           text-align: center;
           color:green;
           }
           p {
           text-align: center;
           }

層疊的意義

當(dāng)我們?yōu)橥粋€(gè)標(biāo)簽多次設(shè)置樣式表的時(shí)候，這些樣式表會(huì)最終層疊成一個(gè)樣式表來(lái)作用于標(biāo)簽。例如，你在外部樣式表中為p定義了如下樣式：

p { text-align: left;}

而在內(nèi)部樣式表中又定義了如下樣式：

p {text-indent: 24px;}

那么最終網(wǎng)頁(yè)內(nèi)p標(biāo)簽的樣式將為： p { text-align: left;text-indent: 24px;}。

幾種樣式表的優(yōu)先級(jí)

上面的兩個(gè)樣式表的層疊比較好理解，兩個(gè)樣式表分別定義了一個(gè)標(biāo)簽的不同屬性。但是如果外部樣式表與內(nèi)部樣式表同時(shí)定義了一個(gè)屬性呢？看下面的例子。

外部樣式表的內(nèi)容：

p { text-align: center;}

內(nèi)部樣式表的內(nèi)容：

p { text-align: left; }

最終頁(yè)面中的段落將是左對(duì)齊，也就是說(shuō)如果你試圖對(duì)同一標(biāo)簽的同一屬性多次定義，那么內(nèi)部樣式表的定義將要覆蓋外部樣式表的定義。這是因?yàn)閮?nèi)部樣式表的優(yōu)先級(jí)高于外部樣式表。三種樣式表的優(yōu)先級(jí)由高到低排列如下：

行內(nèi)樣式表(內(nèi)嵌樣式表)

內(nèi)部樣式表

外部樣式表

補(bǔ)充規(guī)則：優(yōu)先級(jí)相同的情況下，后定義的屬性會(huì)覆蓋先前定義的。

其他高級(jí)規(guī)則：CSS中的important!可用于瀏覽器兼容的問(wèn)題，等以后再學(xué)習(xí)。

發(fā)表評(píng)論(共0條評(píng)論)

最新評(píng)論

點(diǎn)擊加載更多評(píng)論>>

版權(quán)聲明：

1 本站所有資源（含游戲）均是軟件作者、開(kāi)發(fā)商投稿，任何涉及商業(yè)盈利目的均不得使用，否則產(chǎn)生的一切后果將由您自己承擔(dān)！

2 本站將不對(duì)任何資源負(fù)法律責(zé)任，所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線(xiàn)投稿、無(wú)法下載等問(wèn)題，請(qǐng)與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等，請(qǐng)立刻聯(lián)系我們并具體說(shuō)明情況后，本站將盡快處理刪除，聯(lián)系QQ:2499894784

熱門(mén)軟件

最近更新