div+css經(jīng)典二.ppt

1、DIV+CSS入門經(jīng)典文本、圖片和背景,1.CSS控制文字 2.Css控制圖片 3.網(wǎng)頁背景設(shè)置,1.背景偏移 2.綜合設(shè)計(jì)應(yīng)用圖文效果,重點(diǎn),難點(diǎn),文本,一 font-family（字體） -3-1.html 說明： (1) 當(dāng)指定了字體類型時(shí)，瀏覽器將調(diào)用客戶端字體 (2 )當(dāng)指定了多種字體時(shí)，瀏覽器會(huì)安順序進(jìn)行搜索，如果沒有搜索到，就 使用默認(rèn)字體。 二 font-size（大?。?3-2.html 3-22.html (1)medium 標(biāo)準(zhǔn)字體大小 (2)small 比父字體小一號(hào)的字 (3)x-small 比small小1.2倍的字 (4)xx-small 比x-small小1.2

2、倍的字 (5)large 比父字體大一號(hào)的字 (6)x-large 比large大1.2倍的字 (7)xx-large 比x-large大1.2倍的字,文本,(8)整數(shù)符號(hào)單位,符號(hào)單位有：象素px，點(diǎn)數(shù)pt，英寸in，毫米mm等 (9)整數(shù)+%,表示當(dāng)前字體大小是父字體大小的百分比(相對(duì)字體實(shí)用技巧) 3-3.html,文本,三 字體顏色 color 3-5.html 語法：color: 數(shù)值 作用：字體顏色 說明：顏色參數(shù)取值范圍 以RGB值表示 如：#ff0000 以默認(rèn)顏色的英文名稱表示 如red,文本,四 font-weight（粗細(xì)） 3-6.html 語法：font-weight

3、:100-900|bold|bolder|lighter|normal 說明：瀏覽器默認(rèn)的字體粗細(xì)為400。 (1)bold 表示黑體字(相當(dāng)于數(shù)值700 ) (2)bolder 表示比黑體還要黑的字 (3)lighter 表示比黑體顏色要淺 (4)normal 正常體(相當(dāng)于數(shù)值400) (5)可以指定100-900之間的3位整數(shù),400表示正常 (6) inherit:繼承,文本,五 字體風(fēng)格 (font-style） 3-7.html 語法：font-style:inherit|italic|normal|oblique 說明： (1)inherit繼承，表示該屬性從父標(biāo)簽中繼承而來。

4、(2)italic 斜體，表示使用斜體顯示文字。 (3)normal 正常，為默認(rèn)值。 (4)oblique偏斜體，表示有點(diǎn)傾斜但不大。 注意:italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣,文本,六 文本修飾(text-decoration) 3-8.html 3-88.html,文本,七 大小寫轉(zhuǎn)換(text-transform) 3-9.html capitalize: 首字母大寫 uppercase: 大寫 lowercase: 小寫 none: 正常無變化 inherit: 繼承,文本,八 letter-spacing （字符間距） 3-10.html 該屬

5、性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符 框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔。因此，normal就相當(dāng) 于值為0。 注釋：允許使用負(fù)值，這會(huì)讓字母之間擠得更緊。,文本,九 text-align （對(duì)齊） 3-11.html 該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符 框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔。因此，normal就相當(dāng) 于值為0。 注釋：允許使用負(fù)值，這會(huì)讓字母之間擠得更緊。,文本,十 垂直對(duì)齊方式(vertical-align) 3-12.html 3-122.html 3-1222.html,文本,十一 line

6、-height （行高） 3-13.html 相對(duì)比例,css圖片效果,4-110.html 理解記憶,頁面背景,背景屬性： background （縮寫形式） background-color（背景色 ） background-image（背景圖 ） background-repeat（背景圖重復(fù)方式 ） background-position（位置坐標(biāo)、偏移量）,頁面背景,background-color（背景色 ） a.基本表現(xiàn) 51.html b.利用背景顏色給頁面分塊 5-2.html,頁面背景,background-image（背景圖） a.基本表現(xiàn) 53.html b.背景圖片和

7、背景顏色同時(shí)使用 5-4.html,頁面背景,background-repeat（背景圖重復(fù)方式 ） a.垂直方向重復(fù) 55.html b.水平方向重復(fù) 5-6.html c.不重復(fù) 5-7.html d.同時(shí)重復(fù) repeat-xy.html,頁面背景,background-position（位置坐標(biāo)、偏移量）兩個(gè)值即可決定 a.背景位置(方向) 58.html b.背景位置(具體數(shù)值) 5-9.html background-position 屬性提供值有很多方法。首先，可以使用一些關(guān)鍵 字：top、bottom、left、right 和 center。還可以使用長(zhǎng)度值，如 100px 或

8、 5cm，最后也可以使用百分?jǐn)?shù)值。,頁面背景,關(guān)鍵字: 根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過兩個(gè)關(guān)鍵字 - 一個(gè)對(duì)應(yīng)水平方向，另一個(gè)對(duì)象垂直方向。 如果只出現(xiàn)一個(gè)關(guān)鍵字，則認(rèn)為另一個(gè)關(guān)鍵字是 center,頁面背景,百分?jǐn)?shù)值: background-position:50% 50%; 如果圖像位于 0% 0%，左上角。如果圖像位置是 100% 100%，右下角。 如果你想把一個(gè)圖像放在水平方向 2/3、垂直方向 1/3 處，可以這樣聲明 ： body background-image:url(/i/eg_bg_03.gi); background-repeat:no-repe

9、at; background-position:66% 33%; ,頁面背景,長(zhǎng)度值: body background-image:url(/i/eg_bg_03.gif); background-repeat:no-repeat; background-position:50px 100px; ,背景屬性的經(jīng)典應(yīng)用3-2,1 .設(shè)置三個(gè)標(biāo)簽（如div）的背景為同一圖片背景,2 .考慮“購(gòu)物車”、“幫助中心”圖標(biāo)的坐標(biāo)偏移量是多少？,3 .考慮“登錄”圖標(biāo)的坐偏移量是多少？,Y,X,O(0,0),背景屬性的經(jīng)典應(yīng)用,divwidth:80px;background:url(images/icon.gif) no-repeat; .helpbackground-position:-80px 0px; .loginwidth:40px;background-position:0px -20px; ; 購(gòu) 幫助中心 登錄,所有DIV標(biāo)簽設(shè)置為同一背景圖、等寬,分別設(shè)置各圖標(biāo)的坐標(biāo)偏移量,頁面背