【文章內(nèi)容簡介】 ，它可以是一個或多個 HTML 標(biāo)記（各標(biāo)記之間以逗號分開）； (2)規(guī)則表是 由一個或多個樣式屬性組成的樣式規(guī)則，各個樣式屬性之間用分號隔開，每個樣式屬性的定義格式為： 樣式名：值 樣式定義中可以加入注解，格式為： /*字符串 */ 在 HTML 文件中，樣式引用的方式主要有以下 4 種方式： (1)鏈接到外部樣式表 如果多個 HTML 文件要共享樣式表（這些頁面的顯示特性相同或相近），則可將樣式表定義為一個獨立的 CSS 樣式文件，使用該樣式表的 HTML 文件在頭部用 link標(biāo)記鏈接到這個 CSS 樣式文件即可。需要注意的是， CSS 樣式文件不包含 style標(biāo)記， 因為它是 HTML 標(biāo)記，而不是 CSS 樣式。 在 HTML 文件頭部使用多個 link標(biāo)記就可以鏈接到多個外部樣式表。link標(biāo)記的屬性主要有 REL、 HREF、 TYPE、 MEDIA。 REL 屬性定義鏈接的文件和 HTML 文檔之間的關(guān)系通常取值為 stylesheet。 HREF 屬性指出 CSS 樣式文件。 TYPE 屬性指出樣式的類別，通常取值為 text/css。 MEDIA 屬性指定接收樣式表的顯示終端，默認(rèn)值為 screen（顯示器），還可以是 print（打印機）、 projection（投影機）等。 (2)引入外部樣式表 這種 方式在 HTML 文件的頭部 style、 /style標(biāo)記之間，利用 CSS 的@import 聲明引入外部樣式表。格式為： style @import URL(“外部樣式文件名 ”)； ?? /style 引入外部樣式表方式（簡稱引入方式）與鏈接到外部樣式表（簡稱鏈接方式）很相似，都是將樣式定義單獨保存為文件，在需要使用的 HTML 文件中進行說明。兩者的區(qū)別在于：引入方式在瀏覽器下載 HTML 文件時就將樣式文件的全 16 部內(nèi)容復(fù)制到 @import 關(guān)鍵字所在位置，以替換該關(guān)鍵字；而連接方式在瀏覽器下載 HTML 文件時并不進行替換，而是僅僅在 HTML 文件體部需要引用 CSS 樣式文件的某個樣式時，瀏覽器才鏈接樣式文件，讀取需要的內(nèi)容。 (3)嵌入樣式表 這種方式利用 style標(biāo)記將樣式表嵌入 HTML 文件的頭部。嵌入樣式表的作用范圍是本 HTML 文件。 (4)內(nèi)聯(lián)樣式 這種方式是在 HTML 標(biāo)記中引用樣式定義，方法是將標(biāo)記的 style 屬性值賦為所定義的樣式規(guī)則。由于樣式是在標(biāo)記內(nèi)部使用的，故稱為“內(nèi)聯(lián)樣式”。例如： h1 style=”fontfamily:’隸書 ’,’宋體 ’。color:ff8800”這是一個 CSS 示例！ h1 相關(guān)標(biāo)記和屬性 隨著 CSS 的出現(xiàn)，有幾個新的 HTML 標(biāo)記和屬性被增加到 HTML 語言中，以使樣式表與 HTML 文件更好的組合起來，它們是：類選擇符和 class 屬性、id 選擇符和 id 屬性、上下文選擇符、偽類、 span 標(biāo)記和 div 標(biāo)記。 1. 類選擇符和 class 屬性 在樣式引用的 4 種方式中，除了內(nèi)聯(lián)方式外，其他三種方式下，樣式表中的樣式定義在整個頁面范圍內(nèi)都是有效的。但有時在頁面中可能不希望同一種標(biāo)記都遵循同 一種樣式，或者希望不同的標(biāo)記能夠遵循相同的樣式。利用類選擇符和標(biāo)記的 class 屬性就能做到這兩點。方法是：在 style標(biāo)記中定義類選擇符，在體部標(biāo)記中將標(biāo)記的 class 屬性值設(shè)置為類名。 2. id 選擇符和 id 屬性 id 選擇符（ ID Selector）定義一個元素特有的樣式。它與類選擇符的區(qū)別在于， id 選擇符在一個 HTML 文件中只能引用一次，但是類選擇符可以多次引用。id 選擇符的定義格式為： id 名 {規(guī)則 1；規(guī)則 2； … }。要引用 id 選擇符定義的樣式，需要在體部標(biāo)記中將該 id 屬性值設(shè)置為 id 名。 當(dāng)一個樣式只 需要在任何文檔中應(yīng)用一次時，使用 id 選擇符是很合適的。前面已經(jīng)提到過的內(nèi)聯(lián)樣式也適用于此場合。兩者相比，適用 id 選擇符更好些，因為它可以將樣式定義和引用分開，并且可以應(yīng)用于多個 HTML 文件。 3. 上下文選擇符 17 上下文選擇符（ Contextual Selector）定義嵌套標(biāo)記的樣式。例如： h2 em{color： darkred} 指明 HTML 文件中出現(xiàn)嵌套標(biāo)記 h2… em… /em… /h2之處將引用該樣式 。 4. 偽類 偽類是特殊的類，可區(qū)別標(biāo)記的不同狀態(tài)，能自動的被支持 CSS 的瀏覽器所識別 。偽類定義格式為： 選擇符：偽類 { 屬性：值 } 偽類不用 HTML 語言的 class 屬性來指定。偽類的一個最常見的應(yīng)用是指定超鏈接（ a）以不同的方式顯示鏈接（ links）、已訪問鏈接（ visited links）和可激活鏈接（ active links）。 5. span 標(biāo)記 span標(biāo)記是隨 CSS 的產(chǎn)生而被新加入到 HTML 語言中的，增加該標(biāo)記的目的是允許我們給出樣式而不必將樣式附加在一個 HTML 的原有標(biāo)記（稱為結(jié)構(gòu)元素）上。它的存在純粹是為了應(yīng)用樣式，所以當(dāng)樣式表失效時它就沒有任何作 用了。 span標(biāo)記可以帶有 class、 id、 style 等于 CSS 樣式有關(guān)的屬性。 6. div 標(biāo)記 div是一個塊級元素。 div和 /div之間可以包含段落、標(biāo)題、表格等其他塊級元素。 div將其中包含的內(nèi)容形成一個獨立的段落。 div在 中只有屬性 align， 新增加了 class、 id、 style 屬性。 div與 span的功能基本相同區(qū)別在于 div是塊級元素，而 span是行元素；另外， div可以包含 span，反之則不行。 CSS1 屬性可以分 為字體屬性。顏色及背景屬性。文本屬性、方框?qū)傩?、分類屬性和定位屬性幾個部分。以下將簡單簡單介紹字體屬性、顏色即 =及背景屬性的概況。 字體屬性包括字體（ fontfamily）、字號（ fontsize）、字體風(fēng)格（ fontstyle）、字體加粗（ fontweight）、字體變化（ fontvariant）及字體綜合設(shè)置（ font）等屬性。字體屬性的含義明確，使用簡單。 18 2．顏色及背景屬性 顏色屬性允許設(shè)計者指定頁面元素的顏色，背景屬性是指定頁面的背景顏色或者背景圖像的屬性。顏色和背景屬性包 括（前景）顏色（ color）、背景顏色（ backgroundcolor ）、 背 景 圖 像 （ backgroundimage ）、 背 景 重 復(fù)（ backgroundrepeat）、背景附屬方式（ backgroundattachment）、背景圖像位置（ backgroundposition）以及背景屬性（ background）。 5 jQuery 開發(fā) jQuery 概述 認(rèn)識 jQuery jQuery 是由美國人 John Resig 于 2021 年創(chuàng)建的一個開源項目，隨著人們的熟知， 越來越多的程序高手加入其中，完善并壯大其項目內(nèi)容，如今已發(fā)展成為集 JavaScript、 CSS、 DOM、 Ajax 于一體的強大的框架體系。它的主旨是：以更少的代碼，實現(xiàn)更多的功能（ Write less， do more）。 jQuery 是一個類庫，和 prototype， mootools 等類庫一樣為 Web 的 JavaScript開發(fā)提供輔助功能。之所以選擇 jQuery 是因為在 Web 開發(fā)中使用 JavaScript時，絕大多數(shù)時間都是采用 getElementByld 在文檔中找到 DOM 元素，然后取值或設(shè)定值，采用 innerHTML 取其內(nèi)容或設(shè)定其內(nèi)容，或進行事件的監(jiān)聽（如 click） ,在控制樣式方面，會進行 height、 weight。 display 等的改變，達(dá)到視覺的效果，對于 AJAX 方面，也是取到數(shù)據(jù)在頁面的某元素里面去添充內(nèi)容?？傊窃趯?DOM 元素進行操作。這個元素 可能是一個或者是多個。 19 Prototype 可以說是開創(chuàng)了 Js類庫的先河，給我們耳目一新的感覺。它解決大部分的瀏覽器的兼容問題。同時簡化了原始函數(shù)名長難于記憶的經(jīng)常書寫出錯的問題，提供了 AJAX 的訪問方式。 但是這些還是不能滿足開發(fā)的需要，比如在 DOM 樹中尋找 DOM 元素，僅僅只能是通過元素的 ID，但是我們想要更方便的查找方法，同時還希望能有一個統(tǒng)一的入口，不要太泛，學(xué)習(xí)曲線過高或難于使用。 jQuery 就是從這里出發(fā)，把所有一切都統(tǒng)一在jQuery 對象中。使用 jQuery 就是使用 jQuery 對象。其實 jQuery 開創(chuàng)性的工作就是如其名一樣： query。它強大的查找功能令所有的框架都黯然失色。jQuery 實質(zhì)就是一個查詢器。在查詢器的基礎(chǔ)還提供對查找到的元素進行操作的功能。 AJAX 是 的基石，現(xiàn)在網(wǎng)上流行幾種開源的 AJAX 框架，如jQuery， Mootools， Dojo， Ext JS 等等，在不同的情況下需要使用不同的框架： 從輕量級選擇：主要是 mootools 和 jquery,由于它們的設(shè)計思想不同，jquery 是追求簡潔和高效， mootools 除了追求這些目標(biāo)外，其核心在于面向?qū)ο?，所?jquery 更適合快速開發(fā)， mootools 適合稍大型和復(fù)雜的項目， 其中需要面向?qū)ο蟮闹С?；另外，?Ajax 的支持上， jQuery 稍強一些；在 Comet 的支持上， jQuery 有相關(guān)的插件， Mootools 目前沒有，但是 Comet 的核心在于服務(wù)器的支持，瀏覽器端的接口很簡單， 開發(fā)相關(guān)的插件很簡單。 jQuery 有以下基本功能： DOM 元素 使用 jQuery 庫，可以很方便的獲取和修改頁面中的某元素，無論是刪除、移動還是復(fù)制某元素， jQuery 都提供了一整套的方便?？旖莸姆椒?，既減少了代碼的編寫，有大大提高了用戶對頁面的體驗度。 2. 控制頁面樣式 通過引入 jQuery，程序開發(fā)人員可以很便捷的控制頁面的 CSS 文件。瀏覽器對頁面文件的兼容行，一直以來都是頁面開發(fā)者最為頭疼的事，而使用 jQuery操作頁面的樣式卻可以很好的兼容各種瀏覽器。 3. 對頁面事件的處理 引入 jQuery 庫后，可以使頁面表現(xiàn)層和功能開發(fā)分離開，開發(fā)者更多的關(guān)注于程序的邏輯與功效；頁面設(shè)計者側(cè)重于頁面的優(yōu)化與用戶體驗。然后，通過 20 事件綁定機制，可以很輕松的實現(xiàn)二者的結(jié)合。 4. 大量插件在頁面中的運用 在引入 jQuery 庫后，還可以使用大量的插件來完善頁面的功能和效果，這些插件的使用極大地豐富了頁面的展示效果，使原來使用 JavaScript 代碼遙不可及的功能通過插件的引入而輕松的實現(xiàn)。 5. 與 Ajax 技術(shù)的完美結(jié)合 Ajax 的異步讀取服務(wù)器數(shù)據(jù)的方法，極大地方便了程序的開發(fā)，加深了用戶的頁面體 驗度；而引入 jQuery 庫后，不盡完善了原有功能，還減少了代碼的編寫，通過其內(nèi)部對象或者函數(shù)，加上幾行代碼就可以實現(xiàn)復(fù)雜的功能。 搭建 jQuery 開發(fā)環(huán)境 在 jQuery 的官方網(wǎng)站（ ）中，下載 jQuery 文件庫。下載好jQuery 框架文件后，并不需要任何安裝，僅需要使用 script文件導(dǎo)入標(biāo)記，將jQuery 框架文件導(dǎo)入頁面即可。假設(shè)該文件下載后保存在項目文件夾 Jscript 中，那么，在頁面的 head/head中加入如下代碼： 需要注意的是， src 后面的代碼中寫的是 jQuery 框架文件的路徑，其中 是 jQuery 框架文件的版本號。 jQuery 程序的代碼風(fēng)格 1.“ $”美元符的使用 在 jQuery 程序中，使用最多的就是“ $”美元符了，無論是頁面元素的選擇、功能函數(shù)的前綴，都必須使用該符號，可以說它是 jQuery程序的標(biāo)志。 2. 事件操作鏈接式書寫 在編寫頁面某元素事件時， jQuery 程序可以使用鏈接式的方式編寫該元素的所有事件。 jQuery 事件操作鏈接式書寫的功能描述：在頁面中，有一個 div標(biāo)記，在該標(biāo)記內(nèi)，包含二個 div標(biāo)記，一個為主題，另一個為內(nèi)容，頁面首次加載時，被包含的內(nèi)容 div標(biāo)記是不可見的，當(dāng)用戶單擊主題 div標(biāo)記時，改變自身的背景顏色，并將內(nèi)容 div標(biāo)記顯示出來。 21 jQuery 的動畫與特效 如何能最大化的優(yōu)化頁面的用戶體驗度，是每個前端頁面開發(fā)人員在設(shè)計頁面時需要考 慮的一個重要問題。無可置疑， jQuery 中眾多的動畫與特效方法為提高頁面的用戶體驗度帶來了極大的方便，通過少量的幾行代碼，就可以實現(xiàn)元素的飛動、淡入淡出等動畫效果，還可以自定義各種動畫效果。 jQuery 的基本動畫與特效有：顯示與隱藏、滑動、淡入淡出、自定義動畫、動畫效果綜述等。 顯示與隱藏 在頁面中，元素的顯示與隱藏是使用最頻繁的操作，在傳統(tǒng)的 Ja