1、第10章 CSS美化圖片本章內(nèi)容o 10.1 圖片邊框樣式o 10.2 對(duì)齊圖片o 10.3 圖文混排o 10.4 綜合實(shí)例1 一句話新聞o 10.5 綜合實(shí)例2學(xué)校宣傳單10.1 圖片邊框樣式o 10.1.1 圖片邊框o 10.1.2 圖片縮放10.1.1 圖片邊框o在CSS3中，使用border-style屬性定義邊框樣式，即邊框風(fēng)格。例如可以設(shè)置邊框風(fēng)格為點(diǎn)線式邊框（dotted）、破折線式邊框（dashed）、直線式邊框（solid）和雙線式邊框（double）等。border-style屬性的詳細(xì)信息。o實(shí)例：10.1.htmlo可以使用border-top-style設(shè)定上邊框樣式

2、、border-right-style設(shè)定右邊框樣式、border-bottom-style設(shè)定下邊框樣式和border-left-style設(shè)定左邊框樣式。o實(shí)例：10.2.html10.1.2 圖片縮放o在HTML標(biāo)記語言中，通過img的描述標(biāo)記height和width可以設(shè)置圖片大小。width和height分別表示圖片的寬度和高度，其中二者值可以數(shù)值或百分比，單位可以是px。需要注意的是高度屬性heigth和寬度屬性width設(shè)置要求相同。o實(shí)例：10.3.htmlomax-width和max-height分別用來設(shè)置圖片寬度最大值和高度最大值。在定義圖片大小時(shí)，如果圖片默認(rèn)尺寸超過了

3、定義的大小時(shí)，那么就以max-width所定義的寬度值顯示，而圖片高度將同比例變化，如果定義的是max-height，以此類推。但是如果圖片的尺寸小于最大寬度或者高度，那么圖片就按原尺寸大小顯示。omax-width和max-height的值一般是數(shù)值類型。o實(shí)例：10.4.html10.2 對(duì)齊圖片o 10.2.1 橫向?qū)R方式o 10.2.2 縱向?qū)R方式10.2.1 橫向?qū)R方式o所謂圖片橫行對(duì)齊，就是在水平方向上進(jìn)行對(duì)齊，其對(duì)齊樣式和文字對(duì)齊比較相似，都是有三種對(duì)齊方式，分別為“左”，“右”和“中”。 o實(shí)例：10.10.html10.2.2 縱向?qū)R方式overtical-align

4、 屬性設(shè)置元素的垂直對(duì)齊方式，即定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。其語法格式為vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length。o實(shí)例：10.7.html10.3 圖文混排o 10.3.1 文字環(huán)繞o 10.3.2 設(shè)置圖片和文字間距10.3.1 文字環(huán)繞ofloat屬性主要定義元素在哪個(gè)方向浮動(dòng)。一般情況下這個(gè)屬性總應(yīng)用于圖像，

5、使文本圍繞在圖像周圍，有時(shí)它也可以定義其他元素浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。float語法格式為：float : none | left |right。o實(shí)例：10.8.html10.3.2 設(shè)置圖片和文字間距opadding屬性主要用來在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性，即可以設(shè)置元素所有內(nèi)邊距的寬度，或者設(shè)置各邊上內(nèi)邊距的寬度。如果一個(gè)元素既有內(nèi)邊距又有背景，從視覺上看可能會(huì)延伸到其他行，有可能還會(huì)與其他內(nèi)容重疊。元素的背景會(huì)延伸穿過內(nèi)邊距。不允許指定負(fù)邊距值。其語法格式為：padding :padding-top | padding-right | padding-bottom | padding-left。o實(shí)例：10.9.html10.4 綜合實(shí)例1一句話新聞o分析需求o構(gòu)建HTML頁面o添加CSS代碼，修飾DIVo使用類標(biāo)識(shí)符指向dao添加CSS代碼，修飾正副標(biāo)題o引用類標(biāo)識(shí)符o修飾圖片o修飾段