網(wǎng)頁(yè)美化_DIV層_CSS樣式.ppt

DIV層運(yùn)用 CSS樣式 主講 夏琳 CSS樣式基本介紹 1 什么是CSS樣式2 CSS樣式表的功能3 CSS的語(yǔ)法4 CSS樣式在網(wǎng)頁(yè)中的四種存在5 CSS樣式面板6 CSS樣式實(shí)例 什公是CSS樣式 CSS是 Cascadingstylesheet 的縮寫(xiě) 中文譯為層疊樣式表 是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言 是對(duì)HTML語(yǔ)法的革新 CSS簡(jiǎn)化了HTML中各種繁瑣的標(biāo)簽 使各標(biāo)簽的屬性更具一般性和通用性 擴(kuò)充原來(lái)的功能 簡(jiǎn)單的說(shuō)CSS的引入就是為了使得HTML能夠更好的適應(yīng)頁(yè)面的美工設(shè)計(jì) CSS樣式表的功能 可以靈活地控制網(wǎng)頁(yè)中文字的字體 顏色 大小 間距 風(fēng)格及位置 可以靈活地設(shè)置一個(gè)文本塊的行高 縮進(jìn) 并可以加入三維效果的邊框 CSS以HTML為基礎(chǔ) 提供了豐富的格式化功能 如字體 顏色 背景 整體排版等等 CSS樣式表的優(yōu)點(diǎn) CSS使頁(yè)面載入更快 CSS可以降低網(wǎng)站的流量 CSS使設(shè)計(jì)師在修改設(shè)計(jì)時(shí)更有效率 而代價(jià)更低 CSS使整個(gè)站點(diǎn)保持視覺(jué)的一致性 CSS使站點(diǎn)可以更好地被搜索引擎找到 CSS使站點(diǎn)對(duì)瀏覽者和瀏覽器更具親和力 掌握CSS可以提高設(shè)計(jì)師的職場(chǎng)競(jìng)爭(zhēng)力 CSS的語(yǔ)法 CSS的定義是由三個(gè)部分構(gòu)成 選擇符 selector 屬性 properties 和屬性的取值 value 基本格式如下 selector property value 選擇符 屬性 值 其中 HTML標(biāo)簽不帶尖括號(hào) 標(biāo)簽屬性 屬性值參數(shù)是一一對(duì)應(yīng)的 每個(gè)屬性與屬性值之間用分號(hào)隔開(kāi) 屬性名由兩個(gè)或兩個(gè)以上的單詞構(gòu)成時(shí) 單詞之間以 隔開(kāi) 基本語(yǔ)法 P font family 宋體 font size 9pt color 000000 Td font family 楷體 font size 20pt font style italic font weigh 800 text decoration blink color 000000 標(biāo)記選擇符HTML標(biāo)記選擇符是對(duì)頁(yè)面中的同一類(lèi)HTML元素采用同一樣式的設(shè)置 使其風(fēng)格一致 格式 HTML標(biāo)記 CSS樣式屬性 取值 CSS樣式屬性 取值 例如 要使頁(yè)面中應(yīng)用了標(biāo)記的文字全部呈現(xiàn)紅色 可這樣設(shè)置 文字內(nèi)容文字內(nèi)容文字內(nèi)容 P font family 宋體 font size 9pt line height 12pt color 00000 Td font family 楷體 GB2312 font size 20pt font style italic A hover background color ffccff color ff6666 text decortion underline float left A link color ff33ff text decoration none A visited color 6600ff text decorton none A active color green text decoration none background color ffcc99 類(lèi)選擇符你能夠把相同的元素分類(lèi)定義不同的樣式 定義類(lèi)選擇符時(shí) 在自定類(lèi)的名稱(chēng)前面加一個(gè)點(diǎn)號(hào) 假如你想要兩個(gè)不同的段落 一個(gè)段落向右對(duì)齊 一個(gè)段落居中 你可以先定義兩個(gè)類(lèi) p right text align right p center text align center 然后用不在不同的段落里 只要在HTML標(biāo)記里加入你定義的class參數(shù) 這個(gè)段落向右對(duì)齊的這個(gè)段落是居中排列的注意 類(lèi)的名稱(chēng)可以是任意英文單詞或以英文開(kāi)頭與數(shù)字的組合 一般以其功能和效果簡(jiǎn)要命名 2 類(lèi)選擇符 類(lèi)選擇符還有一種用法 在選擇符中省略HTML標(biāo)記名 這樣可以把幾個(gè)不同的元素定義成相同的樣式 center text align center 定義 center的類(lèi)選擇符為文字居中排列 這樣的類(lèi)可以被應(yīng)用到任何元素上 下面我們使h1元素 標(biāo)題1 和p元素 段落 都?xì)w為 center 類(lèi) 這使兩個(gè)元素的樣式都跟隨 center 這個(gè)類(lèi)選擇符 這個(gè)標(biāo)題是居中排列的這個(gè)段落也是居中排列的注意 這種省略HTML標(biāo)記的類(lèi)選擇符是我們經(jīng)后最常用的CSS方法 使用這種方法 我們可以很方便的在任意元素上套用預(yù)先定義好的類(lèi)樣式 HTML頁(yè)面中ID參數(shù)指定了某個(gè)單一元素 ID選擇符是用來(lái)對(duì)這個(gè)單一元素定義單獨(dú)的樣式 ID選擇符的應(yīng)用和類(lèi)選擇符類(lèi)似 只要把CLASS換成ID即可 將上例中類(lèi)用ID替代 這個(gè)段落向右對(duì)齊定義ID選擇符要在ID名稱(chēng)前加上一個(gè) 號(hào) 和類(lèi)選擇符相同 定義ID選擇符的屬性也有兩種方法 下面這個(gè)例子 ID屬性將匹配所有id intro 的元素 intro font size 110 font weight bold color 0000ff background color transparent 字體尺寸為默認(rèn)尺寸的110 粗體 藍(lán)色 背景顏色透明 3 ID選擇符 下面這個(gè)例子 ID屬性只匹配id intro 的段落元素 p intro font size 110 font weight bold color 0000ff background color transparent 注意 ID選擇符局限性很大 只能單獨(dú)定義某個(gè)元素的樣式 一般只在特殊情況下使用 4 選擇符組你可以把相同屬性和值的選擇符組合起來(lái)書(shū)寫(xiě) 用逗號(hào)將選擇符分開(kāi) 這樣可以減少樣式重復(fù)定義 h1 h2 h3 h4 h5 h6 color green 這個(gè)組里包括所有的標(biāo)題元素 每個(gè)標(biāo)題元素的文字都為綠色 p table font size 9pt 段落和表格里的文字尺寸為9號(hào)字 效果完全等效于 p font size 9pt table font size 9pt 你可以在CSS中插入注釋來(lái)說(shuō)明你代碼的意思 注釋有利于你或別人以后編輯和更改代碼時(shí)理解代碼的含義 在瀏覽器中 注釋是不顯示的 CSS注釋以 開(kāi)頭 以 結(jié)尾 如下 定義段落樣式表 p text align center 文本居中排列 color black 文字為黑色 font family arial 字體為arial 5 注釋 CSS樣式在網(wǎng)頁(yè)中的三種存在方式 1 外部文件方式 外聯(lián)樣式表 CSS以文件的形式存在 在HTML文檔頭通過(guò)文件引用進(jìn)行控制 CSS文件的引用是在標(biāo)簽之間寫(xiě)下列語(yǔ)句 2 內(nèi)嵌樣式不以文件的形式存在 僅作用于本文檔 直接定義在之間 3 直接插入式 行內(nèi)樣式 只需要在每個(gè)HTML標(biāo)簽后書(shū)寫(xiě)CSS屬性 作用范圍只限于本標(biāo)簽 在統(tǒng)一站點(diǎn)風(fēng)格上 用第一方式 在某個(gè)網(wǎng)頁(yè)風(fēng)格統(tǒng)一上 用第二種方式 而在網(wǎng)頁(yè)內(nèi)部某個(gè)標(biāo)簽的具體調(diào)整上 用第三種方式 4 導(dǎo)入式樣式 導(dǎo)入樣式表和外聯(lián)樣式表在概念上類(lèi)似 都是將多個(gè)頁(yè)面所共用的CSS單獨(dú)保存在一個(gè)CSS文件中 在HTML頁(yè)面的部分調(diào)用這個(gè)文件 不同的是導(dǎo)入樣式表形式上有點(diǎn)像外聯(lián)樣式來(lái)得及和內(nèi)嵌樣式表的結(jié)合 與外聯(lián)樣式表的區(qū)別是導(dǎo)入樣式表在瀏覽器解釋HTML代碼是將外部CSS文件中的內(nèi)容全部調(diào)入給頁(yè)面中 而外聯(lián)樣式表則不將外部CSS文件中的內(nèi)容調(diào)入給頁(yè)面中 而只在調(diào)用到該樣式時(shí)才在外部CSS文件中調(diào)用該樣式的定義 格式 1 顯示 CSS樣式 面板的方式 打開(kāi) 窗口 菜單 CSS 樣式 2 樣式視圖 CSS樣式面板 在Type里有三種樣式表類(lèi)型可供選擇 lMakeCustonStyle class 創(chuàng)建自定義樣式 自定義一個(gè)樣式 可以作為class屬性應(yīng)用于頁(yè)面中 2RedefineHTMLTag 重定義HTML標(biāo)記 對(duì)指定的HTML標(biāo)記的默認(rèn)格式進(jìn)行重新定義 3UseCSSSelector 使用CSS選擇符 對(duì)特定的標(biāo)簽組合 或者包含有指定ID屬性的所有標(biāo)簽進(jìn)行格式定義 創(chuàng)建自定義樣式 名稱(chēng)須以 開(kāi)頭 可應(yīng)用到任何范圍 重定義HTML標(biāo)簽 將擴(kuò)充某個(gè)HTML標(biāo)簽的功能 使用CSS選擇器 重新定義一些標(biāo)簽的特定組合格式 外部 將以文件的形式存在 僅對(duì)該文檔 內(nèi)嵌式樣式 在Dreamweaver的CSS樣式里包含了W3C規(guī)范定義的所有CSS1的屬性 Dreamweaver4把這些屬性分為T(mén)ype 類(lèi)型 Background 背景 Block 塊 Box 盒子 Border 邊框 List 列表 Positioning 定位 Extensions 擴(kuò)展 八個(gè)部分 如左圖 下面我們分別詳細(xì)講解 CSS提供了一些內(nèi)置的多媒體濾鏡特效 使用這種技術(shù)可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上 例如圖片 文本容器 以及其他一些對(duì)象 Dreamweaver4提供了16種濾鏡可供選擇 如下圖 創(chuàng)建新的CSS樣式創(chuàng)建新的CSS樣式的步驟如下 1 將添加點(diǎn)放在文檔中 然后執(zhí)行以下操作之一打開(kāi) 新建CSS樣式 對(duì)話框 2 定義CSS樣式的類(lèi)型 3 選擇定義樣式的位置 4 單擊 確定 出現(xiàn) CSS樣式定義 對(duì)話框 5 選擇要為新CSS樣式設(shè)置的樣式選項(xiàng) 6 設(shè)置完樣式屬性后 單擊 確定 CSS樣式實(shí)例 內(nèi)嵌樣式 內(nèi)嵌式樣式 InlineStyle 這個(gè)內(nèi)嵌樣式 InlineStyle 定義段落里面的文字是20pt字體 字體顏色是紅色 這段文字沒(méi)有使用內(nèi)嵌樣式 CSS樣式實(shí)例 內(nèi)部樣式表 H1 mylayout border width 1 border solid text align center color red 這個(gè)標(biāo)題使用了Style 這個(gè)標(biāo)題沒(méi)有使用Style CSS樣式實(shí)例 內(nèi)部樣式表 GenericClassSelector center text align center 這個(gè)標(biāo)題居中顯示 這個(gè)段落居中顯示 CSS樣式實(shí)例 外部樣式表 這個(gè)標(biāo)題使用了Style 這個(gè)標(biāo)題沒(méi)有使用Style CSS樣式實(shí)例 背景顏色屬性 背景顏色background colorbody background color 99FF00 這個(gè)HTML使用了CSS的background color屬性 將HTML的背景顏色變成翠綠色 CSS樣式實(shí)例 背景重復(fù)屬性 背景重復(fù)background repeatbody background image url images css tutorials background jpg background repeat repeat y 這個(gè)HTML使用了CSS的background repeat屬性 使背景圖片豎向重復(fù) 常用的background repeat的屬性值有 repeat x 橫向重復(fù) repeat Y 橫向重復(fù) no repeat 不重復(fù) background repeat屬性要和background image一起用 CSS樣式實(shí)例 邊距屬性 CSS邊距屬性margin D1 border 1pxsolid FF0000 D2 border 1pxsolidgray D3 margin 0 5cm1cm2 5cm1 5cm border 1pxsolidgray 沒(méi)有margin上面兩個(gè)div沒(méi)有設(shè)置邊距屬性 margin 僅設(shè)置了邊框?qū)傩?border 外面那個(gè)div的border設(shè)為紅色 里面那個(gè)div的border屬性設(shè)為灰色 和上面兩個(gè)div的CSS屬性設(shè)置不同的是 下面兩個(gè)div中 里面的那個(gè)div設(shè)置了邊距屬性 margin 設(shè)定上邊距為0 5cm 右邊距為1cm 下邊距為2 5cm 左邊距為1 5cm 上下左右邊距寬度各不同 CSS樣式實(shí)例 文本修飾屬性 文本修飾屬性text decoration p1 text decoration none p2 text decoration underline p3 text decoration line through p4 text decoration overline 文本修飾屬性 text decoration 的缺省值是none 這段的文本修飾屬性 text decoration 值是underline 這段的文本修飾屬性 text decoration 值是line through 這段的文本修飾屬性 text decoration 值是overline CSS樣式實(shí)例 文本縮進(jìn)屬性 文本縮進(jìn)屬性text indent p1 text indent