【正文】 第五章 樣式表 統(tǒng)一網(wǎng)站風(fēng)格、制作基本特效1Inter與網(wǎng)頁設(shè)計主要內(nèi)容252。一、樣式表 (CSS)的基本概念252。二、 CSS與 HTML文檔的結(jié)合方法252。三、 CSS屬性的理解與應(yīng)用252。四、 CSS樣式的單位252。五、 CSS樣式在網(wǎng)頁中的應(yīng)用252。六、 CSS的高級應(yīng)用2Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?一、 CSS的基本概念252。編寫 CSS樣式的方法?使用 CSS編輯器216。如 Dreamweaver、 Frontpage等都會自帶 CSS編輯器。 ?使用超文本編輯器216。如 Dreamweaver、 Frontpage等超文本編輯器均可編輯樣式表；216。記事本3Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?一、 CSS的基本概念252?；菊Z法選擇符 {屬性 : 值 }選擇符 {屬性 1: 值 1。 屬性 2: 值 2 。…… }單一選擇符的復(fù)合樣式聲明應(yīng)該用 “?！备糸_，為便于閱讀也可以 分行寫 。 幾乎所有的 HTML標(biāo)記符形式都可以作為選擇符。 HEADTITLECSS例子 /TITLESTYLE TYPE=“text/css”H1{ fontsize:xlarge。 color:red}H2{ fontsize:large。 color:blue}/STYLE/HEADH1{ fontsize:xlarge。 color:red}size:large。 }4Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?一、 CSS的基本概念252。 CSS樣式的組合、繼承和關(guān)聯(lián)性u樣式的組合：把具有 相同聲明定義的選擇符 組合在一起，并用逗號隔開。－例如： 段落元素 p、 單元格元素 td和類 c1可以使用相同樣式：p,td,.c1{fontsize:12pt。fontfamily:黑體 。color:red}5Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?一、 CSS的基本概念?樣式的繼承：若子元素未定義，則它將繼承上級元素的樣式的定義。但存在少數(shù)屬性不能繼承，見 P119。HEADTITLECSS例子 /TITLEstyle!p{color:red。fontsize:20px。fontfamily:華文仿宋 , Comic Sans MS}b{textdecoration:underline}/style/HEAD 6Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?一、 CSS的基本概念?樣式表的 關(guān)聯(lián)性 ：– 樣式表的關(guān)聯(lián)性指在某些樣式定義中，可以定義某樣式僅 在某個特定元素范圍內(nèi) 才有效。– 例如：p b{fontsize:12pt。fontfamily:黑體 。color:red}b元素僅在 p元素作用范圍內(nèi)會套用上述的樣式設(shè)定。 而在其他地方不具有這些屬性。 7Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?一、 CSS的基本概念252。注釋216。 CSS文字的注釋形式與 C語言類似。p{fontsize:12pt} /*P標(biāo)簽的樣式定義 */8Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?一、 CSS的基本概念252。選擇符216。 樣式表的基本語法形式：selector{property1:value1。 property2:value2?！瓆需要應(yīng)用的樣式的內(nèi)容樣式的屬性 樣式的屬性的值Select的五種合法的類別： HTML標(biāo)記符 、 用戶定義的類Class、 用戶定義的 ID、 虛類 和 虛元素 P1199Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?選擇符的類別252。HTML標(biāo)記符216。應(yīng)用比較多，注意繼承性、組合性和關(guān)聯(lián)性（ P119） 的應(yīng)用。u用戶定義的類選擇符u可以使用任何名稱命名類。ubody里所有的元素都可以定義 “類 ”。u語法如下：{property1:value1。 property2:value2。… }.classname{property1:value1。 property2:value2?！?}例例 兩種定義形式的區(qū)別？在標(biāo)簽中使用類選擇符樣式的使用方式如何？10Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?選擇符的類別252。ID選擇符216。應(yīng)用的形式基本與類選擇符類似，定義時用 “”替代 ”.”。216。因此應(yīng)用時一般選取其中的一種。見 P120例子。u虛類和虛元素u在 html的頁面元素中沒有這種屬性，故稱其為虛類，僅在 。u語法如下：頁面元素名：元素虛屬性名 {樣式表內(nèi)容 }11Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?a:link {color: 000000}a:visited {color: cccccc}a:hover {color: 000000。 fontstyle:italic}a:active {color: aaaaaa}:link {color: 000000}:visited {color: cccccc}:hover {color: 000000。 fontstyle:italic}:active {color: aaaaaa}例例 12Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?二、 CSS與 HTML文檔的結(jié)合方法252。HTML與樣式表有多種結(jié)合方法– 內(nèi)聯(lián)樣式 ：在 head標(biāo)記符內(nèi)定義– 外聯(lián)樣式?使用 link標(biāo)記符鏈接到外部的樣式文件?使用 CSS的 @import標(biāo)記符來導(dǎo)入樣式文件– 在 HTML標(biāo)簽中直接加入樣式表的定義 。13Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?二、 CSS與 HTML文檔的結(jié)合方法252。內(nèi)聯(lián)樣式：在 head標(biāo)記符內(nèi)定義，在本網(wǎng)頁內(nèi)起作用。headstyle type=text/css“ media=“screen”!body{ color:green }/style/head14Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?二、 CSS與 HTML文檔的結(jié)合方法252。外聯(lián)樣式： 使用 link標(biāo)記符 鏈接到外部的樣式文件，凡鏈接的網(wǎng)頁都起作用– 定義外部樣式文件，用記事本或者Dreamweaver， 編輯完后文件擴(kuò)展名應(yīng)為 ”.css”；– 建立 HTML網(wǎng)頁文檔；– 在網(wǎng)頁文檔中使用 link標(biāo)簽將前面的樣式表文檔鏈接到網(wǎng)頁中。headlink rel=“stylesheet” href=“” type=“text/css”/head例例 15Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?二、 CSS與 HTML文檔的結(jié)合方法252。外聯(lián)樣式： 使用 @import導(dǎo)入 外部的樣式文件，凡在導(dǎo)入該樣式表的網(wǎng)頁都起作用– 定義外部樣式文件，用記事本或者Dreamweaver， 編輯完后文件擴(kuò)展名應(yīng)為 ”.css”；– 建立 HTML網(wǎng)頁文檔；– 在網(wǎng)頁文檔中 @import導(dǎo)入 前面的樣式表。headstyle! @import url(“”)。 /style/head例例 16Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?二、 CSS與 HTML文檔的結(jié)合方法252。在 HTML標(biāo)簽中直接加入樣式表的定義– 若在個別標(biāo)簽需要作樣式調(diào)整，可使用這種方式。– 使用標(biāo)簽的 “Style”屬性來定義樣式。p style=backgroundcolor:FFFF66。 textdecoration:underline被定義的樣式文本在此處。/p例例 17Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?三、 CSS屬性的理解與應(yīng)用252。樣式表的 5類常用屬性：詳見 P126– 字體屬性 P126： 字體、字號、行距等。– 顏色及背景屬性 P127： 背景顏色、背景圖片等。– 文本屬性： P128– 區(qū)塊屬性 P128： 邊框粗細(xì)等。– 分級屬性 P128： 各組件的字距、行距、縮排等。– 鼠標(biāo)屬性 P130： 鼠標(biāo)形狀等。– 詳見幫助文件CSS屬性屬性 18Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?字體屬性252。Fontfamily:指定文字的字體– H1{fontfamily:華文彩云 }252。Fontstyle： 指定文字是否加粗或使用斜體。取值：normal（ 正常）、 oblique（ 偏斜體）、 italic（ 斜體）252。Fontsize： 指定文字的大小。252。Font： 上述樣式屬性的綜合表示法。– P{font: bold 16pt}19Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?顏色及背景屬性252。Color:顏色252。Backgroundcolor： 指定背景顏色– H1{backgroundcolor:000800}252。Backgroundimage： 指定 Html組件的背景圖片，值為 url或 none。– Body{backgroundimage:url()}20Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?文本屬性252。Textdecoration： 設(shè)置底線、頂線、閃爍等文字效果。值為 none,underline,overline,linethrough,blink.252。Textalign： 指定文字的對齊方式。值為：left,right,center,justify21Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?區(qū)塊屬性252。定義邊界，取值為：長度 |百分比 |auto– 上邊界： margintop； 下邊界： marginbottom– 左邊界： marginleft： 右邊界： marginright– { marginright: 50% } 252。定義邊框：– Bordercolor– Borderwidth– Borderstyle22Inter與網(wǎng)頁設(shè)計 CSS樣式表樣式表 ?分級屬性252。Liststyletype： 指定項(xiàng)目符號或編號– 允許值： disc | circle | square | decimal | lowerroman | upperroman | loweralpha | upperalpha | none 252。Liststyle