商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第12課 CSS基礎(chǔ)知識(shí)_第1頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第12課 CSS基礎(chǔ)知識(shí)_第2頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第12課 CSS基礎(chǔ)知識(shí)_第3頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第12課 CSS基礎(chǔ)知識(shí)_第4頁
商務(wù)網(wǎng)頁設(shè)計(jì)與制作（第2版）課件 第12課 CSS基礎(chǔ)知識(shí)_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第4章 CSS網(wǎng)頁式樣制作技術(shù)4.1CSS基礎(chǔ)知識(shí)4.1.1CSS的作用4.1.2CSS代碼的構(gòu)成規(guī)則4.1.3CSS選擇符類型及使用方法4.1CSS基礎(chǔ)知識(shí)CSS翻譯成中文是層疊樣式表或樣式表，這么說大家可能不太容易理解。其實(shí)，CSS就是顯示樣式，專門用來設(shè)置各類元素的顯示效果。我們把元素的顯示效果事先采用CSS技術(shù)封裝成一個(gè)樣式，在主HTML文檔中調(diào)用這個(gè)樣式，就能得到這個(gè)事先設(shè)定的顯示效果。4.1.1CSS的作用CSS是增強(qiáng)網(wǎng)頁顯示效果的超文本標(biāo)記語言，能夠起到代替和增強(qiáng)標(biāo)簽屬性的作用。CSS的突出特點(diǎn)是：簡潔、易用、高效，可以重復(fù)使用，也可以繼承使用。傳統(tǒng)HTML代碼在設(shè)置網(wǎng)頁時(shí)，如果一個(gè)網(wǎng)頁具有很多個(gè)<h4>標(biāo)簽及實(shí)例，要求統(tǒng)一設(shè)置為宋體、字號(hào)大小為16px（像素）、藍(lán)色、加粗，則必須對(duì)每一個(gè)<h4>標(biāo)簽的相關(guān)屬性做出同樣的設(shè)置，工作煩瑣效率低，代碼的可讀性差。如果使用CSS樣式表，就只需要設(shè)定一次就好了。而且還能在本網(wǎng)站的其他網(wǎng)頁中引用，大大提高了工作效率，代碼的可讀性也好。如果需要將字體顏色改為綠色、字號(hào)大小改為12px，則修改一次CSS規(guī)則即可，非常高效。第4章CSS網(wǎng)頁式樣制作技術(shù)<html><head><title>CSS示例</title><style>h4{font-family:宋體;color:#0000CC;font-size:18px}</style></head><body><h4>第一個(gè)標(biāo)題h4實(shí)例</h4><h4>第二個(gè)標(biāo)題h4實(shí)例</h4><h4>第三個(gè)標(biāo)題h4實(shí)例</h4><h4>第四個(gè)標(biāo)題h4實(shí)例</h4><h4>第五個(gè)標(biāo)題h4實(shí)例</h4></body></html>上例中，標(biāo)簽<style>與</style>中的內(nèi)容就是一個(gè)具體的CSS樣式表實(shí)例，描述了標(biāo)題4的顯示屬性。然后，在網(wǎng)頁文檔體中只需要正常引用標(biāo)題4標(biāo)簽<h4>即可，不必重復(fù)設(shè)置各個(gè)標(biāo)題4的顯示屬性。如果需要改變“標(biāo)題4”的外觀，例如把字號(hào)大小改為12px，字體顏色改為綠色，則只需要改動(dòng)CSS樣式表的相應(yīng)內(nèi)容即可。改動(dòng)部分如下：h4{font:"宋體";color:”green”;font-size:12px}4.1.2CSS的構(gòu)成規(guī)則CSS的樣式結(jié)構(gòu)比較簡單易懂，具有模塊化的特點(diǎn)，由“選擇符”和“聲明”兩部分組成.其中，選擇符是CSS樣式必須定義的，相當(dāng)于樣式的名稱。網(wǎng)頁元素就是通過這個(gè)選擇符來確定其顯示樣式的，選擇符將在本章4.1.4小節(jié)中詳細(xì)介紹。聲明就是具體的顯示規(guī)則，通過設(shè)定各個(gè)屬性值，達(dá)到需要的顯示效果。h4｛

font-family:"宋體"；

color:blue;font-size:16px；

｝為了養(yǎng)成良好的書寫習(xí)慣，便于閱讀，通常采用如下書寫方式來書寫CSS代碼：4.1.3CSS選擇符類型及使用方法標(biāo)簽選擇符、類選擇符、ID選擇符、全局選擇符、組合選擇符、繼承選擇符、偽類選擇符、字符串匹配的屬性選擇符等，其中前三者最為常用1．標(biāo)簽選擇符標(biāo)簽選擇符，就是把HTML的標(biāo)簽作為CSS的樣式來定義和描述。在HTML中使用該標(biāo)簽時(shí)，自動(dòng)跟蹤選擇該標(biāo)簽在CSS中定義的顯示樣式。每個(gè)HTML標(biāo)簽均可用作標(biāo)簽選擇符，如<h4>、<font>、<table>等都能作為標(biāo)簽選擇符。定義標(biāo)簽選擇符內(nèi)聯(lián)樣式，直接在標(biāo)簽內(nèi)進(jìn)行聲明，形式為：<標(biāo)簽style="屬性1:屬性1的值;屬性2:屬性2的值;……">內(nèi)部樣式、外部樣式，則需要在CSS代碼中，在被定義的標(biāo)簽選擇符后面用花括號(hào)“｛｝”將聲明括起來。形式為：標(biāo)簽選擇符｛屬性1:屬性1的值;屬性2:屬性2的值;……｝引用標(biāo)簽選擇符，不需要增加任何代碼，正常編寫HTML代碼即可。（1）外部導(dǎo)入樣式外部導(dǎo)入樣式與外部鏈接樣式的基本作用是相同的，CSS源文件的代碼規(guī)則也完全相同，只是引用CSS代碼文件的技術(shù)實(shí)現(xiàn)方式不同：一種是外部鏈接方式，一種是外部導(dǎo)入方式。但外部導(dǎo)入樣式也有其優(yōu)點(diǎn)，不僅可以導(dǎo)入到HTML中，也可以導(dǎo)入到CSS樣式中。外部導(dǎo)入樣式特別適用于對(duì)IO訪問要求高、網(wǎng)頁響應(yīng)速度快的場景。定義并引用外部導(dǎo)入樣式，需要使用“@import”來實(shí)現(xiàn)，導(dǎo)入到文件頭中的<style>與</style>之間。也可以理解為，把內(nèi)部樣式中的定義中的“選擇符”和“聲明”部分打包成CSS源文件，用導(dǎo)入的方法將其導(dǎo)回來。定義和引用外部導(dǎo)入樣式與定義和引用外部鏈接樣式類似，同樣分兩部分：一部分是在HTML文檔頭中做外部導(dǎo)入樣式的聲明；另一部分是在CSS源文件中定義選擇符及其聲明。在CSS中，屬性和屬性值必須符合CSS規(guī)范。如果聲明的屬性在CSS中沒有，或者某個(gè)屬性值不符合該屬性的要求，則該CSS語句不能生效。下面是典型的錯(cuò)誤語句：上例的錯(cuò)誤有兩處：第1行的屬性“head-height”是不存在的；第2行的“color”屬性的值“sky-blue”也是不存在的或超出范圍的。（2）類選擇符類選擇符是非常靈活的，是由用戶自己定義的。類選擇符相當(dāng)于自定義顯示樣式。類選擇符中描述的屬性及屬性值同樣必須符合CSS規(guī)范。例如：在一個(gè)網(wǎng)頁中，共有3個(gè)段落，我們希望每一個(gè)段落都有不同的顏色區(qū)分，以強(qiáng)調(diào)網(wǎng)頁的效果。這種情況下，就無法使用標(biāo)簽選擇符進(jìn)行處理，因?yàn)橹挥幸粋€(gè)段落標(biāo)簽<p>，無論定義多少次標(biāo)簽<p>的顯示樣式，都應(yīng)按照最后定義的顯示樣式執(zhí)行。所以無法采用<p>選擇符實(shí)現(xiàn)各個(gè)段落的不同顯示效果，這個(gè)時(shí)候就需要采用類選擇符來處理。類選擇符能夠在內(nèi)部樣式和外部樣式中使用，內(nèi)聯(lián)樣式無法使用類選擇符。定義類選擇符，需要使用“.類選擇符名”的方式來實(shí)現(xiàn)，定義方法為：.類選擇符名｛屬性1:屬性1的值;屬性2:屬性2的值;……｝引用類選擇符，需要使用class="類選擇符名"的方式實(shí)現(xiàn)引用，引用方法為：<標(biāo)簽class="類選擇符名">標(biāo)簽實(shí)例</標(biāo)簽><html><head><title>類選擇符示例</title><styletype="text/css"> /*type=“text/css”定義CSS的內(nèi)容為文本類型*/.red/*定義了名稱為“red”的類選擇符*/{color:#FF0000; /*紅色*/font-size:16px; /*文字大小*/}.green/*定義了名稱為“green”的類選擇符*/{color:#00FF00; /*綠色*/font-size:20px; /*文字大小*/}</style></head><body><pclass="red"><!--class=“red”表示使用了類選擇符“red”-->該段落選用red類選擇符后的顯示效果</p><pclass="green"><!--class=“green”表示使用了類選擇符“green”-->該段落選用green類選擇符后的顯示效果 </p><h3class="red"><!--對(duì)于同屬于文本類的標(biāo)題標(biāo)簽h3等均適用。標(biāo)題默認(rèn)為粗體字-->文檔標(biāo)題h3也可以選用red類選擇符</h3></body></html>很多時(shí)候標(biāo)簽選擇符和類選擇符是組合使用的，標(biāo)簽選擇符著重處理“某類標(biāo)簽統(tǒng)一風(fēng)格”方面的事情，而類選擇符在統(tǒng)一風(fēng)格的基礎(chǔ)上，處理個(gè)性化的事情。例如：一個(gè)網(wǎng)頁共分5個(gè)段落，統(tǒng)一要求藍(lán)色字、20px字號(hào)，但第三段因?yàn)閮?nèi)容重要，要求顯示為紅色字、25px字號(hào)大小。<html><head><title>類選擇符與標(biāo)簽選擇符</title><styletype="text/css">p{ /*定義段落標(biāo)簽p選擇符*/color:#0000FF;font-size:20px;}.red{ /*定義類選擇符red*/color:#FF0000; /*紅色*/font-size:25px; }</style></head><body><p>第一段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則</p><p>第二段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則</p><pclass="red">第三段使用red類選擇符的個(gè)性規(guī)則</p><p>第四段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則</p><p>第五段使用標(biāo)簽選擇符的統(tǒng)一規(guī)則</p></body></html>（3）ID選擇符ID選擇符的定義和使用方法跟類選擇符相似，但其只能在HTML中使用一次，因而更具針對(duì)性。ID選擇符同樣也只能在內(nèi)部樣式和外部樣式中使用。定義ID選擇符，需要使用“#”，定義方法為#ID選擇符名｛屬性1:屬性1的值;屬性2:屬性2的值;……｝引用ID選擇符，需要在標(biāo)簽中使用“id="ID選擇符名"”的形式實(shí)現(xiàn)，設(shè)置方法為<標(biāo)簽id="ID選擇符名">標(biāo)簽實(shí)例</標(biāo)簽>ID選擇符的優(yōu)點(diǎn)并不突出，但I(xiàn)D選擇符可以被JavaScript腳本引用。<html><head><title>ID選擇符示例</title><styletype="text/css"> /*type="text/css"定義CSS的內(nèi)容為文本類型*/#red/*定義了名稱為“red”的ID選擇符*/{color:#FF0000; /*紅色*/font-size:16px; /*文字大小*/}#green/*定義了名稱為“green”的ID選擇符*/{color:#00FF00; /*綠色*/font-size:20px; /*文字大小*/}</style></head><body><pid="red"><!—id="red"表示使用了ID選擇符“red”-->該段落選用ID選擇符red后的顯示效果

溫馨提示

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

評(píng)論

0/150

提交評(píng)論