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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

《網頁設計與制作基礎教程(第3版)》第九章使用CSS樣式表修飾網頁:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::學習目標

由于HTML語言本身的一些因素，導致了其結構與顯示不分離的特點，這也是阻礙其發(fā)展的一個原因。因此W3C發(fā)布CSS（疊層樣式表）解決這一問題，使不同的瀏覽器能夠正常地顯示同一頁面。:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::本章重點CSS樣式表簡介

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

應用CSS樣式表

編輯CSS樣式表:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::9.1認識CSS樣式表

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

CSS樣式表簡介CSS的規(guī)則分類:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::9.1.1CSS樣式表簡介

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

布局是最基本的網頁布局之一，其特點是將網頁的各種結構模塊進行平面排列，以構成整個網頁。在設計網頁布局的過程中，應遵循對稱平衡、異常平衡、對比、凝視和空白等原則。一般情況下，網頁的常見布局有以下幾種結構。

CSS樣式表類型

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

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

:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::9.2使用CSS設計器面板

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

認識CSS設計器面板

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

設定媒體查詢

定義選擇器

設置CSS規(guī)則屬性:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::9.3使用CSS樣式

在DreamweaverCC中，用戶可以在“屬性”檢查器中對文檔中選中的網頁元素套用CSS樣式，也可以使用“多類選區(qū)”面板將多個CSS樣式應用于單個網頁元素。

應用CSS樣式

使用多CSS類選區(qū)

:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::9.4編輯CSS樣式

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

設置“類型”屬性

設置“背景”屬性

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

設置“方框”屬性

設置“邊框”屬性

設置“列表”屬性

設置“定位”屬性

設置“擴展”屬性

設置“過渡”屬性:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::9.5應用CSS過渡效果

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

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

編輯CSS3過渡效果

刪除CSS3過渡效果:::::《計算機基礎與實訓教材系列》系列叢書官方網站edu:::::9.5.1創(chuàng)建CSS3過渡效果

在DreamweaverCC中，用戶選擇“窗口”|“CSS過渡效果”命令，顯示“CSS過渡效果”窗口，然后在該窗口中單擊“新建過渡效果”按鈕，可以為網頁中具體的頁面元素設置CSS3過渡效果。:::::《計算機基礎與實訓教材系列》系列叢書官方網站

溫馨提示

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

評論

0/150

提交評論