[TOC] >[info]CSS (Cascading Style Sheet)，中文翻譯為層疊樣式表， 是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一 種標記性語言。 * 樣式定義如何顯示 HTML 元素 * 樣式通常存儲在樣式表中 * 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題 * 外部樣式表可以極大提高工作效率 * 外部樣式表通常存儲在 CSS 文件中 * 多個樣式定義可層疊為一 ## 一、CSS的寫法 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。 ~~~ selector {declaration1; declaration2; ... declarationN } ~~~ 下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。 在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。 ~~~ h1 {color:red; font-size:14px;} ~~~ **下面的示意圖為您展示了上面這段代碼的結構：**  >[danger] 提示：請使用花括號來包圍聲明。 ## 二、如何創建 CSS ### 1、外部樣式表 當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（文檔的）頭部： ~~~ <link rel="stylesheet" type="text/css" href="mystyle.css" /> ~~~ ### 2、內部樣式表 當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 style 標簽在文檔頭部定義內部樣式表，就像這樣: ~~~ <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> ~~~ ### 3、內聯樣式 由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。 要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距： ~~~ <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> ~~~ ### 4、導入樣式 導入外部樣式表文件 ~~~ @import url("global.css"); ~~~ ## 三、css注釋 任何語言都有注釋，當然CSS也不例外 ~~~ <style type="text/css"> h1{ /*background: red*/ } </style> ~~~ >[danger]**作業：**分別練習四種寫樣式的方法，給不同的標簽加上顏色或者字體大小。