網頁美化_DIV層_CSS樣式.ppt

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