DW_09使用CSS樣式表

1、主講：主講：韓維良韓維良2021年年11月月網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院第一節(jié)第一節(jié) 認識認識CSS語言語言一、一、CSSCSS樣式概述樣式概述層疊樣式簡稱CSS（Cascading Style Sheet技術(shù)是一種是用于控制網(wǎng)頁樣式的標記性語言），是以HTML為基礎(chǔ)的語言，用于定義網(wǎng)頁中內(nèi)容的格式，它，使網(wǎng)頁設(shè)計者以更有效的方式設(shè)置網(wǎng)頁格式。3網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院主要特點主要特點：可以獨立地為網(wǎng)頁中的各種對象定義格式，即樣式，包含多方面的格式要求，并為樣式定義一個名稱，從而可將一種樣式用于多個

2、網(wǎng)頁。 保證了同一樣式的多次重復使用。CSS 樣式表中的層疊層疊是指多個 CSS 樣式表可以同時應(yīng)用于同一個頁面或網(wǎng)頁中的同一元素，瀏覽器根據(jù) CSS 定義的層疊規(guī)則來決定哪一種樣式具有最高優(yōu)先級。4網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院1、可以將網(wǎng)頁樣式與內(nèi)容分離。2、能以前所未有的能力控制頁面的布局。3、可以制作出體積更小，下載更快的網(wǎng)頁。4、可以更快、更容易的維護及更新大量的網(wǎng)頁。5、讓瀏覽器成為更友好的界面。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院二、二、 CSS CSS樣式作用樣式作用1、CSS可以定義網(wǎng)頁的多種樣

3、式，美化網(wǎng)頁，如文字的大小顏色、段落格式、排版定位、對象位置、圖片特效、鼠標指針樣式等；2、樣式與文檔分離，通過修改樣式表，實現(xiàn)頁面格式的自動更新；3、CSS可以獨立于網(wǎng)頁文件，從而實現(xiàn)網(wǎng)站頁面風格的批量修改。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院第二節(jié)第二節(jié) CSS語言基本語法語言基本語法CSS 樣式由“選擇符”和“聲明”組成。選擇符說明樣式作用的對象是誰；聲明由“屬性”和“屬性值”組成。每條聲明之間用“;” 分隔。文本編輯器編輯生成，大小寫不等價；selectors property: value; 選擇符選擇符屬性屬性屬性值屬性值聲明聲明網(wǎng)站建設(shè)網(wǎng)站建

4、設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院CSS的思想就是首先指定對什么“對象”進行設(shè)置，然后指定對該對象的哪個方面的“屬性”進行設(shè)置，最后給出該設(shè)置的“值”。因此，概括來說，CSS就是由3個基本部分“對象”、“屬性”和“值”組成的。而且在一個樣式中可以設(shè)置多個屬性及其值。舉例：定義一個樣式體驗。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院選擇符的類別：CSS選擇符的使用有四種情況：（1）單元素名作為選擇符 元素名樣式規(guī)則（2）CLASS（類）作為選擇符 .class名稱樣式規(guī)則 圓點引導（3）ID(標識符)作為選擇符 ID號樣式規(guī)則 # 號引導

5、網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院（4）元素組合作為選擇符元素名1，元素名2，.元素名n樣式規(guī)則.class名稱1，.class名稱2， .class名稱n樣式規(guī)則ID號1，ID號2，. ID號n樣式規(guī)則用逗號分隔的多個選擇符的組合。如下：H1,H2font-family:arial;text-align:center; color:red;.a,.b,.cfont-family: 隸書; color:yellow;#1,#2color:blue; font-family: 楷體;#2font-size=100pt;.cfont-size=100pt;網(wǎng)

6、站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院第三節(jié)第三節(jié) CSS基本應(yīng)用基本應(yīng)用1、在標簽內(nèi)部定義樣式屬性在Html標簽內(nèi)部設(shè)計樣式屬性：標簽內(nèi)容如：img border: thick double;即重新定義一個Html標簽的樣式，只能用于再定義特定標簽的樣式。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院2、使用標簽定義僅在單個文檔內(nèi)部使用的樣式，一般在文檔首部定義： 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院3、使用標簽導入外部CSS文件一般定義樣式常用的方式，一個樣式可被用于多個網(wǎng)頁文件，只要修改了

