動畫制作軟件FLASH

1、本章主要內(nèi)容本章主要內(nèi)容HTMLHTML樣式樣式5 5 樣式表樣式表CSSCSS樣式樣式HTMLHTML樣式與樣式與CSSCSS樣式樣式HTMLHTML樣式元素是指由樣式元素是指由HTMLHTML提供的設計頁面顯示樣式的元素，提供的設計頁面顯示樣式的元素，如如fontfont、物理類和邏輯類元素等。、物理類和邏輯類元素等。CSSCSS樣式樣式CSS(CascadingCSS(Cascading Style Sheet) Style Sheet)層疊式樣式表，是國際組織層疊式樣式表，是國際組織W3CW3C制制定的擴展定的擴展HTMLHTML功能的標準，功能的標準，CSSCSS樣式廣泛適用于文本、

2、圖形等樣式廣泛適用于文本、圖形等網(wǎng)頁元素的格式化工作，方便網(wǎng)頁的制作和維護，還能產(chǎn)生半透網(wǎng)頁元素的格式化工作，方便網(wǎng)頁的制作和維護，還能產(chǎn)生半透明圖像等特殊效果。明圖像等特殊效果?！按翱诖翱?CSS樣式樣式”命令命令CSSCSS的另一個特點是它的靈活性。有了的另一個特點是它的靈活性。有了CSSCSS，人們不必再把繁雜的樣式，人們不必再把繁雜的樣式定義編寫在文檔結(jié)構(gòu)中，可以將所有有關于文檔的樣式指定內(nèi)容全部分定義編寫在文檔結(jié)構(gòu)中，可以將所有有關于文檔的樣式指定內(nèi)容全部分脫離出來，在行內(nèi)定義、在標題中定義，甚至作為外部樣式文件供脫離出來，在行內(nèi)定義、在標題中定義，甚至作為外部樣式文件供HTMLHT

3、ML調(diào)用。在設計網(wǎng)站時，可以將站點上所有的網(wǎng)頁風格都使用一個調(diào)用。在設計網(wǎng)站時，可以將站點上所有的網(wǎng)頁風格都使用一個CSSCSS文件進行控制，只要修改這個文件進行控制，只要修改這個CSSCSS文件中相應的行，那么整個站點文件中相應的行，那么整個站點的所有頁面都會隨之發(fā)生變動。的所有頁面都會隨之發(fā)生變動。CSSCSS樣式的特點樣式的特點CSSCSS是是Cascading Style SheetsCascading Style Sheets（層疊樣式表單）的簡稱。是（層疊樣式表單）的簡稱。是W3CW3C在在19961996年底推出的一項年底推出的一項WebWeb網(wǎng)絡規(guī)范，現(xiàn)在的網(wǎng)絡規(guī)范，現(xiàn)在的IE

4、IE和和NetscapeNetscape瀏覽器都支瀏覽器都支持這項技術，它已經(jīng)廣泛地應用到持這項技術，它已經(jīng)廣泛地應用到WebWeb網(wǎng)頁中。網(wǎng)頁中。CSSCSS的最大特點是強大的格式控制能力。它彌補了的最大特點是強大的格式控制能力。它彌補了HTMLHTML在控制網(wǎng)頁的格在控制網(wǎng)頁的格式方面的不足，除了支持式方面的不足，除了支持HTMLHTML原有的顏色、字體、背景等樣式外，原有的顏色、字體、背景等樣式外，CSSCSS還可以控制字符間距、填充距、大小寫等多達還可以控制字符間距、填充距、大小寫等多達5050個左右的樣式，顯示出個左右的樣式，顯示出了強大的格式控制能力。在網(wǎng)頁設計中使用了強大的格式控

