本文
轉載自
www.admin5.com
CSS(Cascading Style Sheets)
簡介
在學
CSS
之前學習CSS之前，首先應學會寫HTML。如果你對HTML還一無所知，請參見HTML教程。
CSS(Cascading Style Sheets)
簡介當初一幫技術人員想出HTML，主要側重於定義內容，比如<p>表示一個段落，<h1>表示標題，而並沒有過多設計HTML的排版和介面效果。隨著Internet的迅猛發展，HTML被廣泛應用，上網的人們當然希望網頁做得漂亮些，因此HTML排版和介面效果的局限性日益暴露出來。為瞭解決這個問題，人們也走了不少彎路，用了一些不好的方法，比如給HTML增加很多的屬性結果將代碼變得很臃腫，將文本變成圖片，過多利用Table來排版，用空白的圖片表示白色的空間等。直到CSS出現。CSS可算是網頁設計的一個突破，它解決了網頁介面排版的難題。可以這麼說，HTML的Tag主要是定義網頁的內容(Content)，而CSS決定這些網頁內容如何顯示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻譯成串聯式樣式表。CSS按其位置可以分成三種：· 內嵌樣式(Inline Style) · 內部樣式表(Internal Style Sheet) · 外部樣式表(External Style Sheet)
內嵌樣式
(Inline Style)Inline Style是寫在Tag裡面的。內嵌樣式只對所在的Tag有效。<P style="font-size:20pt; color:red">這個Style定義<p></p>裡面的文字是20pt字型，字型顏色是紅色。</p>顯示樣本<html><head><title>內嵌式樣式(Inline Style)</title></head> <body> <P style="font-size:20pt; color:red">這個內嵌樣式(Inline Style)定義段落裡面的文字是20pt字型，字型顏色是紅色。</p> <P>這段文字沒有使用內嵌樣式。</p> </body></html>
內部樣式表
(Internal Style Sheet) 內部樣式表是寫在HTML的<head></head>裡面的。內部樣式表只對所在的網頁有效。<HTML><HEAD><STYLE type="text/css">H1.mylayout {border-width:1; border:solid; text-align:center; color:red}</STYLE></HEAD><BODY><H1 class="mylayout"> 這個標題使用了Style。</H1><H1>這個標題沒有使用Style。</H1></BODY></HTML> 內部樣式表(Internal Sytle Sheet)要用到Style這個Tag，寫法如下：<STYLE type="text/css">......</STYLE>
外部樣式表
(External Style Sheet)如果很多網頁需要用到同樣的樣式(Styles)，用什麼方法呢？將樣式(Styles)寫在一個以.css為尾碼的CSS檔案裡，然後在每個需要用到這些樣式(Styles)的網頁裡引用這個CSS檔案。比如可以用文字編輯器(NotePad)建立一個叫home的檔案，檔案尾碼不要用.txt，改成.css。檔案內容如下：H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}然後你建立一個網頁，代碼如下：<HTML><HEAD><link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"></HEAD><BODY><H1 class="mylayout"> 這個標題使用了Style。</H1><H1>這個標題沒有使用Style。</H1></BODY></HTML>使用外部(Extenal)樣式表，相對於內嵌(Inline)和內部式(Internal)的，有以下優點：· 樣式代碼可以複用。一個外部CSS檔案，可以被很多網頁共用。 · 便於修改。如果要修改樣式，只需要修改CSS檔案，而不需要修改每個網頁。 · 提高網頁顯示的速度。如果樣式寫在網頁裡，會降低網頁顯示的速度，如果網頁引用一個CSS檔案，這個CSS檔案多半已經在緩衝區(其它網頁早已經引用過它)，網頁顯示的速度就比較快。
串聯
(Cascading)CSS第一個字母，是Cascading，意為串聯。它是指不同來源的樣式(Styles)可以合在一起，形成一種樣式。Cascading的順序是：· 瀏覽器預設(browser default)(優先順序最低) · 外部樣式表(Extenal Style Sheet) · 內部樣式表(Internal Style Sheet) · 內嵌樣式表(Inline Style)(優先順序最高)樣式(Styles)的優先順序依次是內嵌(inline), 內部(internal), 外部(external), 瀏覽器預設(browser default)。假設內嵌(Inline)樣式中有font-size:30pt, 而內部(Internal)樣式中有font-size:12pt，那麼內嵌(Inline)式樣式就會覆蓋內部(Internal)樣式。顯示樣本<HTML><HEAD><TITLE>Cascading Order</title> <STYLE TYPE="text/css">p {font-size:12pt}</STYLE></HEAD> <p style = "font-size:30pt">這個段落的內嵌樣式(Inline Style)覆蓋(overwrite)了內部樣式表(Internal Style Sheet)，顯示的字型大小是30pt，而不是12pt。</p> </BODY></HTML>
