CSS基礎學習_CSS/HTML

　一．樣式表基礎

　　1． 樣式表中每一個條目由選擇符（selector）和對應的規則群組成，選擇符通常是HTML元素名稱，也可以是類（class）、標識符（id）、偽類（pseudo class，它們標示了超連結的不同狀態）等。

　　2． 將樣式表（規則）添加到HTML文檔中有3種方式：

　　① 外部樣式表。

　　② 應用於整個文檔的樣式，位於區，包括內建樣式表和輸入樣式表。

　　③ 行內樣式，通過絕大多數元素的style屬性實現。

　　3． 樣式表內的注釋用/* …*/。通過將樣式規則包圍在HTML注釋之間可以讓那些不支援樣式表技術的老瀏覽器也能正常工作而不是直接把樣式規則顯示在螢幕上。一般而言，瀏覽器會忽略不認識的元素和屬性，但包圍在元素之間的內容會顯示出來。

　　4． 每一條規則必須以分號；結束。

　　5． 如果多個元素共用相同的樣式規則，可以使用逗號將它們分組定義。這裡分組的概念與分類（class）或標識符（id）的概念不同，前者設定的規則對整個文檔中所有的該元素都起作用，而後者只對該元素的一個子集（class或id相同的）起作用。當成組規則和其他規則都涉及到同一個元素時，它們將被組合起來，以產生某個元素的完整的樣式。

　　舉例：成組規則的應用。

h1,h2,h3 {background : yellow; color : black;}

h1 {font-size : 200%;}

h2 {font-size : 150%;}

h3 {font-size : 125%;}

　　二．外部樣式表

　　外部樣式表通過在區內使用元素來引用，元素有三大屬性：

　　① rel：指明了連結關係，這裡是stylesheet。

　　② href：指明了外部樣式表的URL。

　　③ type：指明了樣式表的類型，這裡是text/css。（其他還有jss）

　　舉例：外部樣式表的引用方式。

Style Sheet Linking Example

　　三．應用於整個文檔的樣式表

　　3．1 內建樣式表

內建樣式表的使用方式是直接寫在head區的style元素內，從而形成應用與整個文檔的樣式表。這種情況下只需要用到style元素的type屬性。

　　舉例：內建樣式表的使用。

　　3．2 輸入樣式表

　　輸入樣式表也是引用一個外部樣式表，但不是通過link元素而是在style區內通過@import文法來引用：@import url（css的url地址）；可以在

　　四．行內樣式

　　絕大多數元素都有style屬性。行內樣式資訊並不需要從不支援樣式表的瀏覽器中隱藏，因為瀏覽器會忽略它們不理解的任何屬性。

　　舉例：行內樣式的使用。

CSS1 Inline

　　五．樣式規則的轄域

　　以上討論了樣式表的存放位置，現在討論樣式表的作用範圍，兩者既有聯絡又有區別：行內樣式規則自然決定了它的影響範圍是當前元素，而其他樣式規則可以靈活地設定規則的作用範圍。

　　5．1 簡單規則

　　最簡單的規則不妨稱它們為文檔規則和行內規則。前者可以應用到整個文檔中出現的所有的某元素（如所有的

元素），後者只應用到當前元素。

　　5．2 id規則

　　使用id屬性的元素除了可以作為超連結的目標外（類似name屬性，在載入頁面時將顯示定位在頁面的指定位置），還可以用它來和樣式表中的某個樣式規則綁定（比name屬性強的地方）。無論是作為超連結的href還是樣式規則的選擇符，引用id的格式為：＃id值。在一個HTML文檔中，id屬性值必須全域唯一。

　　舉例：id屬性與超連結或樣式表的結合使用。

如有

…

，則可以如下引用：

Go to SecondParagraph 或者

　　5．3 class規則

　　和id屬性一樣，class屬性也是HTML核心屬性之一，多數元素都有該屬性。class屬性定義了一個元素所屬類的名稱。class取值不要求唯一，同一類元素的多個執行個體、多個不同類的元素都可能屬於同一個類。使用類可以顯著地減少文檔中必需的樣式規則的數量。樣式規則中有兩種引用class的格式：

　　① 為所有該類的元素設定樣式：.類名{樣式規則;}

　　② 為屬於該類的所有X元素設定樣式：X.類名{樣式規則;}

