CSS階層樣式

CSS是什麼?CSS階層樣式表基本介紹|天矽科技客製化網頁設計

CSS是什麼?CSS階層樣式表基本介紹|天矽科技客製化網頁設計

 

CSS是用來表現網頁的風格特色的電腦語言,不能單獨使用,必須跟HTML或XML一起使用。

CSS是什麼


 CSS (Cascading Style Sheets) 階層樣式表,用來幫結構化文件(HTML/XML) 添加樣式的電腦語言。也就是說,它是一種風格頁面語言,能讓我們在HTML文件中,套上不同的頁面樣式,比如字級18px或是將文字變成紅色…等。

 在CSS出現以前,所有的HTML檔案都包含了檔案的顯示資訊,包含了文字如何排列、背景應該是怎樣顯示或是字型應該要怎麼呈現…等,讓程式碼過於雜亂;直到CSS出現,簡化了HTML的檔案,它將檔案內容與前台顯示的樣子分隔開來,讓HTML檔案只需要包含結構和內容的資訊,而CSS檔案負責樣式資訊。

 

CSS歷史

CSS1

發表於1996年12月

  1. 支援字型大小font-size、字型font-、強調strong
  2. 支援字的顏色color、背景的顏色background-color和其他元素background-image、background-repeat、background-attachment…等。
  3. 支援文章特徵,如字母及行距line-height
  4. 支援文字的排列text-、圖像img、表格table和其他元素
  5. 支援邊框border、邊界margin和其他關於排版的元素
  6. 支援id(元素命名)和class(元素歸類)

 

CSS2

 發表於1998年5月,由W3C推行,CSS2推薦的是一套「內容和表現效果分離方式」,HTML元素可以通過CSS2的樣式控制顯示效果,可以完全不使用以網的table和td來定位表單的外觀和樣式,只需要使用div和li這類標籤來分割元素,之後就能通過CSS2樣式來定義介面外觀。

資料來源:百科知識

 

CSS3

 現在大部分的主流瀏覽器都支援CSS3。CSS3分成不同的類別,稱為「modules」。每一個「modules」都有CSS2額外增加的功能,以及向下相容。

※註:CSS-module是一種模組化的CSS 方案,有著可以任意命名class、組合class、class繼承等特性。


 CSS3增加了許多功能,如border-radius圓角屬性、text-shadow文字陰影、transform旋轉/傾斜/縮放/變形及transition轉場效果以外,也支援了animation動畫效果和preserved-3d立體3D效果。目前網頁設計皆以此為標準設計,使用方法可參考W3C公布標準。

 

CSS4

 目前還在開發中,只有極少數的功能可以在部分瀏覽器上使用,詳細請至W3C官方網站查看。

 

資料來源:維基百科

 

套用CSS樣式

  1. 行內樣式(In-Line):
    寫在元素的style屬性內,影響單一標籤,如:<p style="color: 顏色代碼">文字</p>
    CSS樣式

  2. 內部樣式(Internal):
    寫在HTML檔案中,只影響目前頁面,使用<style type="text/css"></style>
    CSS樣式

  3. 外部樣式(External):
    讀入外部CSS檔,可讓多個頁面共用相同樣式。

  4. 優先權:
    內行樣式(高)> 內部樣式(中)> 外部樣式(低)

  5. CSS內註解格式:
    /*註解*/

  6. 優先屬性 !important:
    如有相同屬性設定,不管前後順序會以!important為優先。
    優先屬性 !important

 

參考來源:高雄教育局-學習CSS

 

 天矽科技客製化網頁設計,皆依照W3C推薦標準架設網站,網頁程式碼乾淨簡潔,利於SEO自然流量排名,有興趣歡迎與我們聯繫。

 

share FB LINE
看天矽作品集 回上一頁
ID:@323foylw