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

下載本文檔

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

文檔簡介

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

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

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

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

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

5-2將5.2節(jié)案例實現(xiàn)，定義CSS樣式使用外部樣式表。（1）創(chuàng)建HTML文檔，設(shè)置文件名為example02.html，輸入如下代碼。引入CSS樣式（2）創(chuàng)建外部樣式表文件。在項目project05中，選中“css”目錄，右擊，選擇“新建”|“css文件”命令，在“新建css文件”對話框中輸入文件名style.css，單擊“創(chuàng)建”按鈕，如圖所示。引入CSS樣式（3）打開style.css文檔，在窗口中輸入如下CSS樣式表代碼?？梢钥闯?，style.css中的代碼，實際就是內(nèi)部樣式表中的代碼，只是此處輸入時一定不要再添加<style>標記，直接輸入CSS樣式表代碼即可。引入CSS樣式（4）鏈接CSS外部樣式表。在example02.html文件中的<title>標記后，添加<link>標記，并將定義的類樣式應(yīng)用到相應(yīng)元素上，代碼如下。鏈接外部樣式表的最大好處之一是同一個CSS樣式表可以被多個HTML頁面使用。因此實際網(wǎng)站制作一般都使用此種方式。該種方式實現(xià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)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論