第09章-使用CSS樣式表修飾網(wǎng)頁(yè)_第1頁(yè)
第09章-使用CSS樣式表修飾網(wǎng)頁(yè)_第2頁(yè)
第09章-使用CSS樣式表修飾網(wǎng)頁(yè)_第3頁(yè)
第09章-使用CSS樣式表修飾網(wǎng)頁(yè)_第4頁(yè)
第09章-使用CSS樣式表修飾網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩8頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

《網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程(第3版)》第九章使用CSS樣式表修飾網(wǎng)頁(yè):::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::學(xué)習(xí)目標(biāo)

由于HTML語(yǔ)言本身的一些因素，導(dǎo)致了其結(jié)構(gòu)與顯示不分離的特點(diǎn)，這也是阻礙其發(fā)展的一個(gè)原因。因此W3C發(fā)布CSS（疊層樣式表）解決這一問(wèn)題，使不同的瀏覽器能夠正常地顯示同一頁(yè)面。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::本章重點(diǎn)CSS樣式表簡(jiǎn)介

創(chuàng)建與附加CSS樣式表

應(yīng)用CSS樣式表

編輯CSS樣式表:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.1認(rèn)識(shí)CSS樣式表

CSS是英語(yǔ)CascadingStyleSheets（層疊樣式表）的縮寫(xiě)，它是一種用于表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語(yǔ)言。用戶(hù)在設(shè)計(jì)與制作網(wǎng)頁(yè)的過(guò)程中，使用CSS樣式，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)精確的控制。

CSS樣式表簡(jiǎn)介CSS的規(guī)則分類(lèi):::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.1.1CSS樣式表簡(jiǎn)介

要管理一個(gè)系統(tǒng)的網(wǎng)站，使用CSS樣式，可以快速格式化整個(gè)站點(diǎn)或多個(gè)文檔中的字體、圖像等網(wǎng)頁(yè)元素的格式。并且，CSS樣式可以實(shí)現(xiàn)多種不能用HTML樣式實(shí)現(xiàn)的功能。CSS，是用來(lái)控制一個(gè)網(wǎng)頁(yè)文檔中的某文本區(qū)域外觀的一組格式屬性。使用CSS能夠簡(jiǎn)化網(wǎng)頁(yè)代碼，加快下載速度，減少上傳的代碼數(shù)量，從而可以避免重復(fù)操作。CSS樣式表是對(duì)HTML語(yǔ)法的一次革新，它位于文檔的<head>區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來(lái)設(shè)置。對(duì)于其他現(xiàn)有的文檔，只要其中的CSS樣式符合規(guī)范，Dreamweaver就能識(shí)別它們:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.1.2CSS樣式表分類(lèi)

布局是最基本的網(wǎng)頁(yè)布局之一，其特點(diǎn)是將網(wǎng)頁(yè)的各種結(jié)構(gòu)模塊進(jìn)行平面排列，以構(gòu)成整個(gè)網(wǎng)頁(yè)。在設(shè)計(jì)網(wǎng)頁(yè)布局的過(guò)程中，應(yīng)遵循對(duì)稱(chēng)平衡、異常平衡、對(duì)比、凝視和空白等原則。一般情況下，網(wǎng)頁(yè)的常見(jiàn)布局有以下幾種結(jié)構(gòu)。

CSS樣式表類(lèi)型

CSS規(guī)則應(yīng)用范圍CSS樣式規(guī)則由兩部分組成：選擇器和聲明(大多數(shù)情況下為包含多個(gè)聲明的代碼塊)。選擇器是標(biāo)識(shí)已設(shè)置格式元素的術(shù)語(yǔ)，例如

p、h1、類(lèi)名稱(chēng)或ID，而聲明塊則用于定義樣式屬性。例如下面CSS規(guī)則中，h1是選擇器，大括號(hào)({})之間的所有內(nèi)容都是聲明塊

:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.2使用CSS設(shè)計(jì)器面板

在DreamweaverCC中，用戶(hù)可以利用“CSS設(shè)計(jì)器”面板在頁(yè)面中創(chuàng)建或附加CSS樣式表，并設(shè)定其媒體查詢(xún)、選擇器以及具體的屬性。

認(rèn)識(shí)CSS設(shè)計(jì)器面板

創(chuàng)建與附加CSS樣式表

設(shè)定媒體查詢(xún)

定義選擇器

設(shè)置CSS規(guī)則屬性:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.3使用CSS樣式

在DreamweaverCC中，用戶(hù)可以在“屬性”檢查器中對(duì)文檔中選中的網(wǎng)頁(yè)元素套用CSS樣式，也可以使用“多類(lèi)選區(qū)”面板將多個(gè)CSS樣式應(yīng)用于單個(gè)網(wǎng)頁(yè)元素。

應(yīng)用CSS樣式

使用多CSS類(lèi)選區(qū)

:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.4編輯CSS樣式

在DreamweaverCC中要編輯CSS規(guī)則屬性，除了可以使用“CSS設(shè)計(jì)器”面板的“屬性”窗格以外，用戶(hù)還可以在“屬性”檢查器中單擊“目標(biāo)規(guī)則”下拉列表按鈕，選擇具體的選擇器，然后單擊“編輯規(guī)則”按鈕，打開(kāi)“CSS規(guī)則定義”對(duì)話(huà)框進(jìn)行設(shè)定。下面將詳細(xì)介紹“CSS規(guī)則定義”對(duì)話(huà)框中重要選項(xiàng)的功能。

設(shè)置“類(lèi)型”屬性

設(shè)置“背景”屬性

設(shè)置“區(qū)塊”屬性

設(shè)置“方框”屬性

設(shè)置“邊框”屬性

設(shè)置“列表”屬性

設(shè)置“定位”屬性

設(shè)置“擴(kuò)展”屬性

設(shè)置“過(guò)渡”屬性:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.5應(yīng)用CSS過(guò)渡效果

在DreamweaverCC中，用戶(hù)可以使用“CSS過(guò)渡效果”面板創(chuàng)建、修改和刪除CSS3過(guò)渡效果。下面將介紹“CSS過(guò)渡效果”面板的具體使用方法。

創(chuàng)建CSS3過(guò)渡效果

編輯CSS3過(guò)渡效果

刪除CSS3過(guò)渡效果:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站edu:::::9.5.1創(chuàng)建CSS3過(guò)渡效果

在DreamweaverCC中，用戶(hù)選擇“窗口”|“CSS過(guò)渡效果”命令，顯示“CSS過(guò)渡效果”窗口，然后在該窗口中單擊“新建過(guò)渡效果”按鈕，可以為網(wǎng)頁(yè)中具體的頁(yè)面元素設(shè)置CSS3過(guò)渡效果。:::::《計(jì)算機(jī)基礎(chǔ)與實(shí)訓(xùn)教材系列》系列叢書(shū)官方網(wǎng)站

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論