HTML_CSS層疊樣式表

1、樣式表樣式表CSS層疊樣式表層疊樣式表一、什么是樣式表？樣式表是用于管理出版物外觀（背景、字體、顏色等）的一種方式，可以管理一個頁面乃至一個宏大的文檔集，它的實質(zhì)是使文檔的表現(xiàn)形式與文檔內(nèi)容分離。CSS層疊樣式表層疊樣式表二、層疊樣式表的特點1.可以將格式和內(nèi)容分離。2.可以以前所未有的能力控制頁面布局，如行距、字間距。3.可以制作體積更小，下載更快的網(wǎng)頁。4.可以將許多網(wǎng)頁同時更新，比以前更快更容易。5.瀏覽器的界面更友好。CSS層疊樣式表層疊樣式表三、層疊樣式表的類型。1.自定義層疊樣式表： 類用戶自己定義樣式類型，并指定到需要使用這種樣式的文字或段落上，如果定義在一整段文字上，則用標簽的

2、class屬性引用，定義在部分文字上用和引用。基本語法：.名稱定義樣式；說明：自定義層疊樣式表以“.”開頭，名稱為用戶自己定義，體中包括要定義的樣式，每種樣式以；結(jié)尾。CSS層疊樣式表層疊樣式表2.重定義標簽的層疊樣式表：標簽針對某一標簽定義層疊樣式表，定義的層疊樣式表將只應(yīng)用于選擇的標簽?；菊Z法：標簽名稱定義樣式；說 明：樣式表名稱與標簽同名，名稱前面不用加”.”，樣式列表以；分割。CSS層疊樣式表層疊樣式表3.層疊樣式表偽類選擇符層疊樣式表偽類選擇符為特殊的組合標簽定義層疊樣式表。它是一種特殊類型的樣式（常用的有4種）： A:link 設(shè)定正常狀態(tài)下鏈接文字的樣式 A:active 設(shè)定

3、鼠標單擊時鏈接的外觀 A:visited 設(shè)定訪問過的鏈接外觀 A:hover 設(shè)定鼠標放置鏈接文字之上時，文字的外觀。基本語法：a:link樣式列表；CSS層疊樣式表層疊樣式表四：層疊樣式表的基本寫法。1.在HEAD內(nèi)的實現(xiàn)層疊樣式表一般位于HTML文件的頭部，以開關(guān)，以結(jié)束。例： h1font-size:x-large;color:red CSS層疊樣式表層疊樣式表 2.在BODY內(nèi)的實現(xiàn)主要是在標記中引用，如3.在文件外的調(diào)用層疊樣式的定義既可以在HTML文檔內(nèi)部，也可以單獨成文件五層疊樣式的沖突，見書326頁豐富的樣式屬性豐富的樣式屬性v “CSS規(guī)則定義”對話框有8種模式：類型、背景

4、、區(qū)塊、方框、邊框、列表、定位和擴展，這些類型分別對應(yīng)著CSS語言的不同語法。 CSS類型類型v “類型”為瀏覽器窗口中頁面的字體指定外觀和設(shè)計。v CSS代碼實現(xiàn)代碼實現(xiàn)v Font-variant:small-caps; /設(shè)置英文大小寫轉(zhuǎn)換v Text-transform:capitalize; /控制英文文字大小寫v 1）使用font-variant屬性可以選擇所需字體的某種變形。這個屬性的默認值是normal，表示字體的常規(guī)版本。也可以指定small-caps來選擇字體的一個版本，在這個版本中，小寫字母都會被替換為不的大寫字母。CSS類型類型v 2）使用text-transform屬

5、性可以自動將文檔的部分或全部文本換成大寫或小寫字母。值如下：v Capitalize 將文本中每個單詞的第一個字母都顯示為大寫。即使源文檔的文本是小寫的。v Uppercase和lowercase值分別以相應(yīng)的狀態(tài)顯示所有文本。v None 會取消任何轉(zhuǎn)換。v Dreamweaver可視化實現(xiàn)可視化實現(xiàn)v “CSS規(guī)則定義”對話框左邊“分類”選框里選“類型”-字體，“變體”和“大小寫”中可以完成英文文字大小寫的設(shè)置-查看源碼。CSS邊框邊框v 邊框?qū)傩允且粋€用于設(shè)置一個元素邊框的寬度、式樣和顏色的略寫。v Border-width:4px; 邊框?qū)挾葀 Border-color:#0099FF

6、; 邊框顏色v Border-style:double; 邊框樣式，值包括none（默認），dotted，dashed，solid，double，groove，ridge，inset和outset。v Dreamweaver可視化實現(xiàn)可視化實現(xiàn)v .img樣式-邊框-寬度，顏色-查看源碼。CSS區(qū)塊區(qū)塊v CSS代碼實現(xiàn)代碼實現(xiàn)v Word-spaing:2em; 定義一個附加在單詞之間的間隔數(shù)量v Text-align:center; 設(shè)置文本的水平對齊方式，包括左對齊，右對齊，居中，兩端對齊。v Text-indent:1em; 文字的首行縮進v 1）使用word-spacing屬性可在一

7、個標簽內(nèi)的之間添加空格，可以指定一個長度值，或者用關(guān)鍵字normal來恢復(fù)到正常字間距。v 2）text-align的4個值：left right center justifyv Dreamweaver可視化實現(xiàn)可視化實現(xiàn)v 區(qū)塊-“單詞間距”“文本對齊”“縮進”-查看源碼。CSS方框方框v 2）clear屬性設(shè)置每節(jié)的第一個元素，以禁止浮動元素在它的旁邊出現(xiàn)，如果它被設(shè)置為與浮動元素相鄰則它下沉至低于浮動元素為止。v 3）不同的padding屬性控制不同元素周圍的補白區(qū)域，也就是元素內(nèi)容區(qū)和邊框之間的區(qū)域。Padding-left，padding-right，padding-top和padd

8、ing-boton屬性都接受長度或百分比值，指定元素周圍要保留多少空白。v Dreamweaver可視化實現(xiàn)可視化實現(xiàn)v Img樣式-方框-“寬”“高”“浮動”“清除”“邊界”設(shè)置空間-查看源碼。CSS方框方框v CSS代碼實現(xiàn)代碼實現(xiàn)v Float:right; 讓文字環(huán)繞在一個元素的四周v Clear:right; 指定在某一個元素的某一邊是否允許有環(huán)繞的文字和對象。v Width:400px; 設(shè)置對象的寬度v Height:400px; 設(shè)置對象的高度v Padding:20px; 決定了究竟在邊框與內(nèi)容之間應(yīng)該插入多少空間距離。v 1）float屬性將標簽的顯示空間指定為一個浮動元素

9、并使文本按一定方式環(huán)繞它排列。總的說來，它與圖像和表格的align屬性類似，但可以用到任何元素上，float屬性接受以下3個值之一：left，right和none（默認值）。CSS擴展擴展v CSS代碼實現(xiàn)代碼實現(xiàn)v Cursor:wait; 設(shè)定鼠標光標，當將鼠標移動到鏈接上時，可以看到多種不同的效果。v CSS擴展設(shè)置影響著3個不同的領(lǐng)域：打印分布，用戶的指針和濾鏡。v Dreamweaver可視化實現(xiàn)可視化實現(xiàn)v Body樣式-擴展-“光標”改變鼠標形狀-查看源碼。v v v CSS列表列表v CSS代碼實現(xiàn)代碼實現(xiàn)v List-style-type:disc; 設(shè)置引導(dǎo)列表項目的符號類型，決定了有序和無序