7、CSS樣式文件中的樣式，則所有使用該樣式的網(wǎng)頁格式同步發(fā)生變化，。使用LINK（鏈接）標簽 ，語法：網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院4、使用import命令導入外部CSS文件與Link標簽的功能相同，可用于導入一個外部樣式文件。語法： import url(“樣式表文件.css”);要求：必須放在Style標簽中使用。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院第四節(jié)第四節(jié) CSS樣式優(yōu)先級樣式優(yōu)先級層疊樣式表的一般處理原則：（1）當兩個不同的樣式應(yīng)用于同一段文本時，瀏覽器會顯示所有的樣式屬性。如：一個樣式定義字體為宋體，

8、另一個樣式定義顏色為紅色，則這段文本顯示為紅色宋體，（2）如果兩個樣式發(fā)生沖突，則根據(jù)樣式與文本的遠近關(guān)系來選擇樣式，最近優(yōu)先原則，越近越優(yōu)先。（3）CSS樣式比HTML定義的樣式具有優(yōu)先權(quán)。 （4）內(nèi)部樣式優(yōu)先于外部樣式。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院當一個網(wǎng)頁文檔中為同一個對象定義多個樣式時，根據(jù)這些樣式的優(yōu)先級決定誰有效。一、環(huán)境方面的優(yōu)先級順序一、環(huán)境方面的優(yōu)先級順序1、網(wǎng)頁設(shè)計者定義的樣式；2、瀏覽者在瀏覽器中設(shè)置的樣式；3、瀏覽器自帶的默認樣式。二、應(yīng)用方面的優(yōu)先級順序二、應(yīng)用方面的優(yōu)先級順序1、在標簽內(nèi)部添加的樣式屬性；2、使用標簽定義

9、的樣式3、導入的外部樣式；網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院三、選擇符方面的優(yōu)先級順序三、選擇符方面的優(yōu)先級順序1、ID選擇符（優(yōu)先權(quán)值為100）；2、類選擇符（優(yōu)先權(quán)值為10）；3、Html標簽選擇符（優(yōu)先權(quán)值為1）；網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院第五節(jié)第五節(jié) CSS設(shè)備類型（略）設(shè)備類型（略）用于指定CSS樣式所作用的設(shè)備類型，使之能在不同的設(shè)備上正確顯示。方法一：import url(樣式表文件) 設(shè)備類型；方法二：media 設(shè)備類型 屬性1：值； 屬性2：值； 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2

10、021年11月16日星期二教育學院第六節(jié)第六節(jié) CSS單位和屬性單位和屬性一、一、CSSCSS單位單位1 1、長度單位、長度單位主要用于定義對象的寬度、高度、字號、字間距、文本縮排、行高、邊距、間距、邊框?qū)挾鹊葘傩?。絕對類型絕對類型：英寸（in）、厘米（cm）、毫米（mm）、點（point，寫作pt）、字高（派卡pica，印刷單位，寫作pc）相對類型相對類型：em:相對于當前字符的高度； ex:相對于字母x的高度； px:像素（相對于屏幕分辨率）網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院2 2、百分比單位。、百分比單位。相對于上一級對象的相同屬性作為參照值，為其

11、百分之多少。格式：“+/-”+數(shù)值+“%”如：表格的寬度是屏幕寬度的80%。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院3 3、顏色單位、顏色單位顏色名稱，如red，blue；百分比合成顏色，RGB(*%,*%,*%)如：RGB(100%,100%,100%)表示白色數(shù)字合成顏色，RGB(*,*,*)如：RGB(255,255,255)表示白色十六進制數(shù)合成法#RRGGBB 或者#RGB如：#FF00CC #F0C網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院4 4、URLURL單位單位指鏈接路徑，有相對路徑和絕對路徑之分，其中相對路徑

12、又分為相對根目錄的路徑和相對文檔的路徑。一般站外鏈接用絕對路徑，站內(nèi)鏈接用相對路徑。鏈接路徑相對路徑相對根目錄的路徑相對文檔的路徑絕對路徑網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院二、二、CSSCSS屬性屬性1 1、CSSCSS盒模型盒模型CSS將元素假設(shè)放在一個矩形區(qū)域中，然后對這個矩形區(qū)域進行屬性設(shè)置，共有五類屬性：邊界(Margin)、邊框(Border)、填充(Padding)、大小 (Height、Weight)、背景（background）等。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院24邊界邊界邊框邊框填充填充對象對

