HTML+CSS+JavaScript網(wǎng)頁設(shè)計(jì)-第6章-CSS概述

1、第1頁第6章CSS概述本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述目前流行的，符合Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)模式是將頁面內(nèi)容和外觀樣式分離，前面5章我們學(xué)習(xí)了用HTML來創(chuàng)建網(wǎng)頁，在網(wǎng)頁中添加各類元素，從本章開始，我們將學(xué)習(xí)如何使用CSS為網(wǎng)頁元素定義外觀樣式，美化頁面，將網(wǎng)頁裝扮的更漂亮，具有獨(dú)特的風(fēng)格和個(gè)性。第3頁本章的學(xué)習(xí)目標(biāo)理解CSS的基本概念了解CSS的發(fā)展歷史理解使用CSS的好處掌握在HTML這使用CSS的幾種方法理解CSS中的繼承了解!important的用法掌握CSS的優(yōu)先級(jí)第4頁主要內(nèi)容6.1 為什么要在網(wǎng)頁中加入CSS6.2 在HTML中使用CSS6.3 CSS繼承和優(yōu)先級(jí)6.

2、4 本章小結(jié)6.5 思考和練習(xí)第5頁6.1為什么要在網(wǎng)頁中加入CSSCSS的全稱是層疊樣式表(Cascading Style Sheets)，它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化 CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。第6頁CSS產(chǎn)生的原因HTML的設(shè)計(jì)初衷并不是為了描述外觀，HTML本身也并不善于此道。在使用HTML描述Web頁面的外觀時(shí)，需要使用大量的標(biāo)記，而且常常要使用許多復(fù)雜堆棧或嵌套表。頁面的布局工作涉及隱

3、藏的像素圖像、專有元素與屬性、圖像中的文本和其他隱秘的復(fù)雜方式，這些都需要提供高質(zhì)量、高可靠度的HTML標(biāo)記代碼，這簡(jiǎn)直就是一場(chǎng)噩夢(mèng)。因此，人們將表示網(wǎng)頁外觀的功能標(biāo)記或?qū)傩苑蛛x出來，這就形成了表示網(wǎng)頁外觀的替代方法CSS。第7頁CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時(shí)就存在了。從1994年第一次提出CSS觀點(diǎn)至今，已經(jīng)有了3個(gè)主要版本。但隨著HTML的成長(zhǎng)，為了滿足設(shè)計(jì)師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加，用來定義樣式的語言越來越?jīng)]有意義了。1994年哈坤利(Hakun Lee)提出了CSS的最初建議。第8頁CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布

4、。CSS 1的大部分特征在Web瀏覽器中都獲得支持，但是一些不常用的功能(例如空白處理、字母間隔、顯示等)存在一些問題。CSS自從第一版發(fā)布之后，又在1998年5月發(fā)布了第二版，CSS得到了豐富。CSS 2.0是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的CSS 1.0或CSS 1.2完全不一樣，CSS 2.0推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式，HTML元素可以通過CSS 2.0的樣式控制顯示效果第9頁CSS的發(fā)展歷史CSS 2.0提供了一個(gè)機(jī)制，讓程序員開發(fā)時(shí)可以不考慮顯示和界面，就可以制作表單，顯示問題可由美工或程序員到后期再編寫相應(yīng)的CSS 2.0樣式來解決。不過，由于沒有很好的C

5、SS 2.0編輯軟件，所以無法做到所見即所得，編寫起來不易。CSS3在CSS2的基礎(chǔ)上，結(jié)合業(yè)務(wù)發(fā)展需求，以及過去瀏覽者操作習(xí)慣和開發(fā)者習(xí)慣，做了大幅改進(jìn)。第10頁使用CSS的好處(1) 大大縮減頁面代碼，提高頁面瀏覽速度，縮減帶寬成本。(2) 結(jié)構(gòu)清晰。容易被搜索引擎搜索到。用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)記，搜索引擎將更有效地搜索到內(nèi)容。(3) 縮短改版時(shí)間。只要簡(jiǎn)單地修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁面的站點(diǎn)。(4) 強(qiáng)大的字體控制和排版能力。使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。(5) 提高易用性。使用CSS可以結(jié)構(gòu)化HTML，如標(biāo)記只用來控制段

6、落，標(biāo)記只用來表現(xiàn)表格式數(shù)據(jù)等。(6) 表現(xiàn)和內(nèi)容相分離。將設(shè)計(jì)部分分離出來放在一個(gè)獨(dú)立樣式文件中(7) 布局靈活性不大，只能遵循、的格式，而使用CSS+div可以有更多格式。(8) 便于更新和維護(hù)。可以將站點(diǎn)中的所有頁面風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件，就可以更新所以頁面的風(fēng)格樣式。第11頁主要內(nèi)容6.1 為什么要在網(wǎng)頁中加入CSS6.2 在HTML中使用CSS6.3 CSS繼承和優(yōu)先級(jí)6.4 本章小結(jié)6.5 思考和練習(xí)第12頁6.2 在HTML中使用CSS在HTML網(wǎng)頁中使用CSS的方法有4種：第一，內(nèi)聯(lián)樣式，通過HTML元素的style屬性直接將樣式嵌入HTML標(biāo)

