用CSS設(shè)置文本和圖像樣式.ppt

第 6 章 用CSS設(shè)置文本和圖像樣式,聊城大學(xué)傳媒技術(shù)學(xué)院 王麗萍,本章內(nèi)容,6.1.1 文字的屬性,6.1.2 設(shè)置文字屬性,6.1.2 設(shè)置文字屬性,body font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; font-weight: bold; font-style: italic; font-variant: small-caps; line-height: 1.5; text-transform: uppercase; color: #FF0000; text-decoration: underline; ,6.1.3 文字屬性縮寫,font: font-style | font-variant | font-weight | font-size | line-height | font-family,例如： body font: italic small-caps bold 0.75em/1.5 Arial, Helvetica, sans-serif; ,6.1.3 文字屬性縮寫,font: font-style | font-variant | font-weight | font-size | line-height | font-family,body font: 0.75em; ,注意，可以省略 font 屬性中的一個(gè)或多個(gè)屬性值，如果省略，該屬性值將使用瀏覽器的默認(rèn)值。但至少要定義 font-size 和 font-family兩個(gè)值。,請判斷下面的寫法是否正確。,body font-size: 0.75em; ,6.1.3 文字屬性縮寫,font: font-style | font-variant | font-weight | font-size | line-height | font-family,body font: “宋體”; ,請判斷下面的寫法是否正確。,body font-family: “宋體”; ,注意，可以省略 font 屬性中的一個(gè)或多個(gè)屬性值，如果省略，該屬性值將使用瀏覽器的默認(rèn)值。但至少要定義 font-size 和 font-family兩個(gè)值。,6.1.3 文字屬性縮寫,font: font-style | font-variant | font-weight | font-size | line-height | font-family,body font: 0.75em Arial, Helvetica, sans-serif; ,請判斷下面的寫法是否正確。,注意，可以省略 font 屬性中的一個(gè)或多個(gè)屬性值，如果省略，該屬性值將使用瀏覽器的默認(rèn)值。但至少要定義 font-size 和 font-family兩個(gè)值。,6.1.4 字體設(shè)置技巧,中文網(wǎng)頁使用“宋體”。 當(dāng)字體名稱中有空格，或由漢字組成時(shí)，要使用引號包圍該名稱。例如： font-family: “宋體”; font-family: “Times New Roman”, Times, serif; 提供首選字體、備用字體和普通字體。例如： font-family: Verdana, Arial, Helvetica, sans-serif; 常用的英文普通字體包括：serif、sans-serif、 monospace。,6.1.4 字體設(shè)置技巧（續(xù)）,常用的英文普通字體 serif 成比例、有襯線的字體，例如： Georgia Times New Roman Times sans-serif 成比例、無襯線的字體，例如： Verdana Arial Helvetica monospace 等寬的字體，例如： Courier New Courier,不應(yīng)以像素為單位設(shè)置字號。因?yàn)槿绻韵袼貫閱挝辉O(shè)置字號，那么使用 IE 瀏覽器的用戶就無法通過菜單命令改變文字的大小。 以一個(gè)實(shí)際站點(diǎn)為例：。,6.1.5 字號設(shè)置技巧,6.1.5 字號設(shè)置技巧（續(xù)）,為了保證網(wǎng)頁文字的大小可調(diào)節(jié)，應(yīng)該使用 em 為單位設(shè)置字號。 默認(rèn)情況下 1em=16px，則 0.75em=12px。,6.1.5 字號設(shè)置技巧（續(xù)）,font-size 屬性具有繼承性，當(dāng)多層嵌套定義時(shí)應(yīng)謹(jǐn)慎。 例如，在下面的 CSS 定義中，h2 元素和 p 元素到底有多大呢？,6.1.5 字號設(shè)置技巧（續(xù)）,制作網(wǎng)頁時(shí)，應(yīng)利用好 font-size 屬性的繼承性，避免字號的重復(fù)定義。 如果需要對 h1、h2 等元素的大小進(jìn)行定義，最好使用百分比為單位。例如：,6.2.1 段落的屬性,6.2.2 設(shè)置段落屬性,6.2.2 設(shè)置段落屬性,p word-spacing: 1em; letter-spacing: 0.5em; text-align: left; text-indent: 2em; white-space: nowrap; ,6.2.3 vertical-align 屬性,vertical-align 屬性只對行內(nèi)元素有效。行內(nèi)元素包括文字、圖片、表單元素等。 語法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom,6.2.3 vertical-align 屬性,（1）設(shè)置行內(nèi) 與文字的垂直對齊方式。例：,.middle vertical-align: middle; , 紫楠花園位于河?xùn)|區(qū) ,6.2.3 vertical-align 屬性,（1）設(shè)置行內(nèi) 與文字的垂直對齊方式。例：,.top vertical-align: top; , 紫楠花園位于河?xùn)|區(qū) ,6.2.3 vertical-align 屬性,（2）設(shè)置 、 中文字的垂直對齊方式。, 斯凱瑞故事集 26.80 故事集的內(nèi)容十分豐富， ,.top vertical-align: top; ,6.2.3 vertical-align 屬性,（2）設(shè)置 、 中文字的垂直對齊方式。, 斯凱瑞故事集 26.80 故事集的內(nèi)容十分豐富， ,.top vertical-align: top; ,6.2.3 vertical-align 屬性,（3）設(shè)置文字的上標(biāo)、下標(biāo)。,H2O 110-13,.sub vertical-align: sub; font-size: 50%; .super vertical-align: super; font-size: 50%; ,6.3.1 列表的類型,項(xiàng)目列表 北京 上海 編號列表 北京 上海 ,6.3.2 列表的屬性,6.3.3 設(shè)置列表屬性,6.3.3 設(shè)置列表屬性,ul width: 200px; list-style-type: disc; list-style-position: outside; ,6.3.3 設(shè)置列表屬性（續(xù)）,ul width: 200px; list-style-type: circle; list-style-position: inside; ,6.3.3 設(shè)置列表屬性（續(xù)）,ul width: 200px; list-style-image: url(images/bullet.gif); ,6.3.4 列表屬性縮寫,list-style: list-style-type | list-style-position | list-style-image,例如： ol list-style: lower-alpha inside; ul list-style: none; ,6.3.5 列表在不同瀏覽器中的差異,IE 默認(rèn)設(shè)置 具有 margin-left 值。 FF 默認(rèn)設(shè)置 具有 padding-left 值。 項(xiàng)目符號的大小與位置也不同。,ul background-color: #66CCFF; ,6.3.6 讓列表在不同的瀏覽器中 表現(xiàn)一致,ul margin: 0px; padding: 0px; list-style: none; ,6.3.7 用背景圖像替代項(xiàng)目符號,設(shè)置了 list-style:none 后，可以利用背景圖像替代項(xiàng)目符號。,ul margin: 0px; padding: 0px; list-style: none; li background: url(images/bullet.gif) no-repeat left top; padding-left: 20px; ,6.4.1 簡單的鏈接樣式,a color: #000000; 上面的樣式設(shè)置網(wǎng)頁上超鏈接的全部狀態(tài)都為黑色。,6.4.2 使用偽類選擇器找到 鏈接的不同狀態(tài),a:link, a:visited color: #000000; text-decoration: none; a:hover, a:active color: #FF0000; text-decoration: underline; 注意：要按照 a:link, a:visited, a:hover, a:active 的順序?yàn)殒溄討?yīng)用樣式。,6.4.3 使用后代選擇器找到 特定區(qū)域中的鏈接,a color: #002B5E; text-decoration: none; a:hover color: #FF0000; #navigation a color: #FFFFFF; #navigation a:hover color: #FF0000; ,a.button color: #000000; text-decoration: none; background-color: #94b8e9; border: 1px solid #000000; width: 90px; height: 30px; display: block; text-align: center; line-height: 30px; a:hover.button color: #FFFFFF; background-color: #336699; ,6.4.4 讓鏈接看起來像按鈕之一： 使用背景顏色,a.button color:#000000; text-decoration:none; width: 200px; height: 40px; background: #94b8e9 url(images/button.gif) no-repeat left top; display: block; line-height: 40px; padding-left: 50px; a:hover.button color:#FFFFFF; background: #336699 url(images/button-hover.gif) no-repeat left top; ,150px;,6.4.5 讓鏈接看起來像按鈕之二： 使用背景圖像,a.button color:#000000; text-decoration:none; display: block; width: 150px; height: 40px; line-height: 40px; background: #94b8e9 url(images/pixy-rollover.gif) no-repeat left top; padding-left: 50px; a:hover.button color:#FFFFFF; background: #336699 right top; ,background-color: #336699; background-position: right top; ,6.4.6 讓鏈接看起來像按鈕之三： Pixy 方法，消除閃爍,6.5.1 網(wǎng)頁中的圖像格式,GIF 無損壓縮； 8 位色深（256色）；支持透明；支持動畫。 JPG 有損壓縮； 24 位色深（1680萬色）。 PNG 無損壓縮；具有 8 位、