5、制能力。在網(wǎng)頁設計中使用CSS,CSS,可以使頁面的字體變得可以使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。更漂亮，更容易編排，使頁面真正賞心悅目。（1）嵌入式樣式表）嵌入式樣式表所謂嵌入式層疊樣式表，就是將樣式表嵌入到文檔中，它放在文檔的頭所謂嵌入式層疊樣式表，就是將樣式表嵌入到文檔中，它放在文檔的頭部部head元素中。創(chuàng)建嵌入式層疊樣式表使用元素中。創(chuàng)建嵌入式層疊樣式表使用HTML提供的提供的style元素，元素，其語法如下：其語法如下：style中所包含的樣式規(guī)則由若干條樣式規(guī)則組成，并且放在注釋標記中，中所包含的樣式規(guī)則由若干條樣式規(guī)則組成，并且放在注釋標記中，當濟覽器不支

6、持層疊樣式表時，可以忽略樣式表。當濟覽器不支持層疊樣式表時，可以忽略樣式表。創(chuàng)建和使用樣式表創(chuàng)建和使用樣式表樣式表是由樣式規(guī)則組成的，創(chuàng)建樣式表就是按照頁面設計要樣式表是由樣式規(guī)則組成的，創(chuàng)建樣式表就是按照頁面設計要求將若干個樣式規(guī)則組織在一起。求將若干個樣式規(guī)則組織在一起。用用style元素創(chuàng)建樣式表元素創(chuàng)建樣式表【例【例5.13】 嵌入文檔中的嵌入文檔中的css樣式表范例。樣式表范例。在文檔的頭部嵌入樣式表，可供整個文檔使用，但有時僅對某個元素設在文檔的頭部嵌入樣式表，可供整個文檔使用，但有時僅對某個元素設置顯示樣式時，可用元素的屬性置顯示樣式時，可用元素的屬性style來創(chuàng)建這個元素的樣

7、式規(guī)則。來創(chuàng)建這個元素的樣式規(guī)則。例如：例如：行內(nèi)樣式表行內(nèi)樣式表 (2)行內(nèi)樣式表行內(nèi)樣式表外部樣式表是將樣式表以文件的形式存儲，其文件的擴展中為外部樣式表是將樣式表以文件的形式存儲，其文件的擴展中為.css，樣式，樣式表文件中只包含樣式規(guī)則，這種樣式表可以提供給多個文檔使用。表文件中只包含樣式規(guī)則，這種樣式表可以提供給多個文檔使用。 (3)外部樣式表外部樣式表style.css文件內(nèi)容：文件內(nèi)容：Pfont-size:12pt;color:black;H1font-size;20pt;LIfont-size:12pt;color:red;a:linkcolor:blue;text-deco

8、ration:none;a:activecolor:red;text-decoration:none;a:visitedcolor:green;text-decoration:none;a:hovercolor:red;text-decoration:underline; 例如下面的樣式規(guī)則，通過文字編輯后保存名為例如下面的樣式規(guī)則，通過文字編輯后保存名為style.css文件就文件就是一個外部樣式表。是一個外部樣式表。DreamweaverDreamweaver 中創(chuàng)建樣式表的方法中創(chuàng)建樣式表的方法 （1）從“窗口”菜單中選擇“CSS樣式”命令或從浮動面板中單擊“設計”菜單，彈出如右圖所示的

9、設計樣式面板。選擇CSS樣式中的“應用樣式”并單擊圖中所示的“新建CSS樣式”按鈕，彈出“新建CSS樣式”對話框，如下圖所示。（2）若選擇）若選擇“創(chuàng)建自定義樣式（創(chuàng)建自定義樣式（class）”，在，在“名稱名稱”欄中需欄中需要填入類名，如要填入類名，如mystyle;若選擇若選擇“重定義重定義HTML標簽標簽”，在，在“名名稱稱”欄中需要填入欄中需要填入HTML的元素名；若選擇的元素名；若選擇“使用使用CSS選擇器選擇器”，在在“名稱名稱”欄中需要填入偽類名。欄中需要填入偽類名。CSS樣式表可定義在樣式表文件中或在內(nèi)嵌式樣式表中。選擇樣式表可定義在樣式表文件中或在內(nèi)嵌式樣式表中。選擇“新建樣