7、記中；第二，定義內(nèi)部樣式表，將表示樣式的style屬性的內(nèi)容，全部提到公共的樣式規(guī)則塊中，然后將其放在元素中，這樣，整個(gè)HTML文件中都可以使用該樣式；第三，鏈接外部樣式文件，將樣式獨(dú)立成文件，供任何頁面調(diào)用；第四，導(dǎo)入外部樣式表，這種方法與鏈接相似，外部樣式表獨(dú)立成文件，但是導(dǎo)入樣式表是使用import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL。有的書籍把第三和第四種方法算作一種，因?yàn)樗麄兌际菍邮奖愍?dú)立成為外部文件。第13頁內(nèi)聯(lián)樣式如果只是簡(jiǎn)單的隊(duì)某個(gè)元素單獨(dú)定義樣式，則可以使用內(nèi)聯(lián)樣式。例如，只希望針對(duì)某個(gè)特定的標(biāo)簽設(shè)置樣式為字號(hào)為50、綠色的楷體字體。則可以使用標(biāo)簽的style屬

8、性。style是核心屬性，幾乎任何HTML元素都有該屬性。內(nèi)聯(lián)樣式,50號(hào)綠色楷體第14頁內(nèi)聯(lián)樣式style屬性的值是若干個(gè)CSS屬性名/值對(duì)。CSS規(guī)則要求屬性名的后面緊跟一個(gè)冒號(hào)，然后是屬性值。每一個(gè)樣式規(guī)則以分號(hào)結(jié)束，最后一個(gè)樣式規(guī)則的結(jié)尾可以不加分號(hào)。格式如下：property-name1 : value1; . property-nameN : valueN;第15頁定義內(nèi)部樣式表為了避免CSS樣式和HTML標(biāo)簽的關(guān)系過于緊密，可以采用另外一種更合適的方法來中添加樣式規(guī)則，那就是創(chuàng)建與一個(gè)特定元素或一組元素綁定的樣式規(guī)則，這樣可以重復(fù)使用樣式規(guī)則。第16頁定義內(nèi)部樣式表當(dāng)CSS屬性名

9、是多個(gè)單詞時(shí)，應(yīng)該用短橫線分隔，例如font-face、font-size、line-height等。CSS屬性值允許多種形式，例如關(guān)鍵字(xx-small)、字符串(Arial)、數(shù)字(0)、帶單位的數(shù)字(100px或2cm)和特殊值等。CSS屬性名稱和很多屬性值不區(qū)分大小寫，但有的屬性值卻區(qū)分大小寫，例如，如果涉及到與HTML文檔一起工作的話，class和id名稱對(duì)大小寫是敏感的。為了安全起見，Web開發(fā)人員應(yīng)假定CSS規(guī)則的所有部分都區(qū)分大小寫。第17頁元素CSS樣式是通過標(biāo)記嵌入到頁面中的。元素位于元素內(nèi)，用于在網(wǎng)頁內(nèi)包含樣式表規(guī)則，而非鏈接某個(gè)外部文檔。有時(shí)，它還被用于需要在單一頁面

10、中包含某些額外規(guī)則，而且這些規(guī)則不必應(yīng)用于網(wǎng)站內(nèi)共享同一樣式表的其他頁面的情況。第18頁鏈接外部樣式文件在HTML 頁面中，通過在文檔的head部分使用元素，引用外部鏈接樣式文件。元素用于在網(wǎng)頁中描述兩個(gè)文檔之間的關(guān)系。例如，可以在HTML頁面中使用其指定應(yīng)該用于設(shè)置該頁面風(fēng)格的樣式表，也可以為對(duì)應(yīng)頁面指定一個(gè)RSS訂閱。元素永遠(yuǎn)是空元素，而且當(dāng)與樣式表一同使用時(shí)，它必須帶有兩個(gè)屬性：rel和href。 第19頁導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)入外部樣式表。這種方法與鏈接相似。導(dǎo)入樣式表的語法是使用import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL，最后以分號(hào)結(jié)束

11、，如下所示：import url(corerules.css);import指令必須在標(biāo)簽中使用，而且必須在樣式表中所有其他類型的規(guī)則之前使用。在實(shí)踐中，我們會(huì)在一個(gè)標(biāo)簽中看到導(dǎo)入的和嵌入的樣式混合在一起。第20頁link與import的區(qū)別link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；import屬于CSS范疇，只能加載CSS。link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；import需要頁面網(wǎng)頁完全載入以后加載。link是XHTML標(biāo)簽，無兼容問題；import是在CSS 2.1提出的，低版本的瀏覽器不支持。link支持使用Javascript控制DOM去改變樣式；

