HTML+CSS+JavaScript網(wǎng)頁設(shè)計-第6章-CSS概述課件_第1頁
HTML+CSS+JavaScript網(wǎng)頁設(shè)計-第6章-CSS概述課件_第2頁
HTML+CSS+JavaScript網(wǎng)頁設(shè)計-第6章-CSS概述課件_第3頁
HTML+CSS+JavaScript網(wǎng)頁設(shè)計-第6章-CSS概述課件_第4頁
HTML+CSS+JavaScript網(wǎng)頁設(shè)計-第6章-CSS概述課件_第5頁
已閱讀5頁，還剩53頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第1頁第6章CSS概述本章概述本章的學(xué)習(xí)目標主要內(nèi)容第1頁第6章CSS概述本章概述第2頁本章概述目前流行的，符合Web標準的網(wǎng)頁設(shè)計模式是將頁面內(nèi)容和外觀樣式分離，前面5章我們學(xué)習(xí)了用HTML來創(chuàng)建網(wǎng)頁，在網(wǎng)頁中添加各類元素，從本章開始，我們將學(xué)習(xí)如何使用CSS為網(wǎng)頁元素定義外觀樣式，美化頁面，將網(wǎng)頁裝扮的更漂亮，具有獨特的風(fēng)格和個性。第2頁本章概述目前流行的，符合Web標準的網(wǎng)頁設(shè)計模式是將頁第3頁本章的學(xué)習(xí)目標理解CSS的基本概念了解CSS的發(fā)展歷史理解使用CSS的好處掌握在HTML這使用CSS的幾種方法理解CSS中的繼承了解!important的用法掌握CSS的優(yōu)先級第3頁本章的學(xué)習(xí)目標理解CSS的基本概念第4頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS6.2在HTML中使用CSS6.3CSS繼承和優(yōu)先級6.4本章小結(jié) 6.5思考和練習(xí)第4頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS第5頁6.1為什么要在網(wǎng)頁中加入CSSCSS的全稱是層疊樣式表(CascadingStyleSheets)，它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化