13、象網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院邊界邊界(Margin)(Margin)：區(qū)塊與其他對象的空白距離，有5 個屬性：Margin-top、Margin-bottom、Margin-left、Margin-right、Margin等。邊框邊框(Border)(Border)：自身的外圍邊框?qū)傩?，?類屬性：邊框?qū)挾?、邊框顏色、邊框樣式，而寬度又?個屬性： Border-top-width、Border-bottom-width、Border-left-width、Border-right-width、Border-width填充填充(Padding)(

14、Padding)：區(qū)塊內(nèi)元素與區(qū)塊邊框的空白距離，有5個屬性：Padding-top、Padding-bottom、Padding-left、Padding-right、Padding等。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院26網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院27padding-rightpadding-leftborder-rightborder-leftmargin-rightmargin-leftwidth元素的總寬度元素的總寬度元素的總寬度 = 左邊界+左邊框+左填充+Width+右邊界+右邊框+右填充網(wǎng)站

15、建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院28網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院元素的總高度 = 上邊界+上邊框+上填充+height+下邊界+下邊框+下填充padding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottomheight元元素素的的總總高高度度網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院2、CSS定位CSS 定位 (Positioning) 屬性允許你對元素進行定位。position 屬性值的含義：stat

16、icstatic :沒有特殊定位，遵循基本的定位規(guī)定，不能通過z-index進行層次分級。如層的定位：R e l a t i v eR e l a t i v e ： 不 脫 離 文 檔 流 ， 參 考 自 身 靜 態(tài) 位 置 通 過 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通過z-index進行層次分級。即相對于自身原有的位置定位到某處，元素仍保持其未定位前的形狀，它原本所占的空間仍保留。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院31#box_relative position: relative; left: 30p

17、x; top: 20px; 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院absoluteabsolute : :脫離文檔流，相對于其包含塊通過 top,bottom, left,right定位。元素框從文檔流完全刪除，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院33#box_relative position: absolute; left: 30px; t

18、op: 20px;網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院CSS的定位屬性屬性描述position把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。top定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。overflow設(shè)置當元素的內(nèi)容溢出其區(qū)域時發(fā)生的事情。clip設(shè)置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。vertical-align設(shè)置元素

19、的垂直對齊方式。z-index設(shè)置元素的堆疊順序。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院第七節(jié)第七節(jié) 使用使用Dreamweaver CS5可視化定義可視化定義CSS樣式樣式一、新建樣式的一般方法一、新建樣式的一般方法1、CSS的應(yīng)用類型外部外部CSSCSS樣式表樣式表：各種自定義樣式存放在擴展名為.css.css的的純文本文純文本文件件?？梢怨蚕硗獠客獠緾SSCSS樣式表樣式表文件 ，讓多個網(wǎng)頁共同引用并應(yīng)用，達到站點文件樣式的一致性。同時，如果修改該樣式表文件，所有引用的網(wǎng)頁都將改變其樣式，達到網(wǎng)站迅速改版的目的。通過CSS樣式面板中“附加樣式”按鈕，可

20、將外部樣式鏈接到當前網(wǎng)頁中使用。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院內(nèi)部內(nèi)部CSSCSS樣式表樣式表：只存在于當前網(wǎng)頁中，并只針對當前頁進行樣式應(yīng)用的方法。一般存在于文檔head部分的style標簽內(nèi)。2 2、CSSCSS樣式面板樣式面板顯示顯示“CSSCSS樣式樣式”面板面板：在“窗口”菜單中單擊“CSS 樣式”。或者按 Shift+F11 鍵。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院CSS樣式面板下方的四個按鈕分別是：附加樣式表附加樣式表，新建新建CSSCSS規(guī)則規(guī)則，編編輯樣式表輯樣式表，刪除嵌入樣式表刪除嵌入樣式表

21、。37附加樣式表新建CSS規(guī)則編輯樣式表刪除嵌入的樣式表網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院“所有所有”模式與模式與“當前當前”模式模式“CSS”面板默認情況下，是以“所有”模式展開?；蛘邌螕簟叭俊卑粹o；在“所有”模式下，“CSS”面板顯示應(yīng)用到當前文檔的所有CSS規(guī)則。單擊其中一個規(guī)則，該規(guī)則的屬性出現(xiàn)在下方的列表框中。單擊“正在”切換到“當前模式”。在“CSS”面板中，單擊“切換到當前選擇模式”按鈕。此時，在“當前”模式中，“CSS”面板顯示當前所選內(nèi)容的屬性的摘要。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院3、創(chuàng)建C

