CSS階層樣式
CSS是什麼?CSS階層樣式表基本介紹|天矽科技客製化網頁設計
CSS是什麼
CSS (Cascading Style Sheets) 階層樣式表,用來幫結構化文件(HTML/XML) 添加樣式的電腦語言。也就是說,它是一種風格頁面語言,能讓我們在HTML文件中,套上不同的頁面樣式,比如字級18px或是將文字變成紅色…等。
在CSS出現以前,所有的HTML檔案都包含了檔案的顯示資訊,包含了文字如何排列、背景應該是怎樣顯示或是字型應該要怎麼呈現…等,讓程式碼過於雜亂;直到CSS出現,簡化了HTML的檔案,它將檔案內容與前台顯示的樣子分隔開來,讓HTML檔案只需要包含結構和內容的資訊,而CSS檔案負責樣式資訊。
CSS歷史
CSS1
發表於1996年12月
- 支援字型大小font-size、字型font-、強調strong
- 支援字的顏色color、背景的顏色background-color和其他元素background-image、background-repeat、background-attachment…等。
- 支援文章特徵,如字母及行距line-height
- 支援文字的排列text-、圖像img、表格table和其他元素
- 支援邊框border、邊界margin和其他關於排版的元素
- 支援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樣式
- 行內樣式(In-Line):
寫在元素的style屬性內,影響單一標籤,如:<p style="color: 顏色代碼">文字</p>
- 內部樣式(Internal):
寫在HTML檔案中,只影響目前頁面,使用<style type="text/css"></style>
- 外部樣式(External):
讀入外部CSS檔,可讓多個頁面共用相同樣式。 - 優先權:
內行樣式(高)> 內部樣式(中)> 外部樣式(低) - CSS內註解格式:
/*註解*/ - 優先屬性 !important:
如有相同屬性設定,不管前後順序會以!important為優先。
參考來源:高雄教育局-學習CSS
天矽科技客製化網頁設計,皆依照W3C推薦標準架設網站,網頁程式碼乾淨簡潔,利於SEO自然流量排名,有興趣歡迎與我們聯繫。