CSS能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。第5頁6.1為什么要在網(wǎng)頁中加入CSSCSS的全稱是層疊樣式第6頁CSS產(chǎn)生的原因HTML的設(shè)計初衷并不是為了描述外觀，HTML本身也并不善于此道。在使用HTML描述Web頁面的外觀時，需要使用大量的標記，而且常常要使用許多復(fù)雜堆?；蚯短妆?。頁面的布局工作涉及隱藏的像素圖像、專有元素與屬性、圖像中的文本和其他隱秘的復(fù)雜方式，這些都需要提供高質(zhì)量、高可靠度的HTML標記代碼，這簡直就是一場噩夢。因此，人們將表示網(wǎng)頁外觀的功能標記或?qū)傩苑蛛x出來，這就形成了表示網(wǎng)頁外觀的替代方法——CSS。第6頁CSS產(chǎn)生的原因HTML的設(shè)計初衷并不是為了描述外觀，第7頁CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時就存在了。從1994年第一次提出CSS觀點至今，已經(jīng)有了3個主要版本。但隨著HTML的成長，為了滿足設(shè)計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加，用來定義樣式的語言越來越?jīng)]有意義了。1994年哈坤·利(HakunLee)提出了CSS的最初建議。第7頁CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時就存第8頁CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布。CSS1的大部分特征在Web瀏覽器中都獲得支持，但是一些不常用的功能(例如空白處理、字母間隔、顯示等)存在一些問題。CSS自從第一版發(fā)布之后，又在1998年5月發(fā)布了第二版，CSS得到了豐富。CSS2.0是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式，HTML元素可以通過CSS2.0的樣式控制顯示效果第8頁CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布第9頁CSS的發(fā)展歷史CSS2.0提供了一個機制，讓程序員開發(fā)時可以不考慮顯示和界面，就可以制作表單，顯示問題可由美工或程序員到后期再編寫相應(yīng)的CSS2.0樣式來解決。不過，由于沒有很好的CSS2.0編輯軟件，所以無法做到所見即所得，編寫起來不易。CSS3在CSS2的基礎(chǔ)上，結(jié)合業(yè)務(wù)發(fā)展需求，以及過去瀏覽者操作習(xí)慣和開發(fā)者習(xí)慣，做了大幅改進。第9頁CSS的發(fā)展歷史CSS2.0提供了一個機制，讓程序員第10頁使用CSS的好處(1)大大縮減頁面代碼，提高頁面瀏覽速度，縮減帶寬成本。(2)結(jié)構(gòu)清晰。容易被搜索引擎搜索到。用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標記，搜索引擎將更有效地搜索到內(nèi)容。(3)縮短改版時間。只要簡單地修改幾個CSS文件就可以重新設(shè)計一個有成百上千頁面的站點。(4)強大的字體控制和排版能力。使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。(5)提高易用性。使用CSS可以結(jié)構(gòu)化HTML，如<p>標記只用來控制段落，<table>標記只用來表現(xiàn)表格式數(shù)據(jù)等。(6)表現(xiàn)和內(nèi)容相分離。將設(shè)計部分分離出來放在一個獨立樣式文件中(7)<table>布局靈活性不大，只能遵循<table>、<tr>、<td>的格式，而使用CSS+div可以有更多格式。(8)便于更新和維護?？梢詫⒄军c中的所有頁面風(fēng)格都使用一個CSS文件進行控制，只要修改這個CSS文件，就可以更新所以頁面的風(fēng)格樣式。第10頁使用CSS的好處(1)大大縮減頁面代碼，提高頁面瀏第11頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級6.4本章小結(jié) 6.5思考和練習(xí)第11頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS 第12頁6.2在HTML中使用CSS在HTML網(wǎng)頁中使用CSS的方法有4種：第一，內(nèi)聯(lián)樣式，通過HTML元素的style屬性直接將樣式嵌入HTML標記中；第二，定義內(nèi)部樣式表，將表示樣式的style屬性的內(nèi)容，全部提到公共的樣式規(guī)則塊中，然后將其放在<style>元素中，這樣，整個HTML文件中都可以使用該樣式；第三，鏈接外部樣式文件，將樣式獨立成文件，供任何頁面調(diào)用；第四，導(dǎo)入外部樣式表，這種方法與鏈接相似，外部樣式表獨立成文件，但是導(dǎo)入樣式表是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL。有的書籍把第三和第四種方法算作一種，因為他們都是將樣式表獨立成為外部文件。第12頁6.2在HTML中使用CSS在HTML網(wǎng)頁中使用第13頁內(nèi)聯(lián)樣式如果只是簡單的隊某個元素單獨定義樣式，則可以使用內(nèi)聯(lián)樣式。例如，只希望針對某個特定的<h1>標簽設(shè)置樣式為字號為50、綠色的楷體字體。則可以使用<h1>標簽的style屬性。style是核心屬性，幾乎任何HTML元素都有該屬性。<h1style="font-size:50px;font-family:楷體;color:green;">內(nèi)聯(lián)樣式,50號綠色楷體</h1>第13頁內(nèi)聯(lián)樣式如果只是簡單的隊某個元素單獨定義樣式，則可以第14頁內(nèi)聯(lián)樣式style屬性的值是若干個CSS屬性名/值對。CSS規(guī)則要求屬性名的后面緊跟一個冒號，然后是屬性值。每一個樣式規(guī)則以分號結(jié)束，最后一個樣式規(guī)則的結(jié)尾可以不加分號。格式如下：property-name1:value1;...property-nameN:valueN;第14頁內(nèi)聯(lián)樣式style屬性的值是若干個CSS屬性名/值對第15頁定義內(nèi)部樣式表為了避免CSS樣式和HTML標簽的關(guān)系過于緊密，可以采用另外一種更合適的方法來中添加樣式規(guī)則，那就是創(chuàng)建與一個特定元素或一組元素綁定的樣式規(guī)則，這樣可以重復(fù)使用樣式規(guī)則。第15頁定義內(nèi)部樣式表為了避免CSS樣式和HTML標簽的關(guān)系第16頁定義內(nèi)部樣式表當(dāng)CSS屬性名是多個單詞時，應(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名稱對大小寫是敏感的。為了安全起見，Web開發(fā)人員應(yīng)假定CSS規(guī)則的所有部分都區(qū)分大小寫。第16頁定義內(nèi)部樣式表當(dāng)CSS屬性名是多個單詞時，應(yīng)該用短橫第17頁<style>元素CSS樣式是通過<style>標記嵌入到頁面中的。<style>元素位于<head>元素內(nèi)，用于在網(wǎng)頁內(nèi)包含樣式表規(guī)則，而非鏈接某個外部文檔。有時，它還被用于需要在單一頁面中包含某些額外規(guī)則，而且這些規(guī)則不必應(yīng)用于網(wǎng)站內(nèi)共享同一樣式表的其他頁面的情況。第17頁<style>元素CSS樣式是通過<style>標記第18頁鏈接外部樣式文件在HTML頁面中，通過在文檔的head部分使用<link>元素，引用外部鏈接樣式文件。<link>元素用于在網(wǎng)頁中描述兩個文檔之間的關(guān)系。例如，可以在HTML頁面中使用其指定應(yīng)該用于設(shè)置該頁面風(fēng)格的樣式表，也可以為對應(yīng)頁面指定一個RSS訂閱。<link>元素永遠是空元素，而且當(dāng)與樣式表一同使用時，它必須帶有兩個屬性：rel和href。

<linkhref="mystyle.css"rel="stylesheet"type="text/css">第18頁鏈接外部樣式文件在HTML頁面中，通過在文檔的he第19頁導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)入外部樣式表。這種方法與鏈接相似。導(dǎo)入樣式表的語法是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL，最后以分號結(jié)束，如下所示：@importurl(corerules.css);@import指令必須在<style>標簽中使用，而且必須在樣式表中所有其他類型的規(guī)則之前使用。在實踐中，我們會在一個<style>標簽中看到導(dǎo)入的和嵌入的樣式混合在一起。第19頁導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)第20頁link與@import的區(qū)別link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持使用Javascript控制DOM去改變樣式；而@import不支持。第20頁link與@import的區(qū)別link是XHTML標第21頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級6.4本章小結(jié) 6.5思考和練習(xí)第21頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS 6.3CSS繼承和優(yōu)先級繼承即子類元素繼承父類的樣式，CSS中的繼承相對簡單，但也容易讓人混淆。CSS規(guī)則應(yīng)用在標記中，而應(yīng)用于特定元素的不同樣式值可以是從它的父級元素，甚至更遠的元素繼承而來。大多數(shù)元素可從其父元素那里繼承樣式屬性，但是有一些樣式屬性(例如邊框)卻不可以。第22頁6.3CSS繼承和優(yōu)先級繼承即子類元素繼承父類的樣式，C!important指示符如果一個特定的規(guī)則不希望被其他規(guī)則覆蓋，那么可以使用!important指示符。對于不會被忽略的規(guī)則，則在規(guī)則的分號前面插入!important指示符。例如，下面的樣式規(guī)則將設(shè)置所有的段落文本為紅色：p{color:red!important;font-size:12px;}這樣，即使有一個如下所示的內(nèi)聯(lián)樣式的段落：<pstyle="color:green;font-size:24px;">帶內(nèi)聯(lián)樣式的段落</p>因為上面的規(guī)則使用了!important指示符，所以color屬性不能被內(nèi)聯(lián)樣式覆蓋，文本顏色依然會是紅色的，而字號會被覆蓋，變?yōu)?4px。第23頁!important指示符如果一個特定的規(guī)則不希望被其他規(guī)則!important指示符當(dāng)使用!important指示符時，要確認把它放在樣式規(guī)則的最后；否則就會被忽略。