　　舉例：class規則的使用。

　　5．4 偽類（pseudo－classes）和虛擬元素（pseudo－elements）

　　5．4．1 偽類

　　一組專門的預定義的類稱為偽類，主要用來處理超連結的狀態。超連結顯示文字的狀態可以通過偽類選擇符＋樣式規則來控制。偽類選擇符包括：

　　① a:link：未訪問連結

　　② a:visited：已訪問連結

　　③ a:active：啟用時（連結獲得焦點時）連結的顏色

　　④ a:hover：滑鼠移到連結上時

　　一般a:hover和a:visited連結的狀態（顏色、底線等）應該是相同的。前三者分別對應body元素的link、vlink、alink這三個屬性。四個“狀態”的先後過程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能設定有無底線（總是有的）。

　　舉例：偽類的常見狀態值

　　5．4．2 虛擬元素

　　兩個虛擬元素：:first-letter和:first-letter。它們常常和像

這樣的元素引導的一段文字一起使用，用來影響其中首字母或者首行的顯示，如p:first-letter和p:first-line。

　　5．5 情景選擇（contextual selection）

　　情景選擇允許對位於某嵌套層次內的某元素進行樣式控制，該規則通過按照嵌套的順序列出元素的名稱，然後給出樣式規則來建立。

　　舉例：使所有出現在

元素內的元素都有黃色的背景顏色。

p strong {background-color : yellow;}

　　六．樣式規則的繼承與嵌套

　　該性質允許對元素的多種規則進行組合，既可以從父元素那裡繼承一些屬性，也可以重寫某些屬性。層疊（CSS中的C）的一般思想有效地建立了一個系統以確定在有多個樣式表的文檔中哪些規則將被應用。例如，使用id屬性為一個特定的

元素指定規則，這相對於通過class規則指定的規則具有優先權，而class規則相對於為

元素自身指定的規則有優先權。相對於應用於整個文檔的樣式或連結進來的外部樣式，通過一個style屬性指定的行內樣式是更重要的。考慮究竟哪一個規則將最終生效的簡單方法是：越專門的規則優先順序越高，和標記位置越近的規則優先順序越高。

如果需要一個特定的規則永遠不被後面的另一條規則重寫，可以用!important聲明。對希望絕不被忽略的規則，可以在這個規則的分號之前插入聲明!important，它一定要放在規則的最後，分號之前的位置，否則將被忽略。另外，許多老版本的瀏覽器並不支援該聲明。

　　舉例：使用!important聲明不被重寫的規則。

P {color:red !important;font-size:12pt;}

元素最終將以紅色、24點大小顯示。

七．CSS1屬性

3．1 font屬性

字模、字型樣式、字型大小、字型效果等。常用屬性有：

① font-family：字模，Cursive、Fantasy、Comic Sans MS等。

② font-size：字型物理大小或相對大小，物理大小包括：xx-small、x-small、small、medium、large、x-large、xx-large分別對應1～7號字型。

③ font-style：是否斜體， normal、italic、oblique（＝italic）。

④ font-weight：文字粗細，normal、bold、bolder、lighter。

⑤ font-variant：小型大寫字母，normal、small-caps（小型大寫字母）。

3．2 text屬性
文本修飾、文本縮排、單詞間距、字母間距、行間距、文本的水平對齊和垂直對齊以及空白大小的控制。常用屬性有：

① text-transform：單詞大小寫，none、capitalize、uppercase、lowercase。

② text-decoration：特殊效果，none、line-through、overline、underline。

③ word-spacing：單詞間距，normal、英寸（in）、厘米（cm）、point（pt）、pica（pc）、em（em）、像素（px）。

④ letter-spacing：字母間距。

⑤ vertical-align：文本或映像的垂直定位，baseline（預設）、sub、super、top、text-top、middle、bottom、text-bottom。

⑥ text-align：文本水平對齊，left、right、center、justify。

⑦ text-indent：為段落元素第一行產生縮排。

⑧ line-height：當前行的高度，這樣設定的行上下會空出相同的距離。

⑨ white-space：控制元素內空格的處理方式，normal（預設）、pre（不壓縮空格）、nowrap（即使文本行超出了元素內容的寬度也不會換行）

3．3 color屬性和background屬性

① color：文字顏色

② background-color：背景色