22、SS樣式表 打開設(shè)計視圖，在需要插入樣式的地方，執(zhí)行“格式”“CSS樣式”“新建”命令。 CSS樣式面板中單擊“新建CSS規(guī)則”。屬性面板CSS目標規(guī)則中選“新CSS”編輯規(guī)則定義CSS樣式的類型選擇定義樣式的位置；在“CSS規(guī)則定義”對話框中選擇要為新CSS樣式設(shè)置的樣式選項。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院輸入所定義的樣式名稱輸入所定義的樣式名稱網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院CSS樣式共有四種類型：類（自定義的類（自定義的CSSCSS樣式：可用于任何樣式：可用于任何HTMLHTML元素）元素）：是唯一可以

23、應(yīng)用于文檔中的任何文本（與控制文本的標簽無關(guān)）的 CSS 樣式類型。與當前文檔關(guān)聯(lián)的所有自定義 (Class) 樣式都顯示在“CSS 樣式”面板的“應(yīng)用樣式”視圖中以及文本屬性面板的 CSS 模式中。標簽（重新定義標簽（重新定義HTMLHTML元素）元素）：重定義現(xiàn)有的HTML標簽，當創(chuàng)建或更改這類標簽的CSS樣式時，文檔中所有用該標簽設(shè)置了格式的文本都將自動更新，如給Body設(shè)置格式。41網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院ID（可用于一個可用于一個HTMLHTML元素元素）：可以創(chuàng)建一個用id屬性聲明的僅應(yīng)用于一個HTML元素的id選擇器。然后在“選擇

24、器名稱”文本框中輸入ID號。ID必須以井號（#）開頭，能夠包含任何字母和數(shù)字（如：#one）。僅對指定ID標簽標識的一個標簽有效。復合內(nèi)容（基于選擇的內(nèi)容）復合內(nèi)容（基于選擇的內(nèi)容）：主要定義超級鏈接四種形式的不同屬性。42網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院4 4、設(shè)置、設(shè)置CSSCSS樣式格式樣式格式CSS樣式格式共有8種類型，根據(jù)需要設(shè)置相關(guān)的屬性。 類 型(主要定義文字的屬性) 背 景(設(shè)置網(wǎng)頁表格單元格行層等的背景) 區(qū) 塊(對段落的設(shè)置,定義文本的間距、對齊、縮進設(shè)置。) 方 框(對文本框圖像框的設(shè)置) 邊 框(設(shè)置表格的邊框) 列 表(設(shè)置項

25、目符號編號) 定 位(定義在網(wǎng)頁中的位置) 擴 展(制作一些特殊效果)43網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院44在“屬性”面板中選擇“CSS”按鈕，單擊“編輯規(guī)則”按鈕，在彈出的“新建CSS規(guī)則”對話框中進行設(shè)置。在選擇器名稱中輸入該文本樣式名稱“.head1”，單擊“確定”按鈕，在彈出的“.head1的CSS規(guī)則定義”對話框中進行設(shè)置?；氐骄W(wǎng)頁正文部分，選中需要設(shè)置該種文本樣式的文字，然后用鼠標單擊“屬性”面板中的“目標規(guī)則”下拉列表框中的樣式名稱，該樣式就應(yīng)用到文字上了。 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院二、

26、定義文本樣式二、定義文本樣式在CSS規(guī)劃定義的分類列表中選擇“類型”；主要用于定義文本的屬性。 設(shè)置行間距網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院字體（字體（Font-familyFont-family）：可以在下拉菜單中設(shè)置當前樣式所用的字體。大?。ù笮。‵ont-sizeFont-size）：設(shè)置字體的大小。可以通過選擇數(shù)字和單位來指定字體，如“磅”、“像素”、“英寸”、“厘米”等，也可以選擇相對的字體大小，如“極小、“特小”等。可以直接輸入樣式文本的字號，或從下拉列表中選擇需要的字號，當選擇字號后，可以在其右側(cè)的下拉列表框中選擇字號的單位。46網(wǎng)站建設(shè)網(wǎng)

