1、第10 章 CSS文字和圖片,王會(huì) wangh-,1. CSS文字樣式,設(shè)置文字的樣式,常用CSS屬性： font-family 字體 font-size 文字大小 color 文字顏色 font-weight 文字粗細(xì) font-style 斜體 text-decoration下劃線、頂劃線、刪除線 text-transform 英文字母大小寫,1.1 字體,CSS屬性：font-family 典型語句： p font-family:黑體, 幼圓, “Times New Roman”; 瀏覽器首先在計(jì)算機(jī)中尋找“黑體”，如果該用戶計(jì)算機(jī)中沒有黑體，則接著尋找“幼圓”，依次下去直到最后一種字體

2、，如果全都沒有則用默認(rèn)字體。 一些字體名稱中間會(huì)出現(xiàn)空格，這時(shí)需要用雙引號(hào)將其引起來，如“Times New Roman”。 實(shí)例：10-1.html,1.2 文字大小,CSS屬性：font-size 常用單位： px：像素，如”12px”; IE瀏覽器默認(rèn)為16px。 em：字符寬度或字符高度，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如”2em”； 百分比：如200%； 1em=100%,1.2 文字大小,除了用物理單位設(shè)定文字的絕對(duì)大小外，CSS還提供了一些絕對(duì)大小的關(guān)鍵字來進(jìn)行設(shè)定。包括：xx-small、x-small、small、medium、large、x-large、xx-large。

3、實(shí)例：10-4.html,1.3 文字顏色,CSS屬性：color 在單獨(dú)設(shè)置某一個(gè)段落或某個(gè)字的顏色時(shí)，通常可以利用標(biāo)記，將需要的部分進(jìn)行單獨(dú)標(biāo)注，然后再設(shè)置標(biāo)記的顏色屬性。 例如白色可表示為： white #FFFFFF rgb(100%,100%,100%) 例： CSS規(guī)則如下： pcolor:red; font-size:17px; p span color:blue; 冬至過節(jié)源于漢代,1.4文字的加粗效果font-weight,實(shí)例： 10-6.html,1.5 斜體,CSS屬性：font-style 實(shí)例：10-7.html,1.6 下劃線、頂劃線、刪除線,CSS屬性：text

4、-decoration,該屬性可以同時(shí)設(shè)置多個(gè)屬性值，之間用空格隔開。,1.7 英文字母大小寫,CSS屬性：text-transform 實(shí)例：10-10.html,1.8 練習(xí)模擬Google文字顏色,請(qǐng)利用CSS設(shè)置文字樣式來模擬Google公司Logo的效果。,2. CSS段落文字,設(shè)置段落的樣式,常用CSS屬性： text-align 水平對(duì)齊 vertical-align 垂直對(duì)齊 line-height 行間距 letter-spacing 字間距 margin 段間距 text-indent 首行縮進(jìn),2.1 段落水平對(duì)齊方式,CSS屬性：text-align 水平對(duì)齊方式的值可

5、以設(shè)置為(left)左、(center)中、(right)右和(justify)兩端對(duì)齊等。 實(shí)例：10-11.html,2.2 段落垂直對(duì)齊方式,CSS屬性：vertical-align 對(duì)于文字本身而言，該屬性對(duì)于塊級(jí)元素并不起作用。但對(duì)于表格而言，這個(gè)屬性則顯得十分重要。 實(shí)例：10-12.html 另外，該屬性值設(shè)置為正數(shù)時(shí)，文字將向上移動(dòng)相應(yīng)的數(shù)值，設(shè)置為負(fù)數(shù)時(shí)則向下移動(dòng)。 實(shí)例：10-13.html,2.3 字間距,CSS屬性：letter-spacing 該屬性用于設(shè)置字間距。 實(shí)例：10-15.html,2.4設(shè)置段落格式-行高,設(shè)置段落內(nèi)部的文字行高：line-height,

6、什么是行高？,2.5設(shè)置段落格式段間距,設(shè)置段落之間的距離 margin(margin-top、 margin-left 、margin-right、 margin-bottom)屬性:四邊的外延邊距 padding屬性:四邊的內(nèi)邊距 例： 這是第一段 這是第二段 這是第三段 有如下樣式： pmargin:0px;,2.6設(shè)置段落首行縮進(jìn)text-indent,思考：如何設(shè)置段落首行縮進(jìn)2個(gè)字符的效果？ 思考：如何設(shè)置段落首行“懸掛縮進(jìn)”2個(gè)字符？,text-indent：正值，首行向右縮進(jìn)；負(fù)值，懸掛縮進(jìn) 例：p text-indent:-2em; /*向左縮進(jìn)2個(gè)字*/ padding-l

7、eft:2em; /*左邊距2個(gè)字*/ ,2.7 首字放大,實(shí)例：10-16.html,p font-size:15px;/* 文字大小 */ p spanfont-size:60px;/* 首字大小 */ float:left;/* 首字下沉 */ padding-right:5px; /* 與右邊的間隔 */ font-weight:bold; /* 粗體字 */ font-family:黑體;/* 黑體字 */ color:red; /* 字體顏色 */ 中秋節(jié)是.,2.5 練習(xí)模擬百度搜索結(jié)果,ftp課堂練習(xí)中下載”CSS段落“，請(qǐng)利用CSS文字和段落設(shè)置方法模擬百度搜索結(jié)果，效果如下

8、。,3. 圖片樣式和對(duì)齊,圖片樣式與對(duì)齊,border-style、border-color、border-width 圖片邊框 width、height 圖片尺寸 text-align 圖片水平對(duì)齊 vertical-align 圖片縱向?qū)R,3.1 圖片邊框,CSS屬性：border-style、border-color、border-width 上述屬性分別設(shè)置圖片邊框的樣式、顏色和粗細(xì)。 實(shí)例：10-17.html .test1 border-style:dotted;/* 點(diǎn)畫線 */ border-color:#FF9900;/* 邊框顏色 */ border-width:5px;

