學(xué)習(xí)Dreamweaver8了解掌握CSS層疊樣式表_Dreamweaver教程
學(xué)習(xí)Dreamweaver8了解把握CSS層疊樣式表
了解層疊樣式表
層疊樣式表 (CSS) 是一系列格式設(shè)置規(guī)則,它們控制 Web 頁(yè)面內(nèi)容的外觀。使用 CSS 設(shè)置頁(yè)面格式時(shí),請(qǐng)將內(nèi)容與表現(xiàn)形式分開(kāi)。頁(yè)面內(nèi)容(即 HTML 代碼)駐留在 HTML 文件自身中,而用于定義代碼表現(xiàn)形式的 CSS 規(guī)則駐留在另一個(gè)文件(外部樣式表)或 HTML 文檔的另一部分(通常為文件頭部分)中。使用 CSS 可以非常靈活并更好地控制具體的頁(yè)面外觀,從精確的布局定位到特定的字體和樣式。
CSS 答應(yīng)您控制 HTML 無(wú)法獨(dú)自控制的許多屬性。例如,可以為選定的文本指定不同的字體大小和單位(像素、磅值等)。通過(guò)使用 CSS 以像素為單位設(shè)置字體大小,還可以確保在多個(gè)瀏覽器中以更一致的方式處理頁(yè)面布局和外觀。
除設(shè)置文本格式外,還可以使用 CSS 控制 Web 頁(yè)面中塊級(jí)別元素的格式和定位。例如,可以設(shè)置塊級(jí)元素的邊距和邊框、其他文本四周的浮動(dòng)文本等。
CSS 格式設(shè)置規(guī)則由兩部分組成:選擇器和聲明。選擇器是標(biāo)識(shí)格式元素的術(shù)語(yǔ)(如 P、H1、類(lèi)名或 ID),聲明用于定義元素樣式。在下面的示例中,H1 是選擇器,介于括號(hào) ({}) 之間的所有內(nèi)容都是聲明:
H1 {
font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}
聲明由兩部分組成:屬性(如 font-family)和值(如 Helvetica)。上面的 CSS 規(guī)則為 H1 標(biāo)簽創(chuàng)建了一個(gè)特定的樣式:鏈接到此樣式的所有 H1 標(biāo)簽的文本都將是 16 個(gè)像素大小、Helvetica 字體和粗體。
術(shù)語(yǔ) cascading 表示向同一個(gè)元素應(yīng)用多種樣式的能力。例如,可以創(chuàng)建一個(gè) CSS 規(guī)則來(lái)應(yīng)用顏色,創(chuàng)建另一個(gè) CSS 規(guī)則來(lái)應(yīng)用邊距,然后將兩者應(yīng)用于頁(yè)面上的同一個(gè)文本。所定義的樣式向下"層疊"到您的 Web 頁(yè)面上的元素,并最終創(chuàng)建您想要的設(shè)計(jì)。
CSS 的主要優(yōu)點(diǎn)是它提供了便利的更新功能;更新一處的 CSS 規(guī)則時(shí),使用該已定義樣式的所有文檔的格式都會(huì)自動(dòng)更新為新樣式。
在 Dreamweaver 中可以定義以下樣式類(lèi)型:
自定義 CSS 規(guī)則(也稱(chēng)為類(lèi)樣式)使您可以將樣式屬性應(yīng)用于任何文本范圍或文本塊。(請(qǐng)參見(jiàn)應(yīng)用類(lèi)樣式。)
HTML 標(biāo)簽樣式重定義特定標(biāo)簽(如 h1)的格式。創(chuàng)建或更改 h1 標(biāo)簽的 CSS 樣式時(shí),所有用 h1 標(biāo)簽設(shè)置了格式的文本都會(huì)立即更新。
CSS 選擇器樣式(高級(jí)樣式)重新定義特定元素組合的格式設(shè)置,或重新定義 CSS 答應(yīng)的其他選擇器表單的格式設(shè)置(例如,每當(dāng) h2 標(biāo)題出現(xiàn)在表格單元格內(nèi)時(shí)都應(yīng)用選擇器 td h2)。高級(jí)樣式還可以重新定義包含特定 id 屬性的標(biāo)簽的格式設(shè)置(例如,#myStyle 定義的樣式可應(yīng)用于包含屬性值對(duì) id="myStyle" 的所有標(biāo)簽)。
CSS 規(guī)則可以位于以下位置:
外部 CSS 樣式表是一系列存儲(chǔ)在一個(gè)單獨(dú)的外部 CSS (.css) 文件(并非 HTML 文件)中的 CSS 規(guī)則。利用文檔文件頭部分中的鏈接,該文件被鏈接到 Web 站點(diǎn)中的一個(gè)或多個(gè)頁(yè)面。
內(nèi)部(或嵌入式)CSS 樣式表是一系列包含在 HTML 文檔文件頭部分的 style 標(biāo)簽內(nèi)的 CSS 規(guī)則。
內(nèi)聯(lián)樣式是在標(biāo)簽的特定實(shí)例中在整個(gè) HTML 文檔內(nèi)定義的。
Dreamweaver 識(shí)別現(xiàn)有文檔中定義的樣式,只要這些樣式符合 CSS 樣式準(zhǔn)則。
提示
若要顯示 Dreamweaver 中包含的 O'Reilly CSS 參考指南,請(qǐng)選擇"幫助">"參考",然后從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。
手動(dòng)設(shè)置的 HTML 格式設(shè)置會(huì)覆蓋通過(guò) CSS 應(yīng)用的格式設(shè)置。要使 CSS 規(guī)則能夠控制段落格式,必須刪除所有手動(dòng)設(shè)置的 HTML 格式。
Dreamweaver 會(huì)呈現(xiàn)您在"文檔"窗口中直接應(yīng)用的大多數(shù)樣式屬性。您也可以在瀏覽器窗口中預(yù)覽文檔以查看樣式的應(yīng)用情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中呈現(xiàn)的外觀不相同,有些目前不受任何瀏覽器支持。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
猜你也喜歡看這些
- Drwamweaver網(wǎng)頁(yè)實(shí)例視頻教程
- 北風(fēng)網(wǎng)資深web講師李炎恢講師Dreamweaver系列課程(已完結(jié)|45課時(shí))陸續(xù)更新中
- Dreamweaver 8 大師系列教程- 高級(jí)篇
- Dreamveaver中CSS視頻教程
- 新編Dreamweaver MX2004 中文版輕松入門(mén)視頻教程 2CD
- 零基礎(chǔ)學(xué)Dreamweaver CS3+ASP 教案PPT/隨書(shū)光盤(pán)
- java實(shí)例教程在線支付系統(tǒng)制作
- Dreamweaver 8 ASP動(dòng)態(tài)網(wǎng)頁(yè)編程完全自學(xué)手冊(cè)
- 薛欣Dreamweaver8視頻教程
- Dreamweaver 8.0網(wǎng)頁(yè)設(shè)計(jì)
- 相關(guān)鏈接:
- 教程說(shuō)明:
Dreamweaver教程-學(xué)習(xí)Dreamweaver8了解掌握CSS層疊樣式表。