③ background-image：背景映像，背景色顯示在背景映像的下面，以提供不透明的背景，比④ background-repeat：決定當背景映像比元素的畫布空間小時該如何排列。

repeat：預設，在水平和垂直兩個方向上平鋪；

repeat-x：僅在水平方向平鋪；

repeat-y：僅在垂直方向平鋪；

no-repeat：不平鋪。

⑤ background-attachment：

scroll：預設，映像和文本一起滾動；

fixed：映像不動，浮水印效果。

⑥ background-position：背景映像在元素畫布空間中的定位方式，指定了映像左上方相對於畫布的水平間距和垂直間距。可以用絕對距離（像素）、百分比或特殊關鍵字。

水平方向關鍵字：left、center、right

垂直方向關鍵字：top、center、bottom

舉例：background-image屬性使用。

b{background-image：url(donut-tile.gif);background-color：white;}

p{background-image：url(picture.gif);background-position：20% 40%;}

body{background-image：url(picture.gif);background-position：center center;}

3．4 box屬性

像

元素這樣的區塊層級元素可以作為螢幕上的一個矩形容器來考慮。可以通過樣式屬性來控制這些容器的三個方面。可以控制的box屬性如下：

① margin屬性：決定元素的box的邊和相鄰元素的邊的距離。

② border屬性：決定包圍元素的邊的邊框的視覺特性。

③ padding屬性：決定元素內它的邊和它的實際內容間的距離。

④ height，width和positioning屬性：決定由元素產生的box的大小和位置。

3．4．1 margin屬性

單邊距的設定規則：

① margin-top：上邊距

② margin-right：右邊距

③ margin-bottom：下邊距

④ margin-left：左邊距

舉例：單邊距的設定。

body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;}

p {margin-bottom:20mm;}

div.fun {margin-left:1.5cm; margin-right: 1.5cm;}

也可以用margin屬性來一次性為四條邊設定邊距。

舉例：通過margin屬性設定邊距的規則。

① 如果僅指定了單個值，則該值被應用到4個“空白”。

如：p{margin:1.5cm;}

② 如果四個值都指定了，則它們按照順時針方嚮應用到各個空白（上、右、下、左的順序），

最後一個距離後加分號，之間用空格相隔。

如：p{margin:10px 5px 15px 5px;}

③ 如果在規則中僅指定了兩個或三個值，缺少一邊的取值將由它的對邊決定。

如：p{margin:10px 5px ;}

將設定上邊、下邊的空白為10像素，右邊、左邊的空白為5像素。

3．4．2 border屬性

border位於空白（margin）和間隙（padding）之間。

（一）border-style屬性

① none：無邊框

② dotted：點邊框

③ dashed：虛線邊框

④ solid：實線邊框

⑤ double：雙邊框

⑥ groove：蝕刻邊框

⑦ ridge：突出邊框

⑧ inset：凹進邊框

⑨ outset：凸起邊框

也可以通過border-top-style，border-right-style，border-bottom-style，border-left-style來單獨設定各邊的邊框類型。當使用border-style來設定四邊時，規則同margin類似。

（二）border-width屬性

border-width、border-top-width、border-right-width、border-bottom-width、border-left-width可以分別設定邊框的粗細。典型取值有：thin、medium、thick，當然也可取其他長度值。

（三）border-color屬性

border-color、border-top-color、border-right-color、border-bottom-color、border-left-color可以分別設定邊框的顏色。

可以將border-style、border-width、border-color一起應用到border、border-top、border-right、border-bottom、border-left上來實現對相關border屬性的快速設定。當三個屬性在放在一起設定時，最好按照border-style、border-width、border-color的順序來給出值。

舉例：border組合屬性的設定。

#RainbowBox

{

background-color:yellow;

border-top:solid 20px red;

border-right:double 10px blue;

border-bottom:solid 20px green;

border-left:dashed 10px orange;

}

3．4．3 padding屬性

在元素的邊框和它的實際內容之間的空白可以通過padding屬性來控制。元素的4個間隙（padding）可以通過padding-top、padding-right、padding-bottom、padding-left來設定。與空白（margin）和邊框（border）一樣，你可以使用速記符形式的padding屬性來一次性地對四邊的間隙進行設定。

舉例：一個涉及margin、border、padding的綜合應用。