樣式表的各項屬性課件

1、樣式表的各項屬性網頁制作樣式表的各項屬性樣式表的各項屬性樣式表的各項屬性樣式表的各項屬性 l字體 l圖文和布局 l顏色和背景 l定位 樣式表的各項屬性一、字體 1、CSS文字樣式文字樣式 1.1 字體字體 1.2 文字大小文字大小 1.3 文字顏色文字顏色 1.4加重字體和斜體字的各種加重字體和斜體字的各種CSS方式方式 1.5文字的文字的CSS特殊效果特殊效果 2、文字實例：模擬、文字實例：模擬Goole公司公司logo 3、CSS段落文字段落文字 4、段落實例：百度搜索、段落實例：百度搜索 樣式表的各項屬性1.1 字體字體 在CSS中通過font-family來控制文字的字體。h2font

2、-family:黑體, 幼圓; 示例樣式表的各項屬性1.2 文字大小文字大小使用font-size 屬性屬性，你可以對文字的尺寸進行無限的控制。 確定這的3種基本方法：1）Points, ems, pixels, 及其它單位及其它單位 P font-size: 16pt B font-size: 1.5em /* 在父標記的基礎上0.5 */P font-size: 20px /* 象素，因此實際顯示大小與分辨率有關，很常用的方式 */其它單位：如果上述單位仍然不符合你的要求， 請試試這些單位： in （英寸） cm （厘米） mm （毫米） pc （打字機字型尺寸單位） 樣式表的各項屬性1.

3、2 文字大小文字大小2）關鍵字）關鍵字 如果你不喜歡使用這些單位，你還可以選擇以關鍵字說明文字尺寸，例：P font-size: large 有7種關鍵字，相對應于中所用的數字參數： xx-small x-small small medium large x-large xx-large 樣式表的各項屬性1.2 文字大小文字大小3）比例參數）比例參數 設定文字尺寸的第3種辦法就是使用比例參數，例： B font-size: 300% /* 在父標記的基礎上200% */樣式表的各項屬性1.3 文字顏色文字顏色 控制文字顏色時統(tǒng)一使用color屬性屬性。而顏色的表示方法有很多種： 第1種采用RG

4、B顏色表示，如：h2 color:rgb(51,204,0); RGB的數值范圍從0到255，R代表紅色， G代表綠色，B代表藍色 第2種采用16進制的表示方式：pcolor:#333333; 第3種采用預定義的關鍵字，如bluep span color:blue; 顏色名稱 16種基本色為aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.Internet Explorer 4.0 支持的顏色支持的顏色.doc 樣式表的

5、各項屬性1.4加重字體和斜體字的各種加重字體和斜體字的各種CSS方式方式 1)字體風格字體風格font-style是用來控制斜體字的屬性： 語法：語法： font-style : normal | italic | oblique 參數：參數：normal : 正常的字體 italic : 斜體。對于沒有斜體變量的特殊字體，將應用oblique oblique : 傾斜的字體 示例：示例：H3 font-style: italic 樣式表的各項屬性1.4加重字體和斜體字的各種加重字體和斜體字的各種CSS方式方式 2)字重字重font-weight（設置文本字體的粗細設置文本字體的粗細）：）：利

6、用字重屬性，可以創(chuàng)造出一系列新的加重字體。 語法：語法： font-weight : normal | bold | bolder | lighter | number 參數：參數： normal : 正常的字體。相當于number為400。聲明此值將取消之前任何設置 bold : 粗體。相當于number為700。也相當于b對象的作用 bolder : IE5+特粗體 lighter : IE5+細體 number : IE5+100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 示例：示例：P font-weight: bold 樣式表的各

7、項屬性1.5文字的文字的CSS特殊效果特殊效果 1）文字變形）文字變形（text-transform）：這項屬性可以使你輕而易舉地控制字母大寫?；敬a： B text-transform: uppercase 以下為所有可用的參數： uppercase 使所有字母大寫顯示 lowercase使所有字母小寫顯示 capitalize 使每個單詞的第1個字母大寫顯示. none 使所有繼承的文字變形參數被忽略，文字將以正常形式顯示。樣式表的各項屬性1.5文字的文字的CSS特殊效果特殊效果 2）文字修飾（）文字修飾（text-decoration)。 其基本語其基本語法如下：法如下： B text

8、-decoration: underline 以下為所有可用的參數： underline 給文字下劃線， overline給文字上劃線， line-through給文字劃出刪除線. blink 文字在閃爍（IE瀏覽器不支持） none使得上述效果都不會發(fā)生。 樣式表的各項屬性2、文字實例：模擬、文字實例：模擬Goole公司公司logo示例樣式表的各項屬性3、段落實例：百度搜索、段落實例：百度搜索 示例樣式表的各項屬性二、布局二、布局l字間距 l字母間距 l行高 l文字對齊方式 l垂直對齊方式 l文字縮位 l頂邊距、左邊距等 l空格填充頂部、左邊等等 l邊框寬度、顏色、樣式等 l浮動 l清除 樣

