前面一篇文章介紹了CSS頁面布局中Html結構化,本節講解如何使用巧妙的使用CSS選擇器。
id用於標識頁面唯一元素,id的名稱是控制某一內容塊的手段,通過將某內容塊置入div並賦予唯一的id,就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現,包括標題、列表、圖片、鏈接或者段落等等。例如你為#header寫一個CSS規則,就可以完全不同於#content裡的圖片規則。
可以通過不同規則來定義不同內容塊裡的鏈接樣式。類似這樣:#nav a:link或者 #main a:link或者#footer a:link。也可以定義不同內容塊中相同元素的樣式不一樣。例如,通過#main p和#sider p分別定義#main p和#sider p的樣式。從結構上講,你的頁面是由圖片、鏈接、列表、段落等組成的,這些元素本身並不會對顯示在什麼網絡 設備中(PDA還是手機或者網絡電視)有影響,它們可以被定義為任何的表現外觀。
一個仔細結構化的HTML頁面非常簡單,每一個元素都被用於結構目的。當你想縮進一個段落,不需要使用blockquote標簽,只要使用p標簽,並對p 加一個CSS的text-indent規則就可以實現縮進目的。p是結構化標簽,text-indent是表現屬性,前者屬於Html,後者屬於CSS。(這就是傳說中的結構與表現相分離)
良好結構的HTML頁面內幾乎沒有表現屬性的標簽。代碼非常干淨簡潔。例如,原先的代碼<table width="778" cellpadding="3" border="0" align="center">,現在可以只在HTML中寫<table id="MrJin">,所有控制表現的東西都寫到CSS中去,在結構化的Html中, table就是表格,而不是其他什麼(更不能被用來布局和定位)。
當然,CSS選擇器不只是這麼簡單,除了id還有class還有後代選擇器,屬性選擇器等等。