回首頁 與我們連絡 網站地圖 加入我的最愛



 



css 基礎網頁應用



標準、進階四法結合使用:

為了解說方便,現在就再次請你開啟你慣用的文書編輯器來編輯一個新的樣式參照檔案,同時將檔案名稱定為 test2.css (這只是範例,參照檔案的名稱你可以自訂)並且加入以下內容

BODY {font-size: 16pt ; font-family: 新細明}
BODY {background: #FFC8FF ; color: #000000}

P {color:BLUE}
P {font-size:10pt}

樣式宣告內容:包括在<BODY>與<BODY>標籤之間的文字字型設定為新細明、文字大小為16pt,網頁的背景設設定為粉紅色,文字外觀顏色都變成黑色;包括在<P>與</P>標籤之間的文字大小為10pt、文字外觀顏色都變成藍色。

[test1.css 範例樣式檔內容]   [test2.css 範例樣式檔內容]

在建立好參照檔案後,接著我們就要利用標準、進階四法結合使用來建立一個HTML網頁檔:

<HTML>
<HEAD>
<TITLE>結合法參照樣式範例</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="test1.css">
<STYLE>
<!--
@import url("test2.css");
A {color:#772B1A}
-->
</STYLE>

</HEAD>
<BODY>
這是在BODY標籤內的文字
<P
style="color:YELLOW">這是在P標籤內的文字</P>
<A>鏈結的A標記</A>
</BODY>
</HTML>

[實例展示]
現在你應該清楚的了解到CSS的樣式宣告四法其實並不會衝突而且可以合併結合使用了吧!這宣告四法雖然可以合併結合使用,但是這樣的結合宣告我們並不認為是適當的!因為把眾多的功能混雜使用只會使自己弄得糊裡糊塗的!建議你還是選擇設合自己習慣的一種方法來使用就好。


樣式宣告衝突時的優先順序:
當我們混合多種的樣式宣告法後,若有些標籤樣式的性質重複宣告了怎麼辦?他們的優先順序如何?

作用優先順序:直接加註在標籤內的樣式性質 > STYLE樣式區段內的性質 > 鏈結進來的樣式檔案性質

  • 直接加註在標籤內的樣式性質 :例如,<P style="color:YELLOW">

  • STYLE樣式區段內的性質:被包括在<STYLE></STYLE>標籤之間的樣式性質設定

  • 鏈結進來的樣式檔案性質:利用 LINK 方法或 @import 方法鏈結進來的樣式檔案宣告內容。

設定優先順序:網頁設計者的設定 > 瀏覽者的使用者自訂 > 瀏覽器的預先設定

  • 網頁設計者的設定:就是我們所討論的樣式性質設定啦!

  • 瀏覽者的使用者自訂:瀏覽者透過所使用的瀏覽器進行自己瀏覽格式的設定。

  • 瀏覽器的預先設定:瀏覽者所使用的瀏覽器所預設的瀏覽格式。

 

<

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為