在網(wǎng)頁(yè)中使用css樣式(已修改)
2025-01-27 02:15 本頁(yè)面
【正文】 第十章在網(wǎng)頁(yè)中使用CSS樣式CSS 即 Cascading Style Sheets，稱為層疊樣式表，又稱級(jí)聯(lián)樣式表。CSS技術(shù)是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它通過(guò)設(shè)置CSS屬性使網(wǎng)頁(yè)元素獲得各種不同的效果。它擴(kuò)展了HTML的功能，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效的方式設(shè)計(jì)網(wǎng)頁(yè)屬性。本章介紹CSS技術(shù)的概念和應(yīng)用。通過(guò)本章的學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：CSS樣式的分類(lèi)及應(yīng)用方式使用CSS樣式表面板建立CSS樣式表自定義CSS樣式鏈接外部CSS樣式復(fù)制CSS樣式和導(dǎo)出CSS樣式 CSS樣式的分類(lèi)及應(yīng)用方式 CSS樣式表概述使用CSS定義的網(wǎng)頁(yè)風(fēng)格可以控制HTML語(yǔ)言標(biāo)志的一些諸如字體、邊框、顏色、背景等屬性，也可以通過(guò)定義外部風(fēng)格文件實(shí)現(xiàn)整個(gè)網(wǎng)站頁(yè)面風(fēng)格的統(tǒng)一。CSS不僅能定義文字格式，還可以為文字創(chuàng)造出豐富多彩的圖形效果。使用文字加樣式表來(lái)代替部分圖形，以減少網(wǎng)頁(yè)文件的字節(jié)數(shù)，提高網(wǎng)頁(yè)的瀏覽速度，從而提高了網(wǎng)站的競(jìng)爭(zhēng)力。使用CSS的濾鏡功能，還可以直接對(duì)圖形添加特效，就像圖形處理軟件一樣，使網(wǎng)頁(yè)更加絢麗。CSS樣式為一組樣式，它的屬性在HTML標(biāo)簽中依次出現(xiàn)，并不顯示在瀏覽器中。CSS樣式可以定義在HUE文檔的標(biāo)記里，也可以在外部附加文檔中作為外加文件。此外，一個(gè)樣式表可以作用多個(gè)頁(yè)面，乃至整個(gè)站點(diǎn)，因此具有更好的易用性和擴(kuò)展性。使用CSS技術(shù)除了可以在單獨(dú)網(wǎng)頁(yè)中應(yīng)用一致的格式以外，對(duì)于大網(wǎng)站的格式設(shè)置和維護(hù)更具有重要意義。將CSS樣式定義到樣式表文件中，然后在多個(gè)網(wǎng)頁(yè)中同時(shí)應(yīng)用該樣式表中的樣式，就能確保多個(gè)網(wǎng)頁(yè)具有一致的格式，并且能夠隨時(shí)更新(只要更改樣式表文件就可以使所有網(wǎng)頁(yè)自動(dòng)更新)，從而大大降低了網(wǎng)站的開(kāi)發(fā)和維護(hù)工作量。由于CSS具有以上這些優(yōu)點(diǎn)，它已經(jīng)成為一種應(yīng)用非常廣泛的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，甚至可以說(shuō)，如果不懂CSS技術(shù)就很難設(shè)計(jì)出專業(yè)化的網(wǎng)站。 CSS樣式的分類(lèi)Dreamweaver MX可以定義幾種不同類(lèi)型的CSS樣式，并且可以使用不同的方法將其應(yīng)用在網(wǎng)頁(yè)文檔中。通常有以下3種CSS樣式。(1)創(chuàng)建自定義樣式(Custom CSS styles)：自定義CSS樣式可以應(yīng)用于任何文本。若將自定義樣式應(yīng)用于整段文本，則會(huì)在該段文本的源代碼中加入CLASS屬性，例如PCLASS=“testStyle”；若將自定義樣式應(yīng)用于一行文本，則在選擇的文本源代碼的兩邊插入包含了CLASS屬性的SPAN標(biāo)記。(2)重定義HTML標(biāo)簽(HTML tag styles)：HTML標(biāo)簽樣式為HTML標(biāo)識(shí)符重新定義格式化，如H3。當(dāng)重新定義格式化H3后，所有H3應(yīng)用標(biāo)識(shí)符的文本都會(huì)改變而應(yīng)用新的樣式。(3)使用CSS選擇器(CSS selector styles)：CSS選擇器樣式重新定義了特殊的標(biāo)記組以及包含特殊序列號(hào)(ID)屬性標(biāo)記。如TDH3這樣的標(biāo)記組合表示在表格單元格中的文本應(yīng)用二級(jí)標(biāo)題；而testStyle應(yīng)用于所有包含屬性值ID=“testStyle”的標(biāo)記中。 CSS樣式的應(yīng)用方式使用CSS的樣式有以下幾種方式。(1)局部套用：使用CSS語(yǔ)法定義HTML標(biāo)簽，這種方式應(yīng)用的CSS樣式只能影響該HTML標(biāo)簽。(2)內(nèi)聯(lián)式：將CSS語(yǔ)法寫(xiě)在文檔頭部的STYLE和/STYLE標(biāo)簽中，這種方式應(yīng)用的CSS樣式將影響整個(gè)頁(yè)面。(3)外聯(lián)式：，而在文檔中不會(huì)出現(xiàn)CSS語(yǔ)法。 CSS樣式的沖突在同一個(gè)文本中應(yīng)用兩種或兩種以上的CSS樣式，這些樣式會(huì)相互沖突產(chǎn)生不可預(yù)料的效果。瀏覽器根據(jù)以下規(guī)則顯示樣式屬性。(1)如果在同一個(gè)文本中應(yīng)用兩種CSS樣式，瀏覽器顯示出兩種樣式中除沖突的屬性之外的所有屬性。(2)如果在同一個(gè)文本中應(yīng)用兩種CSS樣式相互沖突，瀏覽器顯示出最里面的樣式屬性。(3)如果存在直接沖突，自定義CSS樣式的屬性(應(yīng)用CLASS屬性的樣式)將覆蓋HTML標(biāo)記樣式的屬性。 使用CSS樣式表面板使用CSS樣式設(shè)置面板可以創(chuàng)建和管理CSS樣式。通過(guò)下面的操作方法可以啟用CSS樣式表面板。執(zhí)行主菜單中的“窗口”→“CSS樣式”命令。在網(wǎng)頁(yè)文檔窗口的右側(cè)，單擊“設(shè)計(jì)”浮動(dòng)面板的下拉三角形按鈕。按組合鍵Shift+F11鍵。以上3種方法之一都可以打開(kāi)CSS樣式表面板，默認(rèn)為“應(yīng)用樣式”視圖，還可以切換到“編輯樣式”視圖，如圖101所示。 圖101 CSS樣式表面板在CSS樣式面板中可以進(jìn)行下面的操作。(1)在列表中顯示當(dāng)前網(wǎng)頁(yè)文檔中的CSS樣式。(2)單擊該面板底部工具欄上的“附加樣式表”按鈕，將打開(kāi)“鏈接外部樣式表”對(duì)話框，鏈接或?qū)胪獠康腃SS樣式表。(3)單擊該面板底部工具欄上的“新建CSS樣式”按鈕，將打開(kāi)“新建CSS樣式”對(duì)話框，設(shè)置新建CSS樣式表的類(lèi)型。(
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1