27、站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院粗細（粗細（Font-weightFont-weight）：設(shè)置字體的粗細程度，有“正?！薄ⅰ按煮w”、“特粗”和“細體”等。下拉列表框中可輸入字體的粗細程度，也可從下拉列表中選擇需要的粗細程度。樣式（樣式（Font-styleFont-style）：通過選擇“正常”、“斜體”或“偏斜體”來設(shè)置字體的特殊格式；下拉列表框中可輸入字體的特殊格式，也可以從下拉列表中選擇字體的特殊格式。47網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院變體（變體（Font-variantFont-variant） ：允許設(shè)置字

28、體的變形形式，有“正?！焙汀靶⌒痛髮懽帜浮保饕槍τ⑽淖址O(shè)置。行高（行高（Line-heightLine-height） ：設(shè)置文本的行高。選擇“正常”，則由系統(tǒng)自動計算字體的行高和大?。灰部梢酝ㄟ^輸入一個精確的數(shù)值并選擇其計算單位，來具體指定行高。下拉列表中可選擇“正?！被颉爸怠边x項，當選擇“值”選擇項時可在右側(cè)的下拉列表框中選擇值的單位。48網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院大小寫（大小寫（Text-transformText-transform） ：可以設(shè)置字符的大小寫方式。“首字母大寫”，可以指定將每個單詞的第一個字符大寫；“大寫”或“小寫”

29、可以分別將別選擇的文本設(shè)置為大寫或小寫；“無”保持字符本身原有的大小寫格式。可以輸入文本的大小寫方式，也可以在下拉列表中選擇文本的大小寫方式。修飾（修飾（Text-decorationText-decoration） ：在該欄中設(shè)置文本的修飾效果，包括下劃線、上劃線、刪除線、閃爍、無等復選框。49網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院顏色（顏色（ColorColor） ：用于設(shè)置文字的顏色，單擊選色按鈕，在打開的顏色列表中選擇需要的顏色，也可在文本框中直接輸入顏色值。例如：設(shè)置文本樣式：字體為“幼圓”、大小為9pt、顏色為淺紅色（#FF6666）、粗細為“細

30、體”，其它為默認。50網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院三、定義背景樣式三、定義背景樣式在CSS規(guī)劃定義的分類列表中選擇“背景”；主要用于設(shè)置CSS樣式的背景，包括背景顏色、背景圖像、背景圖像的控制等 。 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院背景顏色（背景顏色（Background-colorBackground-color） ：設(shè)置樣式的背景顏色。背景圖像（背景圖像（ Background-image Background-image） ：設(shè)置作為樣式背景的圖像文件所在的URL地址：單擊“瀏覽”按鈕從磁盤中選擇某一

31、個圖像文件。重復（重復（ Background-repeat Background-repeat） ：可以設(shè)置是否允許背景圖像被重復。“不重復”只在應(yīng)用樣式的元素開始部分顯示一次圖像；“重復”在應(yīng)用樣式的元素背景上縱向和橫向重復顯示圖像；“橫向重復”相應(yīng)的顯示圖像的橫向重復延伸；“縱向重復”相應(yīng)的顯示圖像的縱向重復延伸。52網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院附件（附件（Background-attachmentBackground-attachment） ：設(shè)定當拖動瀏覽器滾動條瀏覽滾動頁面時，背景圖像是固定在它的原始位置，還是同內(nèi)容一起滾動?！肮潭ā北?/p>

32、明背景圖像固定在原始位置；“滾動”表明背景圖像可以滾動。有些瀏覽器會將固定方式始終作為滾動方式來處理。水平位置（水平位置（Background-Background-position(Xposition(X) )）：設(shè)置背景圖像相對于文檔窗口的水平位置：左、中、右。垂直位置（垂直位置（Background-Background-position(Yposition(Y) )） ：設(shè)置背景圖像相對于文檔窗口的垂直位置：頂部、底部、居中。53網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院四、定義區(qū)塊樣式四、定義區(qū)塊樣式在CSS規(guī)劃定義的分類列表中選擇“區(qū)塊”，主要用于設(shè)