雖然!important指示符可以讓樣式不被覆蓋，讓復(fù)雜的繼承變得簡單清晰，但并不鼓勵初學(xué)者使用!important指示符覆蓋，因為CSS會根據(jù)層疊和權(quán)重產(chǎn)生正常的作用順序，使用了!important就擾亂了原本的順序，讓更多的權(quán)重給了正常情況下本不應(yīng)該獲得這么多權(quán)重的樣式。如果你從不使用!important，那么這標志著你真正理解了CSS，并且證明你在編寫代碼前經(jīng)過深思熟慮。第24頁!important指示符當(dāng)使用!important指示符時CSS優(yōu)先級層疊的基本思想是為應(yīng)用于文檔的包含多個樣式表的規(guī)則的系統(tǒng)進行整理。當(dāng)這些疊加的樣式之間有沖突時，就要根據(jù)樣式的優(yōu)先級進行選擇。前面已經(jīng)介紹過，內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表的優(yōu)先級如下：內(nèi)聯(lián)樣式>內(nèi)部樣式表>外部樣式表同一個樣式表中定義的樣式，使用不同的選擇器也可能存在疊加，從選擇器的角度，當(dāng)某個元素同時應(yīng)用標簽選擇器、ID選擇器、類選擇器定義的樣式時，將按照下面的優(yōu)先級進行處理：ID選擇器>類選擇器>標簽選擇器第25頁CSS優(yōu)先級層疊的基本思想是為應(yīng)用于文檔的包含多個樣式表的規(guī)第26頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級6.4本章小結(jié)

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

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級6.4本章小結(jié)

