HTML
網(wǎng)頁(yè)的核心是內(nèi)容與樣式,HTML就是其前者——內(nèi)容。脫離了內(nèi)容的樣式是沒(méi)有意義的,也就是說(shuō)離開(kāi)HTML光談CSS是沒(méi)有意義的。HTML語(yǔ)言其實(shí)很好辨認(rèn),由兩個(gè)尖括號(hào):<和>包起來(lái)的就被稱(chēng)為標(biāo)簽,如果你看到某個(gè)文檔里時(shí)不時(shí)出現(xiàn)標(biāo)簽,那這份文檔十有八九都是由HTML語(yǔ)言(或者它的親戚XML)寫(xiě)成的。
而由一對(duì)標(biāo)簽(比如和)包起來(lái)的所有文字內(nèi)容,便被稱(chēng)為元素。元素開(kāi)頭的標(biāo)簽就被稱(chēng)為開(kāi)始標(biāo)簽,而末尾的標(biāo)簽則被稱(chēng)為結(jié)束標(biāo)簽。開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間可以沒(méi)有任何文字;
有一種特殊的自閉合標(biāo)簽,比如水平線(xiàn)或者圖片,它們的斜杠位于尖括號(hào)里面,這樣的標(biāo)簽本身就是一個(gè)元素。
元素都有它的名字,名字就是開(kāi)始標(biāo)簽的那個(gè)尖括號(hào)后面的第一個(gè)單詞,這個(gè)名字是給電腦看的,但它很重要!因?yàn)椋?br/>
某些元素只能位在特定的元素內(nèi)。
某些元素只能位在特定的位置上。
關(guān)于HTML,我要說(shuō)的最后一個(gè)東西就是屬性。屬性會(huì)出現(xiàn)在元素的開(kāi)始標(biāo)簽里,通過(guò)空格區(qū)分不同的屬性,而寫(xiě)法是屬性名="屬性值"。對(duì)于使用css的設(shè)計(jì)師來(lái)說(shuō),class屬性就是最重要也是最經(jīng)常使用的屬性之一。
CSS
這就是網(wǎng)頁(yè)的第二個(gè)核心——樣式。理論上講它可以規(guī)定網(wǎng)頁(yè)的一切表現(xiàn),位置、顏色、大小、距離…設(shè)計(jì)稿上的所有效果都可以借助它一一呈現(xiàn),但是在實(shí)際應(yīng)用中配合功能和性能以及各方面的要求,導(dǎo)致設(shè)計(jì)師的構(gòu)想并不一定能夠完整表達(dá)。
HTML代碼可以寫(xiě)在很多文件中,而css代碼只能出現(xiàn)在兩個(gè)地方:css文件或者h(yuǎn)tml文件中。
選擇器是用來(lái)告訴瀏覽器,樣式需要應(yīng)用到哪個(gè)元素上,它的功能非常強(qiáng)大——可以直接按元素名稱(chēng)選擇,也可以按元素的id屬性值選擇,還可以按元素的class屬性值來(lái)選擇,甚至可以選擇某個(gè)元素的兄弟、兒子、孫子,還能選擇元素的狀態(tài)。
在HTML及CSS中都經(jīng)常提到的一個(gè)詞,class,通常也被稱(chēng)作類(lèi)。一個(gè)元素是可以擁有多個(gè)類(lèi)的(但不能擁有多個(gè)id,整個(gè)HTML文件中的所有元素的id屬性值都應(yīng)該是唯一的),類(lèi)名與類(lèi)名之間使用空格隔開(kāi),而類(lèi)名不能使用中文。通過(guò)類(lèi)選擇器選擇元素,是CSS中最常見(jiàn)的選擇方式。
CSS的屬性和前面說(shuō)過(guò)的元素的屬性是完全不同的,有興趣的話(huà)可以讀一下這篇文章,之后我會(huì)盡量區(qū)分說(shuō)明,請(qǐng)各位盡量避免混淆。每一條CSS屬性-值都構(gòu)成一個(gè)聲明,每一句聲明之后都需要一個(gè)半角分號(hào);來(lái)作為結(jié)束(就像我們寫(xiě)作時(shí)所用的句號(hào))。
至于大括號(hào)({和}),這是css的語(yǔ)法標(biāo)記,就像HTML中的尖括號(hào),時(shí)刻不要忘,否則易出錯(cuò)。
HTML + CSS
HTML 與 CSS 結(jié)合在一起,設(shè)計(jì)稿就這樣從一張圖片變成了我們?cè)跒g覽器中瀏覽的靜態(tài)網(wǎng)頁(yè),當(dāng)然這也就是以前可能會(huì)經(jīng)常聽(tīng)到的 DIV + CSS 。這樣話(huà)說(shuō)起來(lái)很輕巧,但是無(wú)論是 HTML 還是 CSS 都是需要一個(gè)字一個(gè)字打出來(lái)的…而更多的問(wèn)題,就在 HTML 與 CSS 的結(jié)合過(guò)程中產(chǎn)生了。
html元素是所有網(wǎng)頁(yè)都必須要具備的,網(wǎng)頁(yè)中的一切內(nèi)容必須寫(xiě)在html元素內(nèi);
head元素是給瀏覽器和搜索引擎準(zhǔn)備的,大部分并不會(huì)顯示在頁(yè)面上;
title元素中的內(nèi)容會(huì)顯示在瀏覽器標(biāo)題欄的位置上;
link元素的href屬性則指示了這個(gè)頁(yè)面所使用的css文件的;
還有可能會(huì)出現(xiàn)script元素,它將會(huì)指示這個(gè)頁(yè)面所使用的js文件;
body元素是放置網(wǎng)頁(yè)內(nèi)容的地方(你以后所寫(xiě)的99.9%的HTML代碼都會(huì)位于這個(gè)元素內(nèi))。
標(biāo)簽之前的空格被稱(chēng)作“縮進(jìn)”,良好的縮進(jìn)習(xí)慣可以幫助寫(xiě)出易讀的代碼,在任何一個(gè)項(xiàng)目或者頁(yè)面中,都應(yīng)該正確使用縮進(jìn)。上面所展示的代碼就是一個(gè)基本的縮進(jìn)示范,每個(gè)子元素都比其父元素縮進(jìn)一個(gè)單位。
一般的縮進(jìn)只要按下鍵盤(pán)左邊的Tab鍵就好,但是在程序員中廣泛存在一種究竟是一個(gè)Tab好還是兩個(gè)空格好的爭(zhēng)議(如同咸甜豆腐腦般的存在)。當(dāng)然在書(shū)寫(xiě)過(guò)程中,沒(méi)有人會(huì)去按兩下空格,他們通常是把Tab的輸入改為兩個(gè)空格而已(所以你只要記得,縮進(jìn)一個(gè)單位按一下Tab就好)