Los Angeles Chinese Learning Center, providing private Chinese Mandarin classes, Chinese tutors, Mandarin interpreter and translators, China investment report, investment opportunity report, China intelligence report, information on Chinese herbal medicines in Los Angeles
Corporate Services Other Services
Private Instruction Invest in China
Curriculum FAQ
Business Culture Links
Textbooks Our Staff
Hours and Location Contact Us
　

CSS(Cascading Style Sheets 串接樣式表）

什麼是CSS

CSS的全名是Cascading Style Sheets（串接樣式表）。它是由許多樣式名稱和樣式指定值所組成的字串，我們可以利用設定好的樣式表，指定給某一種HTML標籤，或某一群組HTML標籤來使用。而被套用的HTML標籤，將會依據所套用的CSS來顯式它的外觀。

CSS可說是JavaScript物件模型的一個重要部份，因為在CSS設定之後，我們還可以利用JavaScript重新指定不同的值給元件，而達成動態改變的效果（JavaScript動態改變的功能IE已完全支援，但NC只支援極少部份）。試想我們利用CSS將一段文字設為紅色，再利用JavaScript將它改變為籃色，這就是一種動態網頁效果啦（NC目前做不到）！

css是用來延伸html而非取代htnl,是用來補html的不足

IE4.0及Netscape支援CSS1.0版,而IE5.0則支援到部分CSS2.0

CSS利用各式的排版樣式來輔助HTML，其簡潔的語法可以很容易的控制HTML標記，而且最大的功能是可以將資料與顯示格式分開處理 ( 以 . CSS 為副檔名儲存成一個獨立的文字檔 ) 。

CSS的特點

減少圖檔的使用,便可以達到文字變化的需求,加快網頁傳輸的速度

集中管理樣式,當修改時只需針對樣式修改即可

共享樣式設定,CSS可另外存檔,供每一個網頁取用共享

使用CSS有什麼好處

CSS的最大好處是提供了HTML所不支援的屬性。例如<FONT>中只可設定文字前景顏色，但CSS可指定背景顏色、背景圖形甚至幫它畫個外框！所以CSS的出現，將使我們可以運用更多不同的屬性，當然網頁也會更漂亮啦！

用CSS將會使網頁設計速度增快。我們常常會用到許多參數完全相同的標籤，如可能用到好幾次參數設定一樣的<FONT>標籤，而還是得每次都重新指定所用的參數。但如果用CSS，就大不相同了！我們可以指定一群的標籤都套用某個CSS，這樣設定一次全部OK，不是很方便嗎？

讓許多網頁用同一份CSS，可減少網頁體積。CSS可獨立寫成一個檔案，再由瀏覽器於需要時讀入。如果數個檔案共用一份CSS，將可達到減小網頁體積的功效，而且也可以減低網路傳輸的負荷，可謂一舉多得！

串接

讓HTML文件可同時套用數個樣式表,每個樣式表描述不同的物件

將這些樣式串接同一網頁上,在維護上比較方便

CSS基本語法

HTML標記可為任何標記，多個HTML標記間以逗號 ( , ) 分隔 ; 屬性定義為大括弧部份，多個屬性定義間以分號 ( ; ) 分隔。

HTML標記 { 屬性名稱 : 屬性設定值 }

如 :
H1 , H3 { COLOR : RED ; FONT-WEIGHT : BOLD }

CSS種類

CSS為甚麼稱為串聯式排版樣式呢 ? 是因為可以混合使用以下Style Sheets種類，其優先執行順序依編號排列。

  1. Inline (同列) : 使用HTML標記的STYLE屬性，只於定義的區段有效。

    如 :
    <P STYLE=COLOR:RED>

  2. Embedding (內嵌) : 使用 <STYLE>...</STYLE>標記 ( 置於BODY本文區之前 )，定義HTML標記供整個網頁使用。可使用多個<STYLE>...</STYLE>標記

    如 :
    <HTML> 文件開始

    <STYLE TYPE=text/css> 排版樣式區開始
    <！-- 排版樣式區內容 -->
    </STYLE> 排版樣式區結束

    <BODY> 本文區開始
    本文區內容
    </BODY> 本文區結束

    </HTML> 文件結束

  3. Linking (連結) : 使用 <LINK>標記 ( 用於HEAD區 )，即將排版樣式分開處理 ( 以 . CSS 為副檔名儲存成一個獨立的文字檔 ) ，再連結使用。可使用多個<LINK>標記。

    如 :
    <HTML> 文件開始

    <HEAD> 標頭區開始
    <LINK TYPE=text/css REL=stylesheet
    HREF=s1.css>     連結CSS檔
    </HEAD> 標頭區結束

    <BODY> 本文區開始
    本文區內容
    </BODY> 本文區結束

    </HTML> 文件結束

CSS 相關的 HTML 標記、屬性

CSS 相關的 HTML 標記 :

  • <STYLE>...</STYLE> 設定 Style Sheet 格式
  • <LINK> 連結指令
  • <DIV>...</DIV> 分離區段 ( 允許重疊顯示 )
  • <SPAN>...</SPAN> 小區段範圍

 CSS 相關的 HTML 標記屬性 :

  • STYLE = cssl-properties 樣式
  • ID = value 代號
  • CLASS = classname 種類

 

　
All contents copyright ? Los Angeles Chinese Learning Center, unless otherwise noted. Website Hosting and Promotion