6.5思考和練習(xí)第28頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS 第29頁6.5思考和練習(xí)1.CSS的全稱是

(CascadingStyleSheets)，它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。2.CSS3語言在朝著模塊化方向發(fā)展。這些模塊包括：盒子模型、

、超鏈接方式、語言模塊、

、

、多欄布局等。3.簡述使用業(yè)CSS的好處。4.在HTML中使用CSS的方法有幾種？5.CSS選擇器的優(yōu)先級是什么樣的？6.!important指示符的作用是什么？如何使用該指示符？第29頁6.5思考和練習(xí)1.CSS的全稱是第30頁第6章CSS概述本章概述本章的學(xué)習(xí)目標主要內(nèi)容第1頁第6章CSS概述本章概述第31頁本章概述目前流行的，符合Web標準的網(wǎng)頁設(shè)計模式是將頁面內(nèi)容和外觀樣式分離，前面5章我們學(xué)習(xí)了用HTML來創(chuàng)建網(wǎng)頁，在網(wǎng)頁中添加各類元素，從本章開始，我們將學(xué)習(xí)如何使用CSS為網(wǎng)頁元素定義外觀樣式，美化頁面，將網(wǎng)頁裝扮的更漂亮，具有獨特的風(fēng)格和個性。第2頁本章概述目前流行的，符合Web標準的網(wǎng)頁設(shè)計模式是將頁第32頁本章的學(xué)習(xí)目標理解CSS的基本概念了解CSS的發(fā)展歷史理解使用CSS的好處掌握在HTML這使用CSS的幾種方法理解CSS中的繼承了解!important的用法掌握CSS的優(yōu)先級第3頁本章的學(xué)習(xí)目標理解CSS的基本概念第33頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS6.2在HTML中使用CSS6.3CSS繼承和優(yōu)先級6.4本章小結(jié) 6.5思考和練習(xí)第4頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS第34頁6.1為什么要在網(wǎng)頁中加入CSSCSS的全稱是層疊樣式表(CascadingStyleSheets)，它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化