9、式表的各項屬性1、css控制字間距和字母間距控制字間距和字母間距 l字間距 l利用字間距屬性，你可以在字之間加入更 多的距離： lH3 word-spacing: 1em l你所使用的參數值將加入任何瀏覽器的缺省設置，你可以使用我們昨天談到的任何 一種長度單位： lin （英寸） lcm （厘米） lmm （毫米） lpt （點數） lpc （打字機字間距） lem （ems） lex (x-height) lpx （象素） 樣式表的各項屬性l字母間距 lH3 letter-spacing: 10px 樣式表的各項屬性2、css行距行距 l行高 行高可以控制行與行之間的垂直距離。 lB lin

10、e-height: 16pt l設定行高的方法： l長度單位 B font-size: 12pt; line-height: 11pt l比例 B font-size: 10pt; line-height: 140% 樣式表的各項屬性3、css文字對齊文字對齊l文字對齊 l利用文字對齊屬性，你可以控制段落的水平 對齊： lH4 text-align: center l這項屬性只用于整塊的內容，如、 -、和 。 l以下為各種選項： lleft指將要素左對齊，如本段所示。指將要素左對齊，如本段所示。lcenter指將要素居中，如本段所示。指將要素居中，如本段所示。ljustify指將要素左右對齊，

11、如本段所示。指將要素左右對齊，如本段所示。樣式表的各項屬性4、垂直對齊方式：、垂直對齊方式： vertical-align l示例樣式表的各項屬性5、首字放大（、首字放大（float）l首字放大（首字放大（float）lH4 float: left 樣式表的各項屬性6、css邊距及空格填充邊距及空格填充 lbox包括： l要素本身 l圍繞要素的空格填充（padding） l圍繞空格填充的邊框（border） l圍繞邊框的邊距（空白margin） l圖示如下： l l你可以分別控制空格填充、邊框和邊距樣式表的各項屬性l頂邊距、底邊距、左邊距和右邊距 這4項屬性可以使你控制一個要素的四周 的邊距。

12、如下： lH4 margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px 樣式表的各項屬性7、css邊框邊框 l頂邊框寬度，底邊框寬度，左邊框寬度和 右邊框寬度l你可以控制整個邊框的寬度，也可以分別 控制每一邊的邊框寬度： lH4 border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px 樣式表的各項屬性l邊框顏色 l例：P border-color: green;

13、 border-width: 3px l邊框樣式 l例： P border-style: double; border-width: 3px l可以使用的關鍵字參數值如下： lsolid ldouble ldotted ldashed lgroove lridge linset loutset 樣式表的各項屬性三、背景三、背景l(fā)背景色 l背景圖象 l重復背景 l固定背景 l背景定位 l背景 樣式表的各項屬性1、背景色、背景色 l背景色 l利用CSS在網頁要素后面加入固定的背景色 及圖象。 lP.yellow background-color: #FFFF66 樣式表的各項屬性2、背景圖象、背景

14、圖象 l背景圖象背景圖象 你可以很輕松地將GIF或JPEG圖象加到一個要 素后面： lB background-image: url(background.gif) 樣式表的各項屬性3、控制背景圖象、控制背景圖象 l背景重復(background-repeat) lP background-repeat: no-repeat; background-image: url(background.gif) l如果你只想讓圖象垂直或者水平方向平鋪，你 可以使用repeat-x將其水平平鋪，用repaet-y 將其垂直平鋪。而repeat參數值則將圖象從水 平和垂直兩個方向平鋪。樣式表的各項屬性l固定

15、背景（backgroundattachment）lBODY background-attachment: fixed; background-image: url(background.gif) l其參數有兩種選擇： lscroll指背景圖象隨文字內容一起滾動， 即通常所見的方式。 lfixed指文字滾動時，背景圖象保持固 定。 樣式表的各項屬性l背景定位(background-position)l你可以設定將背景插在什么位置顯示。 lP background-position: center bottom; background-image: url (background.gif) 樣式表

16、的各項屬性設定位置的設定位置的3種方法：種方法：l關鍵字參數（Keyword values） 關鍵字設定方法簡便易用： ltop將背景圖象同前景要素的頂部 對齊。 lbottom將其同前景要素的底部對 齊。 lleft將其同左邊對齊。 lright將其同右邊對齊。 lcenter將其水平居中（如果使用在 另一關鍵字前面）或垂直居中（如 果用在另一關鍵字后面）。 l長度參數 你可以設定水平和 垂直定位起點，l例：P background-position: 70px 10px; background-repeat: repeat-y; background-image: url (background.gif) l比例值（Percentage values） l例：P background-position: 75% 50%; bac