33、置塊元素的文字間距、對齊方式、排列方式、文字縮進等。塊元素可以是文本、圖像和層等。設(shè)置首行縮進網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院單詞間距（單詞間距（Word-spacingWord-spacing）：設(shè)置單詞間的間距方式，可以輸入一個數(shù)值，并在其右方的下拉列表中選擇設(shè)置數(shù)值的單位；字母間距（字母間距（Letter-spacingLetter-spacing）：設(shè)置字母間的間距，設(shè)置字母間的間距。若在列表中選擇“值”選項，在右側(cè)的下拉列表中可以設(shè)置數(shù)值的單位。垂直對齊（垂直對齊（Ve

34、rtical-alignVertical-align）：可設(shè)置指定元素相對于其父級元素在垂直方向上的對齊方式。應(yīng)用于IMG圖像，可以設(shè)置圖文的對齊方式 如果輸入數(shù)值，顯示的是一個百分比。56網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院文本對齊（文本對齊（Text-alignText-align） ：設(shè)置文本中元素的對齊方式：left（左）、right（右）、center（居中）、justify（兩端對齊）。文字縮進（文字縮進（Text-indentText-indent） ：設(shè)置文本首行縮進的距離，在其右側(cè)的下拉列表中選擇數(shù)值單位。如果輸入為負值時等于創(chuàng)建了文本凸

35、出（反縮進），其顯示取決于瀏覽器。輸入第一行的縮進距離，只有當標簽應(yīng)用于文本塊時，該設(shè)置才會顯示在Dreamweaver的文檔窗口中。57網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院空格（空格（White-spaceWhite-space） ：設(shè)置在應(yīng)用樣式元素時空格、Tab鍵和換行符的處理方法?！罢！北硎景凑照５姆椒ㄌ幚砜崭?，多個空格當做一個空格來對待；“保留”表示保留所有的原始空格形象，比如空格、跳格和回車符等，都作為文本用PRE標簽包圍；“不換行”表示設(shè)定文本不會自動換行，只有使用換行標記BR才換行。該設(shè)置不會顯示在Dreamweaver的文檔窗口中。顯

36、示（顯示（DisplayDisplay）：可以設(shè)置哪些元素被顯示以及如何顯示。58網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院五、定義方框樣式五、定義方框樣式在CSS規(guī)劃定義的分類列表中選擇“方框”，主要用于控制網(wǎng)頁中塊元素的內(nèi)容距區(qū)塊邊框的距離、區(qū)塊的大小、區(qū)塊間的間隔等。塊元素可為文本、圖像和層等。 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院寬（寬（WidthWidth）和高（）和高（HeightHeight）：設(shè)置元素的大小尺寸。在該下拉列表中可指定元素的寬度和高度，也可以輸入一個數(shù)值，然后在右側(cè)的下拉列表中設(shè)置數(shù)值的單位。浮

37、動浮動(Float)(Float)：在該下拉列表框中設(shè)置應(yīng)用樣式元素的浮動位置。頁面不并移動，將元素放置在頁面邊緣的左側(cè)或右側(cè)時，其他元素會圍繞該元素。只有在被用于IMG標簽時，才會在Dreamweaver的文檔窗口中顯示該屬性。如在下拉列表框中選擇“右對齊”選項，則將元素放置到頁面右側(cè)的空白處，同樣若選擇“左對齊”選項則將元素放置到頁面左側(cè)的空白處。60網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院清除清除(Clear)(Clear)：定義元素的某個邊側(cè)不允許有層出現(xiàn)。如在下拉列表框中選擇“左對齊”選項，則層不能出現(xiàn)在應(yīng)用樣式元素的左側(cè)。同樣如選擇“右對齊”選項，

38、則層不能出現(xiàn)在應(yīng)用樣式的右側(cè)。如果層在設(shè)置該樣式前已在元素的某側(cè)，而又設(shè)置了層不能出現(xiàn)在該側(cè)邊，則該元素會被將會自動移開,移動到層的下面。只有在被用于IMG標簽時，才會在Dreamweaver的文檔窗口中顯示該屬性。61網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院填充填充(Padding)(Padding)：定義元素的內(nèi)容和邊框之間的間距大小。該設(shè)置不會顯示在Dreamweaver的文檔窗口中。在“上”、“右”、“下”和“左”下拉列表框中設(shè)置對應(yīng)邊的空白大小。四邊可以相同，也可以不同。邊界：定義元素邊緣和其他元素之間的空間大小。只 有 在 被 應(yīng) 用 于 文 本

