DW第八講 CSS樣式

1、主要內(nèi)容(P107)CSS簡介創(chuàng)建編輯調(diào)用外部樣式表第十二講 CSS樣式*1CSS簡介CSS: Cascading Style Sheets 層疊樣式表/級聯(lián)樣式表作用: 定義網(wǎng)頁元素的樣式.可以定義文本的字體、字號、對齊等樣 式，還可定位一些特殊的HTML的屬性，如濾鏡、特效等。2創(chuàng)建1. 打開CSS樣式面板(Shift+F11)2. 單擊”新建”按鈕3(1). 自定義樣式: 作用:定義某個特定對象的樣式,如一段文本的大小,首行縮進(jìn),行距,光標(biāo)樣式,濾鏡效果等. 步驟:在名字輸入框中輸入.name在彈出的樣式表屬性定義對話框中設(shè)置.設(shè)置完成后在樣式面板上會出現(xiàn)此樣式名稱.應(yīng)用: 選中要應(yīng)用樣

2、式的對象,單擊面板上的樣式名即可. 掌握：文字常用9pt大小,20px間距(類型/大小、行高)精確首行縮進(jìn)(區(qū)塊/文字縮進(jìn))注意:只能在一個具體空間內(nèi)部(如在一個單元格或?qū)觾?nèi))的全體文本上,或者是一段文本()才能應(yīng)用.光標(biāo)/濾鏡(擴(kuò)展/光標(biāo)、過濾器)4（2）重定義HTML標(biāo)簽： 作用：對HTML標(biāo)簽的重新定義。 步驟：在標(biāo)簽列表中選擇要重新定義的標(biāo)簽在彈出的樣式表屬性定義對話框中設(shè)置.設(shè)置完成后自動應(yīng)用。名稱不會出現(xiàn)在樣式面板上。 掌握：背景圖像平鋪問題（重定義標(biāo)簽）表單元素樣式（)表格()、圖像等。5（3）使用CSS選擇器 作用：實現(xiàn)超級鏈接的樣式重新定義 超級鏈接的四個狀態(tài)：a:link

3、-沒訪問的超級鏈接的狀態(tài)a:hover-鼠標(biāo)經(jīng)過超級鏈接時的狀態(tài)a:active-正在單擊超級鏈接時的狀態(tài)a:visited-訪問過的超級鏈接的狀態(tài) 步驟：在名字輸入框中選擇狀態(tài)在彈出的樣式表屬性定義對話框中設(shè)置.設(shè)置完成后自動應(yīng)用。名稱不會出現(xiàn)在樣式面板上.6元素說明BODY網(wǎng)頁文檔的主體元素，所有的可見范圍都在元素內(nèi)BUTTON表單域的按鈕，可以有“發(fā)送(submit)”、“重置(reset)”等形式DIV定義了網(wǎng)頁上的一個區(qū)域，這個區(qū)域的高度、寬度或者絕對位置都是以知的IMG圖片元素，通過指定“src屬性來指定圖片的來源INPUT輸入表單域MARQUEE移動字幕效果SPAN定義了網(wǎng)頁上的

4、一個區(qū)域，這個區(qū)域的高度、寬度或者絕對位置都是以知的TABLE表格TD表格數(shù)據(jù)單元格TEXTAREA文本區(qū)域TFOOT多行輸入文本框TH表格標(biāo)題單元格THEAD表格標(biāo)題TR表格行IE4.0以上支持的濾鏡屬7樣式問題編輯樣式：在CSS樣式面板中，單擊“編輯樣式”按鈕，顯示樣式編輯窗口，選擇要編輯的樣式雙擊即可。樣式?jīng)_突：（P112）當(dāng)兩種樣式作用于同一個對象，且樣式設(shè)置不同時，會產(chǎn)生沖突。沖突時，顯示最內(nèi)部的樣式CSS樣式高于HTML樣式。8注意問題應(yīng)用：一篇網(wǎng)頁文檔可以先設(shè)置標(biāo)簽樣式，指定文字樣式 （固定大小、顏色、行距等）其次可指定（)標(biāo)簽樣式，進(jìn)一步指定表格中 文字的樣式。如果某些網(wǎng)頁元素

5、有具體要求，可重定義其標(biāo)簽。指定超級鏈接的樣式當(dāng)有網(wǎng)頁元素（如某段文本）有特殊要求時(如顏色).可直 接在屬性檢查器中修改.當(dāng)有網(wǎng)頁元素（如某段文本）有特殊要求時(如大小)，可 為其定義自定義樣式，只對此處應(yīng)用。9調(diào)用外部樣式表意義調(diào)用在其它頁面中已經(jīng)建好的樣式表,使整個網(wǎng)站風(fēng)格統(tǒng)一（如每個頁面都是一樣的字體、鏈接效果等）設(shè)置1. 先建立外部樣式表(只有外部樣式表才能被其他頁面調(diào)用) 建立新的樣式時,選擇“新建樣式表文件”,并在站點中保存此樣式. 將已建立的只在本文檔中使用的樣式導(dǎo)出成外部樣式表. 選中樣式,右擊/導(dǎo)出樣式表,然后保存.2. 調(diào)用打開CSS樣式面板,單擊“附加”樣式表按鈕,瀏覽選擇外部樣式表文件.調(diào)用的樣式表使用方法與本頁面樣式相同.注意:建立樣式表前