《Dreamweaver CS5網(wǎng)頁設計與制作實例教程》課件-第6章 CSS基礎語法與應用_第1頁
《Dreamweaver CS5網(wǎng)頁設計與制作實例教程》課件-第6章 CSS基礎語法與應用_第2頁
《Dreamweaver CS5網(wǎng)頁設計與制作實例教程》課件-第6章 CSS基礎語法與應用_第3頁
《Dreamweaver CS5網(wǎng)頁設計與制作實例教程》課件-第6章 CSS基礎語法與應用_第4頁
《Dreamweaver CS5網(wǎng)頁設計與制作實例教程》課件-第6章 CSS基礎語法與應用_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第6章CSS基礎語法與應用CSS基礎語法與應用6.1CSS樣式6.2CSS語法

6.2.1常用選擇符6.2.2CSS的使用方法6.2.3CSS文件與導出樣式表6.3CSS樣式表的應用實例6.1樣式

樣式是一組可以控制文本塊、段落或整篇文檔外觀的格式屬性。使用外部樣式文件可以一次控制若干篇文檔的格式。

CSS（CascadingStyleSheets）即級聯(lián)樣式表或層疊樣式表通過樣式名或HTML標簽表示，可以控制絕大多數(shù)的傳統(tǒng)文本格式，如字體、字號和對齊方式等，還可以指定位置、鼠標指針形狀和其他特殊效果。

為了防止某些瀏覽器不識別某些CSS樣式，可以用注釋標簽<!---->將CSS樣式括起來。通過實例來認識CSS樣式【例題6-1】制作多彩文字標題。要求使用<h1>創(chuàng)建一個多彩文字標題，然后使用CSS樣式對標題進行修飾，可以從顏色、尺寸、字體、背景、邊框等方面入手。實例完成后，其效果如圖所示。詳細步驟看教材6.2CSS語法CSS樣式表位于XHTML代碼中的head標簽內，由3部分構成：選擇符（selector）、屬性（properties）和屬性值（value）：

Selector{properties1:value1;/*第1個屬性名及屬性值*/properties2:value2;/*第2個屬性名及屬性值*/…}

6.2.1常用選擇符

（1）標簽選擇符：用于聲明標簽的樣式。例如：p標簽選擇符，就是聲明所有段落<p>的樣式風格。選擇符組：把相同屬性和值的標簽組合起來書寫，用逗號隔開。如：p,table{font-size:10pt}

（2）類選擇符：可用于任意標簽的自定義樣式，標簽名與自定義樣式名用西文點分隔。如：p.left{text-align:left}/*定義段落居左*/（3）ID選擇符：只對某特定元素定義的單獨的樣式。如：#right{text-align:right}/*只對id="right"的段落起作用*/（4）包含選擇符：定義具有包含關系的元素樣式。若標簽1內包含標簽2，包含選擇符只對標簽1內的標簽2有效，對單獨的標簽1或標簽2無效。

如：Tablea{font-size:16px}/*只對表格內的鏈接起作用*/

樣式表具有層疊性，也稱為繼承性，即內層標簽的樣式繼承外層標簽的樣式。

6.2.2CSS的使用方法1、行內式2、內嵌式3、引用外部樣式：

3.1導入式：

單擊CSS面板的右下角的“附加樣式表”按鈕

。

3.2鏈入式引用外部CSS文件1．引用外部CSS文件“鏈接”是通過指針指向外部CSS文件，“導入”相當于存在內部樣式表中，這個區(qū)別可以從它們在代碼中的位置看到。<head><styletype="text/css"><!--@importurl("CSS/Level3_3.css");/*導入的CSS文件*/.a{ font-family:"隸書","華文中宋";/*自定義名為.a的內部CSS樣式*/ font-size:36px; }--></style><linkhref="CSS/Level2_Times_Text.css"rel="stylesheet"type="text/css"/>/*鏈接的CSS文件*/</head>

6.2.3導出樣式表2．導出CSS樣式表在單個文檔中設置的樣式只在該文檔中有效，要使單個文檔中的樣式應用到其他文檔，則應將其中的樣式導出為樣式表文件。這樣Dreamweaver就可以通過樣式表文件鏈接到其他網(wǎng)頁，使整個站點具有相同的樣式設置。【例6-3】建立及導出

CSS樣式表文件。6.3CSS樣式應用先創(chuàng)建CSS樣式，再對選定文本應用CSS樣式。對選定文本用了某CSS樣式后，若又改變了該樣式的格式，則修改之前用了該樣式的文本自動更新格式。CSS樣式創(chuàng)建之后，只對本網(wǎng)頁有效。以往創(chuàng)建的CSS樣式不存在于新開文件的CSS樣式列表中，新網(wǎng)頁須重新附加CSS文件。文中綜合實例【例6-4】

【例題6-4】詳細步驟看教材

溫馨提示

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

評論

0/150

提交評論