欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS樣式表與HTML網(wǎng)頁的關(guān)系分析

  發(fā)布時間:2009-12-08 03:48:20   作者:佚名   我要評論
淺談CSS樣式表和html文檔的關(guān)系.

最近因?yàn)閹鸵粋€網(wǎng)友很費(fèi)神的修改了一個導(dǎo)航的CSS文件,還沒有我自己重寫code來的快,讓我想起了寫這篇文章。我發(fā)現(xiàn)很多web設(shè)計(jì)者對CSS寫法的繼承關(guān)系都有了一點(diǎn)了解,但是了解的還是不夠深,不夠透徹,所以今天打算把這個講一下。

首先談一下html文檔,但凡接觸過html語言的設(shè)計(jì)師,一定都會發(fā)現(xiàn)html的一個很明顯的特點(diǎn),那就是大多數(shù)代碼標(biāo)簽,都是有一個頭和一個尾的。比如<table>和</table>還有<div>和</div>等等,這種特點(diǎn)其實(shí)已經(jīng)告訴你了一個信號,就是html標(biāo)簽是可以包含和被包含的。要深刻理解這點(diǎn)并不容易。實(shí)際上,一層標(biāo)簽包含一層標(biāo)簽的寫法,這樣層層相套的關(guān)系就是一種繼承關(guān)系。

注:W3C組織對html代碼的個體標(biāo)簽也做了規(guī)范化處理, 例如<img>,<br>等都要求做自封閉處理,才能通過W3C標(biāo)準(zhǔn)檢測。就是在標(biāo)簽?zāi)┪驳姆捶嚼ㄌ柷凹右粋€斜線。寫法如下<img sc="pic.jpg " alt="" />,<br />.

我們來看下面的一個例子:

<div>

<b>小白</b>

</div>

 標(biāo)簽<b>就是標(biāo)簽<div>的子標(biāo)簽,他們就已經(jīng)形成了一個繼承關(guān)系,在CSS樣式表里你可以這樣寫來定位出文字”小白”的樣式。

div b{ font:400 14px "宋體"; color:#FF0000;}

你可以看到一個未加粗的14px大小的紅色字體樣式作用在文字“小白”上了。由此我們可以發(fā)現(xiàn)被標(biāo)簽包含的標(biāo)簽在CSS里可以用空格表示其繼承的關(guān)系,并且標(biāo)簽符本身就可以作為樣式表的名來定位需要修飾的樣式內(nèi)容,這兩點(diǎn)要牢記和深刻理解。

有過一定網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)的朋友都知道,在CSS樣式表里,我們可以通過定義ID名和類名也就是CLASS名來定位需要修飾的樣式內(nèi)容,但是現(xiàn)在我們在理解了上面剛講的內(nèi)容后,這里我則推薦你如果可以使用html元素名來定位的時候則不必使用ID名和CLASS名。為什么?第一,這是代碼的精簡性要求,第二,用html元素名來定位,能很好在CSS文檔里呈現(xiàn)出html文檔的結(jié)構(gòu)關(guān)系,這有利于你在后續(xù)的CSS深化表現(xiàn)時不破壞html頁面的大框架。

當(dāng)然,理解這一點(diǎn),需要有一定程度的html語言功底,什么地方用什么標(biāo)簽,是很有學(xué)問的。

大家不妨用下面的這個圖來理解html語言

可以很明了的看出html 語言的基本結(jié)構(gòu)就已經(jīng)展示了一個包含,繼承的關(guān)系。在<body>標(biāo)簽內(nèi)就是需要我們用心設(shè)計(jì)和表現(xiàn)的WEB主體了。我們在寫CSS樣式表的時候,按照層級的遞增關(guān)系能很容易的定位出需要修飾的元素。在元素內(nèi)容重復(fù)和復(fù)雜的時候,則可以再用ID名和CLASS名來逐一區(qū)分。

注:ID名在html文檔里是不能重復(fù)的,這不符合W3C規(guī)范。CLASS名可以重復(fù)出現(xiàn)在html文檔里,那么大家在定義大區(qū)域結(jié)構(gòu)的時候可以用ID名,在需要重復(fù)使用的樣式的地方就用CLASS名來定位。

總結(jié)一點(diǎn):寫CSS文檔就像畫畫,學(xué)過美術(shù)的朋友都知道,畫素描的時候都要先畫結(jié)構(gòu),在上黑白灰關(guān)系。那么CSS和html也一樣,定義好大框架后在著眼細(xì)節(jié)。做出來的網(wǎng)頁才會結(jié)構(gòu)清晰,代碼精煉,并易于修改。就把html看做一副畫,不要急于出效果,一步步來吧。

相關(guān)文章

  • HTML默認(rèn)樣式表CSS屬性除了inline和block的定義

    今天偶然在w3上看到了。除了inline和block的定義,主要是要注意 body|h1~h6|blockquote|menu|ul|ol|dd等標(biāo)簽的默認(rèn)樣式,還不知道的朋友可以參考下本文
    2014-02-13
  • 漂亮樣式表在XHTML+CSS網(wǎng)頁制作中的應(yīng)用

    這是一篇很久以前的文章了,現(xiàn)在看來,其中的思想很值得大家學(xué)習(xí),在jb51.net學(xué)習(xí)案例的同時,不仿學(xué)習(xí)一些理論的知識,對您知識的突破會很有幫助。大家加油!   自從
    2009-05-15
  • HTML基礎(chǔ)必看——全面了解css樣式表

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)必看——全面了解css樣式表。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

最新評論