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

2022-05-05發(fā)布者：ylm大?。?/span> 下載：0

文件大小:

軟件介紹

內(nèi)部樣式表

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

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

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

它的使用方法我們在前兩節(jié)也已經(jīng)使用過了。行內(nèi)樣式表直接在標簽內(nèi)部定義，使用style屬性，格式如下：

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

例如：

外部樣式表

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

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

下面我們以一個實例來看看如何使用外部樣式表：

link標簽為網(wǎng)頁鏈入了一個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>我真慘!被用來演示CSS!</title>
     <meta http-equiv="Content-Type"  content="text/html; charset=gb2312" />  <link rel="stylesheet" type="text/css" href="waibu.css">
     </head>
     <body>
     <h1>我是頁面最上端的標題1</h1>
     <h1 id="daohang">我是頁面左側(cè)的標題1，用來導(dǎo)航</h1>
     <h1>我是頁面新聞的標題1</h1>
     <p>我是新聞的內(nèi)容。</p>
     </body>
  </html>

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

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;
           }

層疊的意義

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

p { text-align: left;}

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

p {text-indent: 24px;}

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

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

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

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

p { text-align: center;}

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

p { text-align: left; }

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

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

內(nèi)部樣式表

外部樣式表

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

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

發(fā)表評論(共0條評論)

版權(quán)聲明：

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

2 本站將不對任何資源負法律責任，所有資源請在下載后24小時內(nèi)刪除。

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

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

熱門軟件

最近更新