樣式表的各項(xiàng)屬性課件

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

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

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

4、B顏色表示，如：h2 color:rgb(51,204,0); RGB的數(shù)值范圍從0到255，R代表紅色， G代表綠色，B代表藍(lán)色 第2種采用16進(jìn)制的表示方式：pcolor:#333333; 第3種采用預(yù)定義的關(guān)鍵字，如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、各項(xiàng)屬性1.4加重字體和斜體字的各種加重字體和斜體字的各種CSS方式方式 1)字體風(fēng)格字體風(fēng)格font-style是用來控制斜體字的屬性： 語法：語法： font-style : normal | italic | oblique 參數(shù)：參數(shù)：normal : 正常的字體 italic : 斜體。對(duì)于沒有斜體變量的特殊字體，將應(yīng)用oblique oblique : 傾斜的字體 示例：示例：H3 font-style: italic 樣式表的各項(xiàng)屬性1.4加重字體和斜體字的各種加重字體和斜體字的各種CSS方式方式 2)字重字重font-weight（設(shè)置文本字體的粗細(xì)設(shè)置文本字體的粗細(xì)）：）：利

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

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

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

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

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

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

12、如下： lH4 margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px 樣式表的各項(xiàng)屬性7、css邊框邊框 l頂邊框?qū)挾龋走吙驅(qū)挾?，左邊框?qū)挾群?右邊框?qū)挾萳你可以控制整個(gè)邊框的寬度，也可以分別 控制每一邊的邊框?qū)挾龋?lH4 border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px 樣式表的各項(xiàng)屬性l邊框顏色 l例：P border-color: green;

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

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

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

16、的各項(xiàng)屬性設(shè)定位置的設(shè)定位置的3種方法：種方法：l關(guān)鍵字參數(shù)（Keyword values） 關(guān)鍵字設(shè)定方法簡(jiǎn)便易用： ltop將背景圖象同前景要素的頂部 對(duì)齊。 lbottom將其同前景要素的底部對(duì) 齊。 lleft將其同左邊對(duì)齊。 lright將其同右邊對(duì)齊。 lcenter將其水平居中（如果使用在 另一關(guān)鍵字前面）或垂直居中（如 果用在另一關(guān)鍵字后面）。 l長(zhǎng)度參數(shù) 你可以設(shè)定水平和 垂直定位起點(diǎn)，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