39、塊 一 類 的 元 素 時 ， 才 會 在Dreamweaver的文檔窗口中顯示該屬性?？煞謩e在“上”、“右”、“下”和“左”下拉列表框中設(shè)置對應(yīng)邊的空白大小。在其右側(cè)的下拉列表框中可選擇值的單位，四邊可以相同，也可以不同。62網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院六、定義邊框樣式六、定義邊框樣式在CSS規(guī)劃定義的分類列表中選擇“邊框”,主要用于設(shè)置表格、圖像框的邊框樣式。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院樣式（樣式（StyleStyle）：設(shè)置

40、邊框的樣式；“點劃線”表明邊框是點線形，“虛線”表明邊線是虛線形。通過上、右、下和左可以分別設(shè)置四個邊的風格，“全部相同”表示四邊邊框線的風格一致。寬度（寬度（WidthWidth）：定義應(yīng)用該樣式的元素邊框的寬度。細、中、粗和數(shù)值可以作為相應(yīng)的寬度選項。顏色（顏色（ColorColor）：可以設(shè)置邊框?qū)?yīng)位置的顏色。65網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院七、定義列表樣式七、定義列表樣式在CSS規(guī)劃定義的分類列表中選擇“列表”，主要用于設(shè)置文本列表的類型、列表項圖片等。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院網(wǎng)站建設(shè)網(wǎng)站

41、建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院類型（類型（List-style-typeList-style-type）：在下拉列表中，可以選擇無序列表或者有序項目的符號或編號的外觀類型。項目符號圖像（項目符號圖像（List-style-imageList-style-image）：可以設(shè)置以圖片作為列表項目的符號。通過直接在文本框中輸入圖片文件的URL地址，或單擊瀏覽按鈕，從磁盤上選擇圖片文件。位置（位置（List-style-positionList-style-position）：可以設(shè)置列表項換行時是縮進還是邊緣對齊。如選擇“內(nèi)”選項，則當列表過長而自動換行時，不縮進；

42、若選擇“外”選項，則當列表過長而自動換行時以縮進方式顯示。68網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院八、定義定位樣式八、定義定位樣式在CSS規(guī)劃定義的分類列表中選擇“定位”，主要用于精確控制網(wǎng)頁元素的位置，主要針對Ap div層的位置進行控制。提供網(wǎng)頁元件的相對位置或絕對位置的設(shè)置，甚至可以將兩個元件重疊在一起，使用“層”參數(shù)選擇定義層的默認標簽，將標簽或所選文本塊更改為新層。這部分參數(shù)被擴展成了DW中的層。 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院類

43、型（類型（PositionPosition）：在下拉列表中，可以選擇設(shè)置瀏覽器中分層的放置方式。“絕對”使用在Placement框中輸入的相對于頁面左上角的絕對坐標放置分層?！跋鄬Α笔褂迷赑lacement框中輸入的坐標放置分層，該坐標是相對于文檔中的對象位置。“固定”相對于瀏覽器容器來定位，固定定位的元素不會隨瀏覽器滾動條的滾動而變化?！办o態(tài)”將層定位在文本自身的位置。寬（寬（WidthWidth）和高（）和高（HeightHeight）：設(shè)置層的大小。71網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院溢出（溢出（OverflowOverflow） ：設(shè)置層內(nèi)容溢

44、出的處理方式。可見：當分層中的內(nèi)容超出分層的邊界時，分層會自動向下或向右擴展它的大小，以容納分層的內(nèi)容，使之可見。隱藏：當分層中的內(nèi)容超出分層的邊界時，分層大小不變，也不出現(xiàn)滾動條，超出邊界的內(nèi)容不顯示。滾動：無論分層中的內(nèi)容是否超出分層范圍，分層上總會出現(xiàn)滾動條，利用滾動條進行瀏覽。自動：在分層中的內(nèi)容超出分層的邊界時，出現(xiàn)滾動條以便顯示所有分層內(nèi)容。72網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院定位（定位（PlacementPlacement）：指定層的位置和大小。它的具體使用依賴于類型部分的設(shè)置，分為上、右、下和左四個部分。顯示（顯示（Visibility

