HTML結(jié)構(gòu)化續(xù):巧妙地使用CSS選擇器_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
id用于標(biāo)識(shí)頁(yè)面唯一元素,id的名稱是控制某一內(nèi)容塊的手段,通過(guò)將某內(nèi)容塊置入div并賦予唯一的id,就可以用CSS選擇器來(lái)精確定義每一個(gè)頁(yè)面元素的外觀表現(xiàn),包括標(biāo)題、列表、圖片、鏈接或者段落等等。例如你為#header寫(xiě)一個(gè)CSS規(guī)則,就可以完全不同于#content里的圖片規(guī)則。
可以通過(guò)不同規(guī)則來(lái)定義不同內(nèi)容塊里的鏈接樣式。類似這樣:#nav a:link或者 #main a:link或者#footer a:link。也可以定義不同內(nèi)容塊中相同元素的樣式不一樣。例如,通過(guò)#main p和#sider p分別定義#main p和#sider p的樣式。從結(jié)構(gòu)上講,你的頁(yè)面是由圖片、鏈接、列表、段落等組成的,這些元素本身并不會(huì)對(duì)顯示在什么網(wǎng)絡(luò) 設(shè)備中(PDA還是手機(jī)或者網(wǎng)絡(luò)電視)有影響,它們可以被定義為任何的表現(xiàn)外觀。
一個(gè)仔細(xì)結(jié)構(gòu)化的HTML頁(yè)面非常簡(jiǎn)單,每一個(gè)元素都被用于結(jié)構(gòu)目的。當(dāng)你想縮進(jìn)一個(gè)段落,不需要使用blockquote標(biāo)簽,只要使用p標(biāo)簽,并對(duì)p 加一個(gè)CSS的text-indent規(guī)則就可以實(shí)現(xiàn)縮進(jìn)目的。p是結(jié)構(gòu)化標(biāo)簽,text-indent是表現(xiàn)屬性,前者屬于HTML,后者屬于CSS。(這就是傳說(shuō)中的結(jié)構(gòu)與表現(xiàn)相分離)
良好結(jié)構(gòu)的HTML頁(yè)面內(nèi)幾乎沒(méi)有表現(xiàn)屬性的標(biāo)簽。代碼非常干凈簡(jiǎn)潔。例如,原先的代碼<table width="778" cellpadding="3" border="0" align="center">,現(xiàn)在可以只在HTML中寫(xiě)<table id="MrJin">,所有控制表現(xiàn)的東西都寫(xiě)到CSS中去,在結(jié)構(gòu)化的HTML中, table就是表格,而不是其他什么(更不能被用來(lái)布局和定位)。
當(dāng)然,CSS選擇器不只是這么簡(jiǎn)單,除了id還有class還有后代選擇器,屬性選擇器等等。
/所屬分類:Div+CSS教程/更新時(shí)間:2008-06-04
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- li列表項(xiàng)標(biāo)簽中插入圖片浮動(dòng)出現(xiàn)的一種奇怪現(xiàn)象
- CSSSprites工作原理及其對(duì)CSS布局的意義、優(yōu)點(diǎn)和缺點(diǎn)介紹
- DivCSS教程:letter-spacing與word-spacing屬性詳解
- CSS實(shí)戰(zhàn)經(jīng)驗(yàn):靈活運(yùn)行注釋帶來(lái)的益處
- 圖片IMG與容器下邊界有空隙的解決方法
- WEB2.0標(biāo)準(zhǔn)教程:第九天第一個(gè)CSS布局實(shí)例
- 網(wǎng)頁(yè)中表單常見(jiàn)問(wèn)題解決辦法
- DIV+CSS設(shè)計(jì)的誤區(qū)
- visibility:hidden和display:none的區(qū)別和用法
- 如何制作可控制顯示或隱藏的伸縮式DIV CSS新聞列表?
猜你也喜歡看這些
- CSS導(dǎo)航菜單:仿淘寶首頁(yè)導(dǎo)航條布局效果
- HowCSSLayoutWorks-如何進(jìn)行CSS布局
- CSS布局欣賞:淘寶首頁(yè)布局效果
- 仿谷歌google的搜索框下拉提示列表效果
- 用css網(wǎng)站布局之十步實(shí)錄!(四)
- CSS菜單:基本橫向菜單效果超炫
- DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式
- CSS如何實(shí)現(xiàn)單行圖片與文字垂直居中?
- CSS布局實(shí)例:一個(gè)不錯(cuò)的表格樣式
- DIVCSS橫向菜單實(shí)例:簡(jiǎn)單的思路陷下的風(fēng)格不錯(cuò)的效果
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-HTML結(jié)構(gòu)化續(xù):巧妙地使用CSS選擇器
。