CSS技術(shù)的出現(xiàn)實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)分離

2024-07-11 08:48:50

字體：大中小

供稿：網(wǎng)友

css的作用
有一次找工作面試，很直接的那個(gè)面試官就問了我“CSS的作用是什么？”我當(dāng)時(shí)回答也很搞笑，就說了句，“現(xiàn)在做網(wǎng)站離不開CSS，這個(gè)就像魚離不開水一樣”?？赡苡X得說得也沒錯(cuò)。但深層次的想，確實(shí)沒有回答人家的問題。
記得在很久以前，久得我都記不清楚了。那時(shí)我剛接觸做網(wǎng)頁的時(shí)候，要讓頁面中的某個(gè)段落加粗一下，就要添加一個(gè)HTML標(biāo)簽并加上相應(yīng)的屬性。要讓某個(gè)段落對齊，我會在dreamweaver的設(shè)計(jì)器里打一大堆空格，然后代碼里會產(chǎn)生一大堆的  （不好意思，我當(dāng)時(shí)根本不知道）。每次要修改都要經(jīng)歷這樣一個(gè)過程，光不談HTML代碼的臃腫不說，維護(hù)起來更是一個(gè)讓人崩潰的事。
還好不久CSS就出現(xiàn)了，在這兒要感謝那些前輩們。通過他們的努力上面的問題得到了很好的解決。拋開各個(gè)瀏覽器對CSS解析的不同不說，最起碼CSS讓頁面不再那么難維護(hù)了。

我認(rèn)為CSS的出現(xiàn)具有以下幾個(gè)重要作用：
修飾頁面的元素時(shí)，避免了對HTML元素的改動（也就是現(xiàn)在流行的一個(gè)概念：“語義化”結(jié)構(gòu)與表現(xiàn)分享了）
每個(gè)瀏覽器對HTML的解析都不同。HTML原來設(shè)計(jì)的時(shí)候定位于定義文檔的內(nèi)容，通過使用<p>,<table>,<b>各類標(biāo)簽，所要表達(dá)的初衷是“段落”、“表格”之類的信息。但隨著各大瀏覽器的出現(xiàn)，也逐漸將新的HTML標(biāo)簽和屬性到HTML規(guī)范中，以至于使得創(chuàng)建一個(gè)合理的語義化的頁面結(jié)構(gòu)變得困難許多。
通過使用CSS樣式，可以定義字體、顏色，那么就可以讓這些原本不需要的表現(xiàn)形式的標(biāo)記消失，使合理的語義化標(biāo)記處于更好的位置，更好的發(fā)揮標(biāo)記的作用。

使我們能夠更輕松的控制頁面結(jié)構(gòu)和布局
網(wǎng)站重構(gòu)隨著這個(gè)概念的出現(xiàn)，也帶來了DIV結(jié)構(gòu)的流行，因此也就出現(xiàn)了我們現(xiàn)在口頭常說的“DIV+CSS做網(wǎng)站”。單從這個(gè)DIV+CSS的叫法來分析，可以了解到CSS已經(jīng)被大家用在了頁面布局上了。
但一個(gè)頁面不是只有控制DIV就控制了全面，還有很多其它的HTML標(biāo)記，以前用table布局的頁面，一樣可以用CSS來控制它。

最根本的也是我們開發(fā)人員關(guān)心的，提高開發(fā)和維護(hù)的效率
一個(gè)網(wǎng)站，如果有很多相同的結(jié)構(gòu)的文件需要修改，涉及到的工作量是巨大的，但如果通過改CSS來實(shí)現(xiàn)頁面的靈活變換，只需要修改某個(gè)樣式就可以上，效率上大大提升。

CSS的基本結(jié)構(gòu):selector{property:value;}
CSS的語法結(jié)構(gòu)由兩部分組成即：選擇器和規(guī)則。規(guī)則也就是花括號中包含的內(nèi)容。
選擇符（selector）:主要是告訴瀏覽器這個(gè)樣式是用于頁面中的哪些對象的，這個(gè)對象可以是HTML中的某個(gè)標(biāo)記，也可以是指定的Class或ID。這個(gè)后面會詳細(xì)的說。
聲明：聲明主要是告訴瀏覽器怎樣去渲染頁面中的與選擇符相匹配的對象。由屬性與屬性值組成，冒號相隔、分號結(jié)束的聲明形式可以一個(gè)或者多個(gè)的組合而成。
屬性：屬性主要以一個(gè)單詞的形式出現(xiàn)，并且都是CSS約定的，不可以自己定義。
屬性值：屬性值將根據(jù)屬性改變形式，包括數(shù)值，單位等。
說理論一般都不容易讓人記住，來舉個(gè)例子吧。

現(xiàn)在我要將頁面中的也就是body下的所有的文字設(shè)為紅色，且要18號字體，加粗顯示，可以這樣寫：

復(fù)制代碼

上一篇：IE6支持!important嗎如何用!important解決瀏覽器兼容性問題

下一篇：IE對標(biāo)準(zhǔn)的支持不夠好導(dǎo)致CSS渲染跟其它瀏覽器有什么不同