css+div網(wǎng)頁樣式與布局從入門到精通

《css+div網(wǎng)頁樣式與布局從入門到精通》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、Note第1章CSS樣式設(shè)計基礎(chǔ)第章CSS樣式設(shè)計基礎(chǔ)（視頻講解：2小時38分鐘）CSS（CascadingStyleSheet，層疊樣式表）是用來進(jìn)行網(wǎng)頁樣式設(shè)計的標(biāo)識語言，與HTML一樣屬于解釋性語言。如設(shè)計鏈接文本初始顯示為藍(lán)色，當(dāng)光標(biāo)移過時字體變成紅色且顯示下劃線，這就是一種樣式。通過設(shè)計樣式表，可以統(tǒng)一控制HTML中各個標(biāo)簽的顯示屬性。CSS樣式表可以使用戶更有效地控制網(wǎng)頁外觀，精確指定網(wǎng)頁元素位置，創(chuàng)建以及觀察特殊效果。使用CSS，可以將網(wǎng)頁結(jié)構(gòu)和內(nèi)容與表現(xiàn)形式分離開來，網(wǎng)頁結(jié)構(gòu)和內(nèi)容被存放在HTML文檔中，而用于定義表

2、現(xiàn)形式的CSS規(guī)則則被存放在另一個CSS樣式表文件中。本章將重點(diǎn)講解CSS的基本語法和規(guī)則。當(dāng)然，學(xué)習(xí)CSS的最好方式之一是直接使用它。但是，這樣可能會誤解重要的概念，或者在日后設(shè)計中出現(xiàn)問題，因此本章介紹的一些基本但常常被誤解的概念還需要讀者認(rèn)真學(xué)習(xí)，特別是零基礎(chǔ)的讀者。同時，本章還將講解如何讓HTML和CSS保持清晰且結(jié)構(gòu)良好。學(xué)習(xí)重點(diǎn)：:設(shè)計良好的HTML結(jié)構(gòu)。:恰當(dāng)選用HTML標(biāo)簽。:了解CSS的基本語法和用法。:熟練使用CSS選擇器。:理解CSS的基本特性?！?7·Note第1章CSS樣式設(shè)計基礎(chǔ):了解CSS的屬性和屬性值

3、?！?7·Note第1章CSS樣式設(shè)計基礎(chǔ)1.1設(shè)計良好的網(wǎng)頁結(jié)構(gòu)學(xué)習(xí)CSS之前，需要學(xué)會搭建結(jié)構(gòu)良好的網(wǎng)頁結(jié)構(gòu)，如果沒有結(jié)構(gòu)良好且有效的HTML文檔，那么很多事情都是不可能實(shí)現(xiàn)的，或者說實(shí)現(xiàn)起來是非常困難的。結(jié)構(gòu)良好且有效的HTML文檔在CSS設(shè)計中非常重要，在文檔中增加更多的有語義的標(biāo)簽，會讓后期工作更加輕松。1.1.1選用符合語義的標(biāo)簽早期的Web僅僅是一系列相互鏈接的研究文檔，并使用HTML添加基本的格式和結(jié)構(gòu)。但是，隨著互聯(lián)網(wǎng)的流行，HTML開始用來表現(xiàn)頁面。設(shè)計師用字體和粗體標(biāo)簽來創(chuàng)建所需的視覺效果，而不只是用標(biāo)題元素突

4、出顯示頁面的標(biāo)題。表格成了一種布局工具而不是顯示數(shù)據(jù)的方式。甚至設(shè)計師使用塊引用標(biāo)簽（

）來添加空白而不是表示引用。網(wǎng)頁很快就失去了語義，成了字體和表格標(biāo)簽的大雜燴。HTML原本是一種簡單且容易理解的標(biāo)簽語言。但是，隨著網(wǎng)頁變得越來越復(fù)雜，代碼變得越來越不容易理解了。因此，需要使用各種可視化網(wǎng)頁編輯工具來處理大量的無語義標(biāo)簽。不幸的是，這些工具并沒有簡化工作，反而添加了更多復(fù)雜的標(biāo)簽。最后，即使普通的網(wǎng)頁也變得非常復(fù)雜，以致于幾乎不能進(jìn)行手工編輯，后期編輯簡直就是一場噩夢，簡單的修改就會破壞代碼之間的結(jié)構(gòu)性，使

5、網(wǎng)頁無法正常顯示。如圖1.1所示是搜狐網(wǎng)站（http://www.sohu.com/）2002年1月18日的首頁效果（http://www.infomall.cn/cgi-bin/arcv-nohead/20020118/http://sohu.com/），它使用表格進(jìn)行布局，對標(biāo)題使用大的粗體字。代碼缺乏結(jié)構(gòu)性，很難理解，網(wǎng)頁結(jié)構(gòu)和表現(xiàn)混淆在一起，很難讀懂標(biāo)簽的語義，網(wǎng)頁結(jié)構(gòu)代碼如圖1.2所示?！?7·Note第1章CSS樣式設(shè)計基礎(chǔ)圖1.12002年1月18日搜狐網(wǎng)站首頁圖1.22002年1月18日搜狐網(wǎng)站首頁結(jié)構(gòu)代碼在這種情況

6、下，CSS出現(xiàn)了。CSS可以控制頁面的外觀，并且將文檔的表現(xiàn)部分與內(nèi)容分隔開。表現(xiàn)標(biāo)簽（如字體標(biāo)簽）可以去掉，而且可以使用CSS而不是表格來控制布局。標(biāo)簽重新變得簡單，人們又開始對底層代碼感興趣了。如圖1.3所示是搜狐網(wǎng)站（http://www.sohu.com/）2011年12月26日的首頁效果，首頁設(shè)計更趨成熟、大氣，信息容量和用戶體驗(yàn)得到明顯改善和強(qiáng)化，它具有良好的結(jié)構(gòu)，容易理解。如圖1.4所示即為2011年12月26日搜狐網(wǎng)站的首頁結(jié)構(gòu)代碼。雖然它仍然包含一些表現(xiàn)標(biāo)簽，但是與圖1.2中的代碼相比有了顯著的改進(jìn)。圖1.3201

7、1年12月26日搜狐網(wǎng)站首頁·47·Note第1章CSS樣式設(shè)計基礎(chǔ)圖1.42011年12月26日搜狐網(wǎng)站首頁結(jié)構(gòu)代碼標(biāo)簽語義重新得到了重視，瀏覽器的默認(rèn)樣式可以被覆蓋，所以可以將某些內(nèi)容設(shè)置為標(biāo)題，而不需要為它指定大的、加粗的字體?？梢詣?chuàng)建列表，而這些列表不一定顯示為一系列帶黑點(diǎn)的列表項，可以使用沒有相關(guān)聯(lián)樣式的塊引用。設(shè)計師開始按照HTML元素的原義使用它們，無需考慮它們的外觀。有語義的標(biāo)簽為設(shè)計師提供了很多方便。與表現(xiàn)性的頁面相比，有語義的頁面更容易處理。例如，假設(shè)需要修改頁面中的一個引用。如果這個引用加上了正確的標(biāo)簽，那么就

8、很容易搜索代碼，找到第一個塊引用元素。但是如果這個引用只是另一個段落元素標(biāo)簽，就很難尋找了。除了使人容易理解之外，程序和其他設(shè)備也可以理解有語義的標(biāo)簽。例如，搜索引擎可以識別出標(biāo)題行，并給它分配更高的重要度，因?yàn)樗话鼑趆1等標(biāo)題標(biāo)