12、而import不支持。第21頁主要內(nèi)容6.1 為什么要在網(wǎng)頁中加入CSS6.2 在HTML中使用CSS6.3 CSS繼承和優(yōu)先級(jí)6.4 本章小結(jié)6.5 思考和練習(xí)6.3 CSS繼承和優(yōu)先級(jí)繼承即子類元素繼承父類的樣式，CSS中的繼承相對(duì)簡(jiǎn)單，但也容易讓人混淆。CSS規(guī)則應(yīng)用在標(biāo)記中，而應(yīng)用于特定元素的不同樣式值可以是從它的父級(jí)元素，甚至更遠(yuǎn)的元素繼承而來。大多數(shù)元素可從其父元素那里繼承樣式屬性，但是有一些樣式屬性(例如邊框)卻不可以。第22頁!important指示符如果一個(gè)特定的規(guī)則不希望被其他規(guī)則覆蓋，那么可以使用!important指示符。對(duì)于不會(huì)被忽略的規(guī)則，則在規(guī)則的分號(hào)前面插入!i

13、mportant指示符。例如，下面的樣式規(guī)則將設(shè)置所有的段落文本為紅色：p color: red !important; font-size: 12px;這樣，即使有一個(gè)如下所示的內(nèi)聯(lián)樣式的段落：帶內(nèi)聯(lián)樣式的段落因?yàn)樯厦娴囊?guī)則使用了!important指示符，所以color屬性不能被內(nèi)聯(lián)樣式覆蓋，文本顏色依然會(huì)是紅色的，而字號(hào)會(huì)被覆蓋，變?yōu)?4px。第23頁!important指示符當(dāng)使用!important指示符時(shí)，要確認(rèn)把它放在樣式規(guī)則的最后；否則就會(huì)被忽略。雖然!important指示符可以讓樣式不被覆蓋，讓復(fù)雜的繼承變得簡(jiǎn)單清晰，但并不鼓勵(lì)初學(xué)者使用!important指示符覆蓋，因?yàn)?/p>

14、CSS會(huì)根據(jù)層疊和權(quán)重產(chǎn)生正常的作用順序，使用了!important就擾亂了原本的順序，讓更多的權(quán)重給了正常情況下本不應(yīng)該獲得這么多權(quán)重的樣式。如果你從不使用!important，那么這標(biāo)志著你真正理解了CSS，并且證明你在編寫代碼前經(jīng)過深思熟慮。第24頁CSS優(yōu)先級(jí)層疊的基本思想是為應(yīng)用于文檔的包含多個(gè)樣式表的規(guī)則的系統(tǒng)進(jìn)行整理。當(dāng)這些疊加的樣式之間有沖突時(shí)，就要根據(jù)樣式的優(yōu)先級(jí)進(jìn)行選擇。前面已經(jīng)介紹過，內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表的優(yōu)先級(jí)如下：內(nèi)聯(lián)樣式 內(nèi)部樣式表 外部樣式表同一個(gè)樣式表中定義的樣式，使用不同的選擇器也可能存在疊加，從選擇器的角度，當(dāng)某個(gè)元素同時(shí)應(yīng)用標(biāo)簽選擇器、ID選擇

15、器、類選擇器定義的樣式時(shí)，將按照下面的優(yōu)先級(jí)進(jìn)行處理：ID選擇器 類選擇器 標(biāo)簽選擇器第25頁第26頁主要內(nèi)容6.1 為什么要在網(wǎng)頁中加入CSS6.2 在HTML中使用CSS6.3 CSS繼承和優(yōu)先級(jí)6.4 本章小結(jié)6.5 思考和練習(xí)第27頁6.4 本章小結(jié) 本章主要介紹了CSS的基本概念。首先介紹了為什么要使用CSS，包括CSS的基本概念、CSS產(chǎn)生的原因、CSS的發(fā)展歷史喝使用CSS的好處，使用CSS可以使頁面布局定位更精確、樣式更豐富，實(shí)行代碼重用，易于移植，更有利于網(wǎng)站的設(shè)計(jì)與維護(hù)；接著介紹了在網(wǎng)頁中使用CSS的4種方法：內(nèi)聯(lián)樣式、定義內(nèi)部樣式表、鏈接外部樣式文件和導(dǎo)入外部樣式文件；最后介紹了CSS的繼承和優(yōu)先級(jí)以及!important指示符的使用。通過本章的學(xué)習(xí)，讀者應(yīng)該了解CSS的基本概念，掌握在HTML使用CSS的幾種方法以及CSS的繼承和層疊樣式的優(yōu)先級(jí)。第28頁主要內(nèi)容6.1 為什么要在網(wǎng)頁中加入CSS6.2 在HTML中使用CSS6.3 CS