巧妙地使用CSS選擇器
更新時間:2008年05月27日 15:46:47 作者:
id用于標(biāo)識頁面唯一元素,id的名稱是控制某一內(nèi)容塊的手段,通過將某內(nèi)容塊置入div并賦予唯一的id,就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現(xiàn),包括標(biāo)題、列表、圖片、鏈接或者段落等等。例如你為#header寫一個CSS規(guī)則,就可以完全不同于#content里的圖片規(guī)則。
可以通過不同規(guī)則來定義不同內(nèi)容塊里的鏈接樣式。類似這樣:#nav a:link或者 #main a:link或者#footer a:link。也可以定義不同內(nèi)容塊中相同元素的樣式不一樣。例如,通過#main p和#sider p分別定義#main p和#sider p的樣式。從結(jié)構(gòu)上講,你的頁面是由圖片、鏈接、列表、段落等組成的,這些元素本身并不會對顯示在什么網(wǎng)絡(luò) 設(shè)備中(PDA還是手機或者網(wǎng)絡(luò)電視)有影響,它們可以被定義為任何的表現(xiàn)外觀。
一個仔細(xì)結(jié)構(gòu)化的HTML頁面非常簡單,每一個元素都被用于結(jié)構(gòu)目的。當(dāng)你想縮進一個段落,不需要使用blockquote標(biāo)簽,只要使用p標(biāo)簽,并對p 加一個CSS的text-indent規(guī)則就可以實現(xiàn)縮進目的。p是結(jié)構(gòu)化標(biāo)簽,text-indent是表現(xiàn)屬性,前者屬于HTML,后者屬于CSS。(這就是傳說中的結(jié)構(gòu)與表現(xiàn)相分離)
良好結(jié)構(gòu)的HTML頁面內(nèi)幾乎沒有表現(xiàn)屬性的標(biāo)簽。代碼非常干凈簡潔。例如,原先的代碼<table width="778" cellpadding="3" border="0" align="center">,現(xiàn)在可以只在HTML中寫<table id="MrJin">,所有控制表現(xiàn)的東西都寫到CSS中去,在結(jié)構(gòu)化的HTML中, table就是表格,而不是其他什么(更不能被用來布局和定位)。
當(dāng)然,CSS選擇器不只是這么簡單,除了id還有class還有后代選擇器,屬性選擇器等等。
一個仔細(xì)結(jié)構(gòu)化的HTML頁面非常簡單,每一個元素都被用于結(jié)構(gòu)目的。當(dāng)你想縮進一個段落,不需要使用blockquote標(biāo)簽,只要使用p標(biāo)簽,并對p 加一個CSS的text-indent規(guī)則就可以實現(xiàn)縮進目的。p是結(jié)構(gòu)化標(biāo)簽,text-indent是表現(xiàn)屬性,前者屬于HTML,后者屬于CSS。(這就是傳說中的結(jié)構(gòu)與表現(xiàn)相分離)
良好結(jié)構(gòu)的HTML頁面內(nèi)幾乎沒有表現(xiàn)屬性的標(biāo)簽。代碼非常干凈簡潔。例如,原先的代碼<table width="778" cellpadding="3" border="0" align="center">,現(xiàn)在可以只在HTML中寫<table id="MrJin">,所有控制表現(xiàn)的東西都寫到CSS中去,在結(jié)構(gòu)化的HTML中, table就是表格,而不是其他什么(更不能被用來布局和定位)。
當(dāng)然,CSS選擇器不只是這么簡單,除了id還有class還有后代選擇器,屬性選擇器等等。
相關(guān)文章
多中語言實現(xiàn)判斷客戶訪問用得是那個域名 然后轉(zhuǎn)到對應(yīng)的目錄
多中語言實現(xiàn)判斷客戶訪問用得是那個域名 然后轉(zhuǎn)到對應(yīng)的目錄...2007-05-05用CSS控制表格或單元格強制換行,防止表格被英文單詞或中文撐大
自動換行問題,正常字符的換行是比較合理的,而連續(xù)的數(shù)字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現(xiàn)換行的方法2008-10-10CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效
本文主要分享一個利用CSS3新特性transform,實現(xiàn)3D翻牌的特效,有需要的小伙伴可以參考下。2016-05-05