css3網(wǎng)頁設(shè)計(jì)從入門到精通

《css3網(wǎng)頁設(shè)計(jì)從入門到精通》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、Note第1章CSS3設(shè)計(jì)概述第章CSS3設(shè)計(jì)概述（視頻講解：36分鐘）對(duì)于每一位網(wǎng)頁設(shè)計(jì)者來說，都應(yīng)該知道HTML，因?yàn)樗撬芯W(wǎng)頁制作的基礎(chǔ)。但是如果希望網(wǎng)頁能夠美觀、大方，并且升級(jí)方便、維護(hù)輕松，那么僅知道HTML語言是不夠的，CSS在這中間扮演著重要的角色。如果關(guān)注過最新的Web技術(shù)，相信您也聽說過CSS3。在學(xué)習(xí)和使用CSS3之前，我們應(yīng)該對(duì)這個(gè)新一代樣式表語言的來龍去脈有個(gè)基本了解。本章將從CSS基本概念出發(fā)，介紹CSS3概況，以及在網(wǎng)頁標(biāo)準(zhǔn)化中扮演的角色。【學(xué)習(xí)要點(diǎn)】:了解網(wǎng)頁標(biāo)準(zhǔn)化歷史:了解CSS歷史:了

2、解CSS3基本情況:初步形成CSS設(shè)計(jì)意識(shí)·21·Note第1章CSS3設(shè)計(jì)概述1.1認(rèn)識(shí)CSSCSS（Cascading?Style?Sheet），中文譯為層疊樣式表，它是用于控制網(wǎng)頁樣式并允許將樣式代碼與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS是1996年由W3C審核通過并推薦使用的。簡單地說，CSS的引入就是為了使得HTML語言能夠更好地適應(yīng)頁面的美工設(shè)計(jì)。它以HTML語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計(jì)者可以針對(duì)各種可視化瀏覽器設(shè)置不同的樣式風(fēng)格，包括顯示器、打印機(jī)、平板電

3、腦、手機(jī)等移動(dòng)設(shè)備。CSS的引入隨即引發(fā)了網(wǎng)頁設(shè)計(jì)一個(gè)又一個(gè)新高潮，使用CSS設(shè)計(jì)的優(yōu)秀頁面層出不窮。1.1.1CSS的發(fā)展歷史在20世紀(jì)90年代初，HTML語言誕生。早期的HTML只含有少量的顯示屬性，用來設(shè)置網(wǎng)頁和字體效果。隨著互聯(lián)網(wǎng)的發(fā)展，為了滿足日益豐富的網(wǎng)頁設(shè)計(jì)需求，HTML不斷添加各種顯示標(biāo)簽和樣式屬性，于是這就帶來一個(gè)問題：網(wǎng)頁結(jié)構(gòu)和樣式混用讓網(wǎng)頁代碼變得混亂不堪，代碼冗余增加了帶寬負(fù)擔(dān)，代碼維護(hù)也變得苦不堪言。1994年初，哈坤·利提出了CSS的最初建議。伯特·波斯（Bert?Bos）當(dāng)時(shí)正在設(shè)計(jì)一款A(yù)r

4、go瀏覽器，于是他們一拍即合，決定共同開發(fā)CSS。1994年底，哈坤在芝加哥的一次會(huì)議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個(gè)建議。當(dāng)時(shí)W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）組織剛剛成立，W3C對(duì)CSS的前途很感興趣，為此組織了一次討論會(huì)，哈坤、波斯是這個(gè)項(xiàng)目的主要技術(shù)負(fù)責(zé)人。1996年底，CSS語言正式完成，同年12月，CSS的第一版本被正式出版（http://www.w3.org/TR/CSS1/）。1997年初，W3C組織專門負(fù)責(zé)CSS的工作組，負(fù)責(zé)人是克里斯·里雷

5、。于是該工作組開始討論第一個(gè)版本中沒有涉及的問題。1998年5月，CSS2版本正式出版（http://www.w3.org/TR/CSS2/）。盡管CSS3的開發(fā)工作在2000年之前就開始了，但是距離最終的發(fā)布還有相當(dāng)長的路要走，為了加快開發(fā)速度，也為了方便各主流瀏覽器根據(jù)需要漸進(jìn)式地支持，CSS3按模塊化進(jìn)行全新設(shè)計(jì)，這些模塊可以獨(dú)立發(fā)布和實(shí)現(xiàn)，這也為日后CSS的擴(kuò)展奠定了基礎(chǔ)?？紤]到從CSS2到CSS3發(fā)布之間時(shí)間會(huì)很長，2002年工作組啟動(dòng)了CSS2.1的開發(fā)。這是CSS2的修訂版，它糾正了CSS2版本中的一些錯(cuò)誤

6、，并且更精確地描述了CSS的瀏覽器實(shí)現(xiàn)。2004年，CSS2.1正式發(fā)布，到2006年年底得到完善，CSS2.1也成為了目前最流行、獲得瀏覽器支持最完整的版本，它更準(zhǔn)確地反映了CSS當(dāng)前的狀態(tài)。1.1.2CSS頁面優(yōu)勢(shì)與傳統(tǒng)表格頁面相比，使用CSS設(shè)計(jì)的網(wǎng)頁頁面具有如下優(yōu)勢(shì)：t結(jié)構(gòu)清晰，便于腳本控制。·21·Note第1章CSS3設(shè)計(jì)概述在表格頁面中，需要添加大量的表格才能實(shí)現(xiàn)各種效果，例如，一行新聞列表可能需要3層表格嵌套，才能夠設(shè)計(jì)出新聞小圖標(biāo)、新聞標(biāo)題和新聞時(shí)間并排的效果；而使用CSS進(jìn)行設(shè)計(jì)時(shí)，就不用考慮這些問題

7、，只需要編寫簡單的新聞列表結(jié)構(gòu)，然后通過CSS樣式控制各種顯示效果。例如，新聞列表前的小圖標(biāo)可以通過CSS背景進(jìn)行設(shè)置，不用改動(dòng)HTML標(biāo)簽。t代碼簡潔，頁面下載速度快。在表格頁面中，頁面通過表格層層嵌套實(shí)現(xiàn)最終各種效果，因而產(chǎn)生大量代碼冗余；而使用CSS控制頁面，能夠極大地減少代碼量，特別是在整個(gè)網(wǎng)站統(tǒng)一使用一個(gè)樣式表時(shí)，更能夠節(jié)省代碼量，使頁面代碼變得簡潔明了。t修改方便，提高后期維護(hù)效率。在表格頁面中，修改樣式需要打開每個(gè)頁面逐一進(jìn)行修改，在網(wǎng)站的后期維護(hù)中，這個(gè)工作量是巨大的；而使用CSS布局時(shí)，有專門的CSS文

8、件控制頁面外觀，修改CSS文件中的代碼即可改變每個(gè)頁面的風(fēng)格和樣式效果，而不需要逐一修改每個(gè)頁面代碼。t擴(kuò)展性好、移植性強(qiáng)。在表格頁面中，HTML標(biāo)簽和表示性屬性摻雜在一起，要擴(kuò)展頁面內(nèi)容本身就是件很困難的事情，更無法靈活適應(yīng)不同設(shè)備的顯示需求；而在標(biāo)準(zhǔn)頁面中，結(jié)構(gòu)與樣式分離，結(jié)構(gòu)通過HTML編寫、樣式由CSS編寫，