本章主要內容:
● 組成樣式表的元素
● CSS中使用的值的類型
● 如何在HTML文檔中包含CSS
第1章通過示例1-1簡單展示了CSS的功能,該示例顯示了一個網頁,其中包含了太陽系中的4個氣體行星及一些相關描述。本章將介紹樣式表的組成元素。
2.1 CSS規(guī)則
在分析樣式表時,可以將它逐步分解為更小的部分。這些部分從大到小分別是:
● 樣式表
● 規(guī)則
● 選擇器
● 聲明
● 屬性
● 值
一些特殊字符(花括號、冒號和分號)用于標記一個部分的開始和結束,以便與其他部分相分隔。下面這條規(guī)則顯示了一個樣式表的幾個部分以及分隔它們的特殊字符。
body {
width: 650px;
margin: 0 auto;
background: #000;
color: #FFF;
font: 12px sans-serif;
}
可以根據自己的喜好設置規(guī)則的布局;可以添加換行和空格來提高CSS的可讀性、合理性和組織性。如果愿意的話,那么甚至可以把所有的代碼放到一行中。
與HTML一樣,可以使用空格和換行來提高CSS代碼的可讀性。大多數情況下,讀取CSS的解釋器并不關注樣式表中存在多少空格或者使用了多少換行,只要在它們要求的地方使用了空格,那么使用1個或10個空格都可以。但是,人們必須經常使用某種結構以避免視覺疲勞,并且提高代碼的可維護性和工作效率。
建議使用本書中的風格來提高可讀性,但是您可能覺得其他某種風格更適合自己。保持一致性很重要,在選擇了一種適合自己的風格后,就應堅持使用這種風格。
在一條規(guī)則中,選擇樣式化HTML文檔中哪些元素的部分稱為選擇器。瀏覽器已經對大多數元素應用了一個默認樣式(例如,h1元素比常規(guī)的文本要大),所以您只需要編寫CSS來修改默認樣式或者添加樣式。