10、式表文件新建樣式表文件”并單擊并單擊“確定確定”按鈕后，彈出保存文件對話按鈕后，彈出保存文件對話框，為框，為CSS樣式表文件名以及保存位置進行指定；選擇樣式表文件名以及保存位置進行指定；選擇“僅對該僅對該文檔文檔”項，為文檔定義內(nèi)嵌式樣式表。項，為文檔定義內(nèi)嵌式樣式表。 （3）在彈出的樣式定義框中可分別定義八大類規(guī)則。如選）在彈出的樣式定義框中可分別定義八大類規(guī)則。如選擇擇“類型類型”，可定義，可定義font、text和和color等屬性，如圖所示；等屬性，如圖所示；選擇選擇“定位定位”，可定義，可定義position、visibility、Z-index、width、height、left、

11、top 等屬性。等屬性。（4）單擊樣式定義框中的）單擊樣式定義框中的“確定確定”或或“應用應用”按鈕，按鈕，所定義的樣式存儲在樣式表文件中或嵌入到文檔中。所定義的樣式存儲在樣式表文件中或嵌入到文檔中。 鏈接樣式表是使用外部樣式表的方法之一。鏈接樣式表是使用外部樣式表的方法之一。HTML提供提供了鏈接外部文件的元素養(yǎng)了鏈接外部文件的元素養(yǎng)link，使用時必須將鏈接信息加入，使用時必須將鏈接信息加入到到標記內(nèi)。標記內(nèi)。link鏈接樣式表的語法為：鏈接樣式表的語法為：備注：備注：href屬性值是要鏈接的外部樣式表文件的地址；屬性值是要鏈接的外部樣式表文件的地址；type屬性值指出了鏈接文件的類型。屬

12、性值指出了鏈接文件的類型。 使用樣式表使用樣式表由于內(nèi)嵌式樣式表和行內(nèi)樣式表與控制顯示的元素在同一個文檔之中，由于內(nèi)嵌式樣式表和行內(nèi)樣式表與控制顯示的元素在同一個文檔之中，樣式表定義后可直接使用。而對外部樣式表來說，使用時必須先將外樣式表定義后可直接使用。而對外部樣式表來說，使用時必須先將外部樣式表文件導入文檔。部樣式表文件導入文檔。HTML提供了兩種方法：用提供了兩種方法：用link元素鏈接樣式元素鏈接樣式表和用表和用import來輸入樣式表。來輸入樣式表。鏈接外部樣式表鏈接外部樣式表例如：例如：輸入樣式表與鏈接樣式表類似輸入樣式表與鏈接樣式表類似,它是使用外部樣式表的另一種方法它是使用外部

13、樣式表的另一種方法,也是內(nèi)也是內(nèi)嵌式樣式表的擴展嵌式樣式表的擴展.輸入樣式表使用輸入樣式表使用import,并且要放在并且要放在內(nèi)內(nèi),其方法為其方法為:import UTL（filename of css）；）；例如：例如：import url(hompage.css)；import url(stylel.css)pfont-family：宋體；：宋體；font-size:12pt;.tdstylefont-size:9px;background-color:#aa3366;輸入外部樣式表輸入外部樣式表設置設置CSS樣式表格式參數(shù)樣式表格式參數(shù)從從“編輯編輯”菜單中選擇菜單中選擇“參數(shù)選擇參數(shù)

14、選擇”，彈出，彈出 “參數(shù)選擇參數(shù)選擇”框，然后從框，然后從“分分類類”列表中選擇列表中選擇“CSS樣式樣式”，設置要應用的，設置要應用的CSS樣式選項：樣式選項：（1）當選擇）當選擇“使用速記使用速記”時，可使時，可使Dreamweaver MX以速記形式編寫以速記形式編寫CSS樣式屬樣式屬（2）選）選“當編輯當編輯CSS樣式時使用速記樣式時使用速記”時，可控制時，可控制Dreamweaver MX是否是否以速記形式重新編寫現(xiàn)有樣式；選擇以速記形式重新編寫現(xiàn)有樣式；選擇“如果原來使用速記如果原來使用速記”使使Dreamweaver MX將所有樣式保留原樣；選擇將所有樣式保留原樣；選擇“依據(jù)以

