網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例5知識(shí)點(diǎn)02：引入CSS樣式_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例5知識(shí)點(diǎn)02：引入CSS樣式_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例5知識(shí)點(diǎn)02：引入CSS樣式_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例5知識(shí)點(diǎn)02：引入CSS樣式_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例5知識(shí)點(diǎn)02：引入CSS樣式_第5頁(yè)
已閱讀5頁(yè)，還剩7頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

我們畢業(yè)啦其實(shí)是答辯的標(biāo)題地方引入CSS樣式要想使用CSS樣式修飾網(wǎng)頁(yè),我們具體應(yīng)該怎樣做呢?引入CSS樣式引入CSS樣式在HTML文檔中引入CSS樣式，主要提供了3種引入方式。行內(nèi)式行內(nèi)式也稱(chēng)為內(nèi)聯(lián)樣式，是指通過(guò)標(biāo)記的style屬性設(shè)置元素的樣式。其基本語(yǔ)法格式如下。<標(biāo)記style="屬性:屬性值;屬性:屬性值

；……">內(nèi)容</標(biāo)記>該格式中style是標(biāo)記的屬性，實(shí)際上任何HTML標(biāo)記都擁有style屬性。通過(guò)該屬性可以設(shè)置標(biāo)記的樣式。CSS屬性，不同于HTML標(biāo)記的屬性。屬性和屬性值書(shū)寫(xiě)時(shí)不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般采用小寫(xiě)的形式。屬性和屬性值之間用英文狀態(tài)下的冒號(hào)分隔，多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后一個(gè)屬性值后的分號(hào)可以省略。引入CSS樣式注意行內(nèi)式由于將表現(xiàn)和內(nèi)容混在一起，不符合Web標(biāo)準(zhǔn)，所以很少使用，一般只在需要臨時(shí)修改某個(gè)樣式規(guī)則時(shí)使用。行內(nèi)式例

5-1example01.html使用<h2>標(biāo)記的style屬性設(shè)置標(biāo)題文字的樣式，使標(biāo)題文字在瀏覽器中居中顯示，文字顏色為橙色。引入CSS樣式內(nèi)部樣式表內(nèi)部樣式表也叫內(nèi)嵌式，是指將所有CSS樣式代碼寫(xiě)在HTML文檔的頭部標(biāo)記<head>中，并且用<style>標(biāo)記定義。其語(yǔ)法格式如下。<head><styletype="text/css">

選擇器1{屬性：屬性值；屬性：屬性值；……}/*注釋內(nèi)容*/

選擇器2{屬性：屬性值；屬性：屬性值；……}……</style></head><style>標(biāo)記一般位于<head>標(biāo)記中的<title>標(biāo)記之后指定CSS樣式作用的HTML對(duì)象，有標(biāo)記選擇器、類(lèi)選擇器和ID選擇器等CSS的注釋符號(hào)，用于說(shuō)明該行代碼的作用，注釋內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上注意內(nèi)部樣式表只對(duì)其所在的HTML頁(yè)面有效。因此，網(wǎng)站只有一個(gè)頁(yè)面時(shí)，使用內(nèi)部樣式表；但如果有多個(gè)頁(yè)面，則應(yīng)使用外部樣式表。……<head><linkhref="外部樣式表文件路徑"rel="stylesheet"type="text/css"></head>……引入CSS樣式外部樣式表外部樣式表是指將所有的CSS樣式代碼放入一個(gè)以.css為擴(kuò)展名的外部樣式表文件中，再通過(guò)<link>標(biāo)記將外部樣式表文件鏈接到HTML文件。其語(yǔ)法格式如下。<link>標(biāo)記一般位于<head>標(biāo)記中的<title>標(biāo)記之后定義所鏈接的外部樣式表文件的URL定義被鏈接的文件是樣式表文件定義所鏈接文檔的類(lèi)型為text/css，即CSS文檔引入CSS樣式外部樣式表例

5-2將5.2節(jié)案例實(shí)現(xiàn)，定義CSS樣式使用外部樣式表。（1）創(chuàng)建HTML文檔，設(shè)置文件名為example02.html，輸入如下代碼。引入CSS樣式（2）創(chuàng)建外部樣式表文件。在項(xiàng)目project05中，選中“css”目錄，右擊，選擇“新建”|“css文件”命令，在“新建css文件”對(duì)話框中輸入文件名style.css，單擊“創(chuàng)建”按鈕，如圖所示。引入CSS樣式（3）打開(kāi)style.css文檔，在窗口中輸入如下CSS樣式表代碼?？梢钥闯?，style.css中的代碼，實(shí)際就是內(nèi)部樣式表中的代碼，只是此處輸入時(shí)一定不要再添加<style>標(biāo)記，直接輸入CSS樣式表代碼即可。引入CSS樣式（4）鏈接CSS外部樣式表。在example02.html文件中的<title>標(biāo)記后，添加<link>標(biāo)記，并將定義的類(lèi)樣式應(yīng)用到相應(yīng)元素上，代碼如下。鏈接外部樣式表的最大好處之一是同一個(gè)CSS樣式表可以被多個(gè)HTML頁(yè)面使用。因此實(shí)際網(wǎng)站制作一般都使用此種方式。該種方式實(shí)現(xiàn)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論