9、/* 邊框粗細(xì) */ ,3.1 圖片邊框,另外，還可以分別設(shè)置4個(gè)邊框的不同樣式。 CSS屬性：border-left、border-right、 border-top、border-bottom 實(shí)例：10-18.html 另外，border屬性還可以將各個(gè)值寫到同一語句中，用空格分離，這樣可大大簡(jiǎn)化CSS代碼的長(zhǎng)度。 實(shí)例：10-19.html img.test2 border-right:5px double #FF00FF; border-left:8px solid #0033FF; ,3.2 圖片縮放,CSS屬性：width、height 與HTML中的屬性不同的是，CSS中可以使

10、用更多的值，例如相對(duì)值和絕對(duì)值等。例如當(dāng)設(shè)置width的值為50%時(shí)，圖片的寬度將調(diào)整為父元素寬度的一半。 實(shí)例：10-20.html img.test1 width:50%;/* 相對(duì)寬度 */ ,3.3 圖片橫向?qū)R方式,CSS屬性：text-align 水平對(duì)齊方式同樣有左、中、右三種，所不同的是，圖片的水平對(duì)齊方式不能直接通過設(shè)置圖片的text-align屬性，而是通過設(shè)置其父元素的該屬性來實(shí)現(xiàn)的。 實(shí)例：10-22.html ,3.4 圖片縱向?qū)R方式,CSS屬性：vertical-align 圖片縱向?qū)R方式主要體現(xiàn)在與文字搭配的情況下，尤其當(dāng)圖片的高度與文字本身不一致時(shí)。 另外，

11、該屬性的IE和Firefox中的顯示結(jié)果在某些值上還略有區(qū)別。 實(shí)例：10-23.html,4. 圖文混排,4.1 文字環(huán)繞,CSS屬性：float 實(shí)例：10-25.html imgfloat:left;margin-right:5px; margin-bottom:5px; spanfloat:left; /* 首字放大 */ font-size:85px; font-family:黑體; margin:0px; padding-right:5px; 春節(jié)古時(shí)叫“元旦”。,4.2 練習(xí)八仙過海,ftp課堂練習(xí)中下載”圖文混排八仙過?！埃肅SS圖文混排的方法，實(shí)現(xiàn)頁面的效果。,5. CS

12、S網(wǎng)頁背景顏色,5.1 頁面背景色,CSS屬性：background-color 在CSS中頁面的背景色主要通過設(shè)置body標(biāo)記的background-color屬性來實(shí)現(xiàn)。實(shí)例：10-26.html,5.2 用背景色給頁面分塊,幾乎所有的HTML元素的背景色都可以通過background-color屬性來設(shè)定。因此很多網(wǎng)頁都通過設(shè)定不同的HTML元素的各種背景色來實(shí)現(xiàn)分塊的目的。 實(shí)例：10-27.html,6. CSS背景圖片,CSS背景圖片屬性,background-image：添加背景圖片 background-repeat：背景圖片重復(fù) background-position：背景圖

13、片位置 background-attachment：固定背景圖片 Background：背景圖片樣式綜合設(shè)置,6.1 頁面的背景圖,CSS屬性：background-image 使用該屬性就可以給頁面添加背景圖片，直接定義其url值，瀏覽器就會(huì)自動(dòng)將圖片覆蓋整個(gè)頁面。 實(shí)例：10-28.html body background-image:url(03.jpg); 如果使用透明的GIF格式圖片，并且再設(shè)置背景顏色，則背景顏色就會(huì)透過圖片顯示出來。 實(shí)例：10-29.html body background-image:url(03.gif); background-color:#FFFF00;

14、 ,6.2 背景圖片的重復(fù),CSS屬性：background-repeat 該屬性可以設(shè)置背景圖片的重復(fù)方式，分為水平重復(fù)(repeat-x)、豎直重復(fù)(repeat-x)、不重復(fù)(no-repeat)、重復(fù)(repeat) 。 實(shí)例：10-30.html body background-image:url(bg1.jpg); background-repeat:repeat-y; ,6.3 背景圖片的位置,CSS屬性：background-position 默認(rèn)情況下背景圖片都是從標(biāo)記的左上角開始出現(xiàn)的，這個(gè)位置可以自由指定。 屬性值可以設(shè)為：bottom right、top left、to

15、p center、top right、center left、center center、center right、bottom left和bottom center等。 實(shí)例：10-33.html 另外，還可以給背景圖片的位置定義具體的百分比和具體的數(shù)值，實(shí)現(xiàn)精確定位。 實(shí)例：10-34.html background-position:400px 300px; background-position:30% 70%;,6.4 固定背景圖片,CSS屬性：background-attachment 該屬性的值設(shè)為fixed，就可以實(shí)現(xiàn)背景圖片的固定，即不隨滾動(dòng)條滾動(dòng)。 實(shí)例：10-35.htm

16、l body background-image:url(bg6.jpg);background-repeat:no-repeat;/* 不重復(fù) */ background-attachment:fixed;/* 固定背景圖片 */ ,6.5 添加多個(gè)背景圖片,在CSS3之前一個(gè)標(biāo)記只能用一次background屬性，因此可以給多個(gè)標(biāo)記添加不同的背景來實(shí)現(xiàn)特殊效果。 實(shí)例：10-36.html body background-image:url(bg7.jpg); background-repeat:no-repeat; div background-image:url(bg8.gif); background-repeat:repeat-y; 銀杏的優(yōu)點(diǎn)1. 葉色秀雅， ,6.6 背景樣式綜合設(shè)置,CSS屬性：back