15、上設置依據(jù)以上設置”使使Dreamweaver MX以速記以速記形式重新為形式重新為“使用速記使用速記”中選擇的屬性編寫樣式。中選擇的屬性編寫樣式。管理樣式表管理樣式表在在Dreamweaver MX中可對中可對CSS樣式表格式參數(shù)進行設置，對已樣式表格式參數(shù)進行設置，對已存在的存在的CSS樣式表進行編輯、復制、刪除、轉(zhuǎn)換為樣式表進行編輯、復制、刪除、轉(zhuǎn)換為XHTML或或HTML標記等操作。標記等操作。修改樣式修改樣式 要修改已有的樣式，操作步驟如下：要修改已有的樣式，操作步驟如下： A.在在“CSS 樣式樣式”面板中，單擊面板中，單擊“編輯樣式編輯樣式”單選按鈕查看當前文檔中的樣式。單選按鈕

16、查看當前文檔中的樣式。 B.單擊要修改的樣式以選中它，然后執(zhí)行下列操作之一：單擊要修改的樣式以選中它，然后執(zhí)行下列操作之一： 1.雙擊所選樣式。雙擊所選樣式。 2.右擊或按住右擊或按住 Ctrl 鍵并單擊，然后選擇鍵并單擊，然后選擇“編輯編輯”。 3.單擊位于單擊位于“CSS 樣式樣式”面板底部的面板底部的“編輯樣式表編輯樣式表”按鈕按鈕 。 “CSS 樣式定義樣式定義”對話框隨即打開，即可對所選樣式進行修改。對話框隨即打開，即可對所選樣式進行修改。編輯編輯CSS樣式樣式對已有的樣式，經(jīng)常需要進行修改、刪除、復制等操作，這些操作都可以通對已有的樣式，經(jīng)常需要進行修改、刪除、復制等操作，這些操作

17、都可以通過過“CSS 樣式樣式”面板對話框來完成。其操作步驟如下：面板對話框來完成。其操作步驟如下：刪除樣式刪除樣式 要刪除已有的樣式，操作步驟如下：要刪除已有的樣式，操作步驟如下： A.在在“CSS 樣式樣式”面板中，單擊面板中，單擊“編輯樣式編輯樣式”單選按鈕查看當前文檔單選按鈕查看當前文檔中的樣式。中的樣式。 B.單擊要刪除的樣式以選中它，然后執(zhí)行下列操作之一：單擊要刪除的樣式以選中它，然后執(zhí)行下列操作之一： 右擊或按住右擊或按住 Ctrl 鍵并單擊，然后選擇鍵并單擊，然后選擇“刪除刪除”命令。命令。 單擊位于單擊位于“CSS 樣式樣式”面板底部的面板底部的“刪除刪除CSS樣式樣式”按鈕

18、按鈕 。即可刪除所選樣式。即可刪除所選樣式。復制樣式復制樣式 要復制已有的樣式，操作步驟如下：要復制已有的樣式，操作步驟如下： A.在在“CSS 樣式樣式”面板中，單擊面板中，單擊“編輯樣式編輯樣式”單選按鈕查看當前文檔中的單選按鈕查看當前文檔中的樣式。樣式。 B.單擊要復制的樣式以選中它，右擊或按住單擊要復制的樣式以選中它，右擊或按住 Ctrl 鍵并單擊，然后選擇鍵并單擊，然后選擇“復復制制”命令，則彈出命令，則彈出“復制復制CSS樣式樣式”的對話框，如圖的對話框，如圖5.64所示。所示。圖圖5.64 “復制復制CSS樣式樣式”對話框?qū)υ捒駽.輸入要復制的樣式名稱后，單擊輸入要復制的樣式名稱后