45、Visibility） ：決定層的初始顯示狀態(tài)，如果沒有設(shè)置該屬性，在默認狀態(tài)下，大多數(shù)瀏覽器將繼承其上級的值。“繼承”繼承層的上一級的可見性屬性。“可見”顯示各個分層的內(nèi)容，而不考慮其上級元素?！半[藏”隱藏層的內(nèi)容，而不考慮其上級元素。73網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院Z Z軸（軸（Z-indexZ-index） ：在下拉列表中可以選擇定義分層的疊放順序。編號高的分層顯示在編號低的分層之上。其數(shù)值可以為正也可以為負。剪輯（剪輯（ClipClip） ：設(shè)置Apdiv層可見部分的位置和大小。定義可視區(qū)域的左上角和右下角的坐標。如 果 指 定 了 剪 輯

46、 區(qū) 域 ， 可 以 通 過 腳 本 語 言 如JavaScript來對其進行操作，例如可以輸入其屬性以創(chuàng)建特殊效果。74網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院九、定義擴展樣式九、定義擴展樣式在CSS規(guī)劃定義的分類列表中選擇“擴展”，主要用于控制鼠標指針形狀、圖片特殊效果、控制打印時的分頁以及為網(wǎng)頁元素添加濾鏡效果。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院分頁（分頁（Page-breakPage-break）：可以設(shè)置在打印頁面時強制分頁的位置。在“之前”（Page-break-beforePage-break-before

47、）和“之后” （Page-break-afterPage-break-after）的下拉列表中，可分別設(shè)置分頁前和分頁后的位置。此屬性只有4.0以上版本的瀏覽器支持。視覺效果：可以設(shè)置樣式的一些可視效果。光標（光標（CursorCursor）：用于設(shè)置當鼠標掠過被樣式控制的對象時的指針外觀。如選擇hand，鼠標指針會變?yōu)椤笆中巍?，只?.0及其以上版本的瀏覽器支持此屬性。76網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院過濾鏡（過濾鏡（FilterFilter）：在其下拉菜單中選擇需要的特效，對被樣式控制的對象指定特殊的效果，包括模糊和反轉(zhuǎn)，只有4.0及其以上版本的

48、瀏覽器支持此屬性。77網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院十、管理十、管理CSSCSS樣式樣式1 1、應(yīng)用自定義（、應(yīng)用自定義（ClassClass）CSSCSS樣式樣式將插入點置于欲設(shè)置CSS樣式的段落中或者在段落中選擇一個文本范圍，右擊選擇“CSS樣式”，再選擇某種已定義的格式。 也可以在菜單中選擇。或在屬性面板的或在屬性面板的“類類”列表中選擇。列表中選擇。78網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院2 2、將自定義樣式從選定內(nèi)容中刪除、將自定義樣式從選定內(nèi)容中刪除選中內(nèi)容，右擊選擇“CSS樣式”，再選擇“無”。3

49、3、創(chuàng)建和鏈接到外部、創(chuàng)建和鏈接到外部CSSCSS樣式表樣式表單擊附加樣式表按鈕，再選擇CSS樣式文件。4 4、編輯、編輯CSSCSS樣式樣式在CSS樣式面板中，雙擊欲修改的CSS樣式文件名稱。 79網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院例1：創(chuàng)建一個CSS文件，定義一個正文的格式，要求行首留兩字的空白，行間距為1.5倍，其它格式自定。新建CSS樣式，選擇“類（可應(yīng)用于任何HTML元素）”，保存樣式在zw.css樣式文件中。從創(chuàng)建一個樣式文件，定義一個樣式到應(yīng)用樣式的全過程演示一遍。80網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學

50、院設(shè)置CSS樣式內(nèi)容網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院設(shè)置行間距網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院83設(shè)置行首空白：兩個12磅字的空白。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院應(yīng)用：應(yīng)用：用剛才建立的ZW樣式，設(shè)置當前網(wǎng)頁中的不同位置上的一段文本。拓展：拓展：將剛才建立的ZW樣式，附加到另一個網(wǎng)頁中，再設(shè)置該網(wǎng)頁中的文本對象。修改：修改：修改ZW樣式中的文本顏色。查看兩個網(wǎng)頁中的表現(xiàn)情況，從而了解CSS的工作原理，體會其優(yōu)勢。84網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使用CSS樣式表2021年11月16日星期二教育學院例2：重定義單元格標簽。新建CSS樣式，先選中定義CSS的類型為“標簽（重新定義）”，再在其下方的下拉列表中選擇欲重新定義格式的標簽。保存樣式在table_td.css樣式文件中。85網(wǎng)站建設(shè)網(wǎng)站建設(shè)第9章使