CSS能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。第5頁6.1為什么要在網(wǎng)頁中加入CSSCSS的全稱是層疊樣式第35頁CSS產(chǎn)生的原因HTML的設(shè)計初衷并不是為了描述外觀，HTML本身也并不善于此道。在使用HTML描述Web頁面的外觀時，需要使用大量的標記，而且常常要使用許多復(fù)雜堆?；蚯短妆?。頁面的布局工作涉及隱藏的像素圖像、專有元素與屬性、圖像中的文本和其他隱秘的復(fù)雜方式，這些都需要提供高質(zhì)量、高可靠度的HTML標記代碼，這簡直就是一場噩夢。因此，人們將表示網(wǎng)頁外觀的功能標記或?qū)傩苑蛛x出來，這就形成了表示網(wǎng)頁外觀的替代方法——CSS。第6頁CSS產(chǎn)生的原因HTML的設(shè)計初衷并不是為了描述外觀，第36頁CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時就存在了。從1994年第一次提出CSS觀點至今，已經(jīng)有了3個主要版本。但隨著HTML的成長，為了滿足設(shè)計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加，用來定義樣式的語言越來越?jīng)]有意義了。1994年哈坤·利(HakunLee)提出了CSS的最初建議。第7頁CSS的發(fā)展歷史層疊樣式表在Web受到大家的關(guān)注時就存第37頁CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布。CSS1的大部分特征在Web瀏覽器中都獲得支持，但是一些不常用的功能(例如空白處理、字母間隔、顯示等)存在一些問題。CSS自從第一版發(fā)布之后，又在1998年5月發(fā)布了第二版，CSS得到了豐富。CSS2.0是一套全新的樣式表結(jié)構(gòu)，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內(nèi)容和表現(xiàn)效果分離的方式，HTML元素可以通過CSS2.0的樣式控制顯示效果第8頁CSS的發(fā)展歷史1996年12月CSS的第一版本被發(fā)布第38頁CSS的發(fā)展歷史CSS2.0提供了一個機制，讓程序員開發(fā)時可以不考慮顯示和界面，就可以制作表單，顯示問題可由美工或程序員到后期再編寫相應(yīng)的CSS2.0樣式來解決。不過，由于沒有很好的CSS2.0編輯軟件，所以無法做到所見即所得，編寫起來不易。CSS3在CSS2的基礎(chǔ)上，結(jié)合業(yè)務(wù)發(fā)展需求，以及過去瀏覽者操作習(xí)慣和開發(fā)者習(xí)慣，做了大幅改進。第9頁CSS的發(fā)展歷史CSS2.0提供了一個機制，讓程序員第39頁使用CSS的好處(1)大大縮減頁面代碼，提高頁面瀏覽速度，縮減帶寬成本。(2)結(jié)構(gòu)清晰。容易被搜索引擎搜索到。用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標記，搜索引擎將更有效地搜索到內(nèi)容。(3)縮短改版時間。只要簡單地修改幾個CSS文件就可以重新設(shè)計一個有成百上千頁面的站點。(4)強大的字體控制和排版能力。使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。(5)提高易用性。使用CSS可以結(jié)構(gòu)化HTML，如<p>標記只用來控制段落，<table>標記只用來表現(xiàn)表格式數(shù)據(jù)等。(6)表現(xiàn)和內(nèi)容相分離。將設(shè)計部分分離出來放在一個獨立樣式文件中(7)<table>布局靈活性不大，只能遵循<table>、<tr>、<td>的格式，而使用CSS+div可以有更多格式。(8)便于更新和維護。可以將站點中的所有頁面風(fēng)格都使用一個CSS文件進行控制，只要修改這個CSS文件，就可以更新所以頁面的風(fēng)格樣式。第10頁使用CSS的好處(1)大大縮減頁面代碼，提高頁面瀏第40頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級6.4本章小結(jié) 6.5思考和練習(xí)第11頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS 第41頁6.2在HTML中使用CSS在HTML網(wǎng)頁中使用CSS的方法有4種：第一，內(nèi)聯(lián)樣式，通過HTML元素的style屬性直接將樣式嵌入HTML標記中；第二，定義內(nèi)部樣式表，將表示樣式的style屬性的內(nèi)容，全部提到公共的樣式規(guī)則塊中，然后將其放在<style>元素中，這樣，整個HTML文件中都可以使用該樣式；第三，鏈接外部樣式文件，將樣式獨立成文件，供任何頁面調(diào)用；第四，導(dǎo)入外部樣式表，這種方法與鏈接相似，外部樣式表獨立成文件，但是導(dǎo)入樣式表是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL。有的書籍把第三和第四種方法算作一種，因為他們都是將樣式表獨立成為外部文件。第12頁6.2在HTML中使用CSS在HTML網(wǎng)頁中使用第42頁內(nèi)聯(lián)樣式如果只是簡單的隊某個元素單獨定義樣式，則可以使用內(nèi)聯(lián)樣式。例如，只希望針對某個特定的<h1>標簽設(shè)置樣式為字號為50、綠色的楷體字體。則可以使用<h1>標簽的style屬性。style是核心屬性，幾乎任何HTML元素都有該屬性。<h1style="font-size:50px;font-family:楷體;color:green;">內(nèi)聯(lián)樣式,50號綠色楷體</h1>第13頁內(nèi)聯(lián)樣式如果只是簡單的隊某個元素單獨定義樣式，則可以第43頁內(nèi)聯(lián)樣式style屬性的值是若干個CSS屬性名/值對。CSS規(guī)則要求屬性名的后面緊跟一個冒號，然后是屬性值。每一個樣式規(guī)則以分號結(jié)束，最后一個樣式規(guī)則的結(jié)尾可以不加分號。格式如下：property-name1:value1;...property-nameN:valueN;第14頁內(nèi)聯(lián)樣式style屬性的值是若干個CSS屬性名/值對第44頁定義內(nèi)部樣式表為了避免CSS樣式和HTML標簽的關(guān)系過于緊密，可以采用另外一種更合適的方法來中添加樣式規(guī)則，那就是創(chuàng)建與一個特定元素或一組元素綁定的樣式規(guī)則，這樣可以重復(fù)使用樣式規(guī)則。第15頁定義內(nèi)部樣式表為了避免CSS樣式和HTML標簽的關(guān)系第45頁定義內(nèi)部樣式表當(dāng)CSS屬性名是多個單詞時，應(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名稱對大小寫是敏感的。為了安全起見，Web開發(fā)人員應(yīng)假定CSS規(guī)則的所有部分都區(qū)分大小寫。第16頁定義內(nèi)部樣式表當(dāng)CSS屬性名是多個單詞時，應(yīng)該用短橫第46頁<style>元素CSS樣式是通過<style>標記嵌入到頁面中的。<style>元素位于<head>元素內(nèi)，用于在網(wǎng)頁內(nèi)包含樣式表規(guī)則，而非鏈接某個外部文檔。有時，它還被用于需要在單一頁面中包含某些額外規(guī)則，而且這些規(guī)則不必應(yīng)用于網(wǎng)站內(nèi)共享同一樣式表的其他頁面的情況。第17頁<style>元素CSS樣式是通過<style>標記第47頁鏈接外部樣式文件在HTML頁面中，通過在文檔的head部分使用<link>元素，引用外部鏈接樣式文件。<link>元素用于在網(wǎng)頁中描述兩個文檔之間的關(guān)系。例如，可以在HTML頁面中使用其指定應(yīng)該用于設(shè)置該頁面風(fēng)格的樣式表，也可以為對應(yīng)頁面指定一個RSS訂閱。<link>元素永遠是空元素，而且當(dāng)與樣式表一同使用時，它必須帶有兩個屬性：rel和href。

<linkhref="mystyle.css"rel="stylesheet"type="text/css">第18頁鏈接外部樣式文件在HTML頁面中，通過在文檔的he第48頁導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)入外部樣式表。這種方法與鏈接相似。導(dǎo)入樣式表的語法是使用@import，然后后面跟隨關(guān)鍵字url和引入的樣式表的URL，最后以分號結(jié)束，如下所示：@importurl(corerules.css);@import指令必須在<style>標簽中使用，而且必須在樣式表中所有其他類型的規(guī)則之前使用。在實踐中，我們會在一個<style>標簽中看到導(dǎo)入的和嵌入的樣式混合在一起。第19頁導(dǎo)入外部樣式表另外一種使用文檔范圍樣式規(guī)則的方法是導(dǎo)第49頁link與@import的區(qū)別link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持使用Javascript控制DOM去改變樣式；而@import不支持。第20頁link與@import的區(qū)別link是XHTML標第50頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS

6.2在HTML中使用CSS

6.3CSS繼承和優(yōu)先級6.4本章小結(jié) 6.5思考和練習(xí)第21頁主要內(nèi)容6.1為什么要在網(wǎng)頁中加入CSS 6.3CSS繼承和優(yōu)先級繼承即子類元素繼承父類的樣式，CSS中的繼承相對簡單，但也容易讓人混淆。CSS規(guī)則應(yīng)用在標記中，而應(yīng)用于特定元素的不同樣式值可以是從它的父級元素，甚至更遠的元素繼承而來。大多數(shù)元素可從其父元素那里繼承樣式屬性，但是有一些樣式屬性(例如邊框)卻不可以。第51頁6.3CSS繼承和優(yōu)先級繼承即子類元素繼承父類的樣式，C!important指示符如果一個特定的規(guī)則不希望被其他規(guī)則覆蓋，那么可以使用!important指示符。對于不會被忽略的規(guī)則，則在規(guī)則的分號前面插入!important指示符。例如，下面的樣式規(guī)則將設(shè)置所有的段落文本為紅色：p{color:red!important;font-size:12px;}這樣，即使有一個如下所示的內(nèi)聯(lián)樣式的段落：<pstyle="color:green;font-size:24px;">帶內(nèi)聯(lián)樣式的段落</p>因為上面的規(guī)則使用了!important指示符，所以color屬性不能被內(nèi)聯(lián)樣式覆蓋，文本顏色依然會是紅色的，而字號會被覆蓋，變?yōu)?4px。第52頁!important指示符如果一個特定的規(guī)則不希望被其他規(guī)則!important指示符當(dāng)使用!important指示符時，要確認把它放在樣式規(guī)則的最后；否則就會被忽略。

雖然!important指示符可以讓樣式不被覆蓋，讓復(fù)雜的繼承變得簡單清晰，但并不鼓勵初學(xué)者使用!important指示符覆蓋，因為CSS會根據(jù)層疊和權(quán)重產(chǎn)生正常

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論