一． 長(zhǎng)度單位
1．相對(duì)類型
A． px （piexl）
像素，根據(jù)顯示設(shè)備的分辨率的多少而代表不同的長(zhǎng)度，因此屬于相對(duì)類型。例如一張高寬為100px的圖，在800×600分辨率中比在1024×768分辨率中大。因?yàn)閮蓚€(gè)分辨率中100px代表的長(zhǎng)度不同。
B． em
這是設(shè)置以目前字符的高度為單位。比如h1{margin:2em},就會(huì)以目前字符的兩倍高度來(lái)顯示。em作為尺度單位時(shí)是以font-size屬性為參考依據(jù)的，若是沒(méi)有font-size屬性，就以瀏覽器默認(rèn)的字符高度作為參考。
2．絕對(duì)類型
絕對(duì)指無(wú)論顯示設(shè)備的分辨率是多少，都代表相同的長(zhǎng)度。
| 尺度單位名 | 說(shuō)明 |
| in（英寸） | 不是國(guó)際標(biāo)準(zhǔn)單位，極少使用 |
| cm(厘米) | 國(guó)際標(biāo)準(zhǔn)單位，較少用 |
| mm（毫米） | 國(guó)際標(biāo)準(zhǔn)單位，較少用 |
| pt(點(diǎn)數(shù)) | 最基本的顯示單位，較少用 |
| pc(印刷單位) | 應(yīng)用在印刷行業(yè)中，1pc=12pt |
Ps：可以看到，在CSS使用過(guò)程中相對(duì)類型長(zhǎng)度單位使用較多，而絕對(duì)類型較少使用。
二． 顏色定義
在html頁(yè)面中，顏色統(tǒng)一用RGB的模式顯示，也就是通常人們所說(shuō)的“紅綠藍(lán)”三原色模式，每種顏色都由著三種顏色的不同比重組成，每種顏色的比重分為0～255檔。當(dāng)紅綠藍(lán)三個(gè)分量都設(shè)置為255時(shí)就是白色，例如rgb(100%,100%,100%)和#FFFFFF都指白色。（FF即為16進(jìn)制中的255）
在css中文字顏色是通過(guò)color屬性設(shè)置的，示例如下：
h3{color:bule;}
h3{color:#0000ff;}
h3{color:#00f;}
h3{color:rgb(0,0,255);}
h3{color:rgb(0%,0%,100%);}
第1種是用顏色的英文名稱作為屬性值。
第2種是最常用的6位的十六進(jìn)制數(shù)值表示。
第3種是第2種方式的簡(jiǎn)寫(xiě)方式。
第4種是分別給出紅綠藍(lán)3種顏色分量的十進(jìn)制數(shù)值。
第5種是分別給出紅綠藍(lán)3種顏色分量的百分比。
三． 設(shè)置文字的字體
在此處我們先準(zhǔn)備一個(gè)html頁(yè)面，如果你不方便可以下載我這個(gè)4-3.html
然后在其頭部增加如下代碼：
<style type=”text/css”>
h1{
font-family:黑體;
}
p{
font-family:Arial,”Times New Roman”,;
}
</style>
以上語(yǔ)句聲明了html頁(yè)面中h1字體使用黑體，文本段落同時(shí)聲明了兩種字體，分別是Arial字體和Times New Roman字體。其含義是告訴瀏覽器在訪問(wèn)者的計(jì)算機(jī)中尋找Arial字體，如果沒(méi)有Arial字體，就尋找Times New Roman字體，如果兩種字體都沒(méi)有，則使用瀏覽器默認(rèn)的字體顯示。
font-family屬性可以同時(shí)聲明多種字體，字體之間用逗號(hào)分隔開(kāi)。另外一些字體的名稱中會(huì)出先空格，例如“Times New Roman”字體，這時(shí)要用雙引號(hào)將其括起來(lái)，是瀏覽器知道這是一種字體名稱，要用英文引號(hào)。
Ps:很多設(shè)計(jì)者喜歡多種多樣的字體，但這些字體很多用戶不會(huì)安裝，因此一定要設(shè)置多個(gè)備選字體，避免瀏覽器直接替換成默認(rèn)的字體。最直接的方法是使用了生僻字體的部分，用圖形軟件制作成效的圖片，再加載到頁(yè)面中。
四．設(shè)置字體的傾斜效果
文字的傾斜并不是真的把字體拉斜實(shí)現(xiàn)的，傾斜的字體是一個(gè)獨(dú)立的字體，對(duì)應(yīng)于操作系統(tǒng)中的某一個(gè)字庫(kù)文件。
嚴(yán)格來(lái)說(shuō)，在英文中，字體的傾斜有以下兩種：
1.italic，即意大利體，我們平常說(shuō)的傾斜都是指“意大利體”，大家看到各種文字處理軟件上傾斜按鈕是一個(gè)i字母，這就是原因。
2.oblique，即真正的傾斜，這就是把一個(gè)字母向右邊傾斜一定的角度產(chǎn)生的效果。Windows操作系統(tǒng)下沒(méi)有實(shí)現(xiàn)oblique方式的字體，只是找了一個(gè)接近它的字體來(lái)示意。
CSS中的font-style屬性用來(lái)控制字體的傾斜，可以設(shè)置為“正?！?、“意大利體”、“傾斜”三種樣式，示例如下：
font-style:normal;
font-style:italic;
font-style:oblique;
在Windows上不能區(qū)分italic和oblique，他們都是按照italic方式進(jìn)行顯示的，這不是瀏覽器的問(wèn)題，而是操作系統(tǒng)不夠完善。
Ps:對(duì)于中文字體來(lái)說(shuō)，并不存在這么多情況。另外，中文字體的傾斜效果并不好看，因此網(wǎng)頁(yè)上很少使用中文字體的傾斜效果。
五．設(shè)置文字加粗效果
在html中使用<b>、或者<strong>將文字設(shè)置為粗體，在css中使用font-weight屬性控制文字的粗細(xì)，可以將文字的粗細(xì)進(jìn)行細(xì)致的劃分，更重要的是css還可將本來(lái)是粗體的文字變成正常粗細(xì)。
font-weight屬性的設(shè)置值
| 設(shè)置值 | 說(shuō)明 |
| normal | 正常粗細(xì) |
| bold | 粗體 |
| bolder | 加粗體 |
| lighter | 比正常粗細(xì)還細(xì) |
| 100-900 | 共有9個(gè)層次100，200……900，越大越粗 |
實(shí)際上大多數(shù)操作系統(tǒng)和瀏覽器只能設(shè)置“正?！焙汀凹哟帧眱煞N粗細(xì)，示例如下：
font-weight:normal;
font-weight:bold;
ps：在html中<b>和<strong>表現(xiàn)效果是一樣的，但是<b>沒(méi)有語(yǔ)義，<strong>表示“突出”、“加強(qiáng)”含義，大多數(shù)搜索引擎都對(duì)網(wǎng)頁(yè)中的strong很重視。但是設(shè)計(jì)者一方面想引起重視一方面又不想以粗體顯示。這時(shí)可以對(duì)<strong>使用”font-weight:normal”，這樣就可以讓其回復(fù)正常粗細(xì)，又不影響語(yǔ)義效果。
六．英文字母大小寫(xiě)轉(zhuǎn)換
英文轉(zhuǎn)換由屬性text-transform屬性控制，有三個(gè)值：
text-transform:capitalize; /*單詞首字母大寫(xiě)*/
text-transform:uppercase; /*全部大寫(xiě)*/
text-transform:lowerocase; /*全部小寫(xiě)*/
示例如下：
<html>
<head>
<title>英文字母大小寫(xiě)轉(zhuǎn)換</title>
<style type=”text/css”>
#p1{
text-transform:capitalize;
}
#p2{
text-transform:uppercase;
}
#p3{
text-transform:lowercase;
}
</style>
</head>
<body>
<p id=”p1″>hello ALL world </p>
<p id=”p2″>hello ALL world</p>
<p id=”p3″>hello ALL world</p>
</body>
</html>
瀏覽器結(jié)果：
我們可以看到如果設(shè)置text-transform:capitalize，原來(lái)是小寫(xiě)的單詞則變?yōu)槭鬃帜复髮?xiě)，對(duì)于原來(lái)已經(jīng)全部大寫(xiě)的單詞，例如ALL，依然保持全部大寫(xiě)。
七．控制文字的大小
css通過(guò)font-size控制文字的大小，最常使用的單位是px和em。lem表示的長(zhǎng)度是字母m的標(biāo)準(zhǔn)寬度。也可以用百分比做單位：“font-size:200%”表示文字大小為原來(lái)的兩倍。
八．文字的裝飾效果
在css中由text-decoration屬性為文字加下劃線、刪除線和頂線等多種裝飾效果。
text-decoration屬性設(shè)置值
| 設(shè)置值 | 說(shuō)明 |
| none | 正常顯示 |
| underline | 為文字加下劃線 |
| line-through | 為文字加刪除線 |
| overline | 為文字加頂線 |
| blink | 文字閃爍，僅部分瀏覽器支持 |
可以設(shè)置多個(gè)屬性值。示例：
text-decoration:underline overline;
注意：切勿將text-decoration輸入成font-decroation
九．設(shè)置段落首行縮進(jìn)
首行縮進(jìn)由text-indent屬性控制，中文段落首行縮進(jìn)兩個(gè)文字空白，示例：
text-indent:2em;
如果希望首行不是縮進(jìn)，而是凸出一定距離，也稱為“懸掛縮進(jìn)”，示例：
padding-left:2em;
text-indent:-2em;
先使整個(gè)段落向右2em的距離，然后將text-indent屬性設(shè)置為“-2em”，這樣就會(huì)凸出兩個(gè)字的距離了。
十．設(shè)置字詞間距
letter-spacing 控制字母間距；
word-spacing 控制單詞間距；
對(duì)于中文而言，要調(diào)整漢字之間的距離，需要設(shè)置letter-spacing屬性，而不是word-spacing。
十一.設(shè)置段落內(nèi)部的文字行高
css用line-height屬性控制行高：
line-height屬性的設(shè)置
| 設(shè)置值 | 說(shuō)明 |
| 長(zhǎng)度 | 數(shù)值，可以使用前面介紹的尺度單位 |
| 倍數(shù) | font-size的設(shè)置值的倍數(shù) |
| 百分比 | 相對(duì)于font-size的百分比 |
行高就是設(shè)置行與行之間的距離，可以這么理解。
十二.設(shè)置段落之間的距離
css用margin控制段落之間的距離，margin稱為“外邊距”。示例：
margin:1px,2px,3px,4px; 上右下左邊距依次為1234px
margin:1px,2px; 上下邊距為1px，左右邊距為2px
注意：兩個(gè)段落之間的距離=其中外邊距較大的值
SHISAN頁(yè)面中插入圖片可以起到美化的作用。插入圖片的標(biāo)記只有一個(gè)，那就是<img>標(biāo)記。插入圖片的時(shí)候，僅僅使用<img>標(biāo)記是不夠的，需要配合其它的屬性來(lái)完成，如下表所示。
| 屬性 | 描述 |
| src | 圖像的源文件 |
| alt | 提示文字 |
| width,height | 寬度，高度 |
| border | 邊框 |
| vspace | 垂直間距 |
| hspace | 水平間距 |
| align | 排列 |
| dynsrc | 設(shè)定avi文件的播放 |
| loop | 設(shè)定avi文件循環(huán)播放次數(shù) |
| loopdelay | 設(shè)定avi文件循環(huán)播放延遲 |
| start | 設(shè)定avi文件播放方式 |
| lowsrc | 設(shè)定低分辨率圖片 |
| usemap | 映象地圖 |
十三.插入圖片
頁(yè)面中插入圖片可以起到美化的作用。插入圖片的標(biāo)記只有一個(gè)，那就是<img>標(biāo)記。插入圖片的時(shí)候，僅僅使用<img>標(biāo)記是不夠的，需要配合其它的屬性來(lái)完成，如下表所示。
| 屬性 | 描述 |
| src | 圖像的源文件 |
| alt | 提示文字 |
| width,height | 寬度，高度 |
| border | 邊框 |
| vspace | 垂直間距 |
| hspace | 水平間距 |
| align | 排列 |
| dynsrc | 設(shè)定avi文件的播放 |
| loop | 設(shè)定avi文件循環(huán)播放次數(shù) |
| loopdelay | 設(shè)定avi文件循環(huán)播放延遲 |
| start | 設(shè)定avi文件播放方式 |
| lowsrc | 設(shè)定低分辨率圖片 |
| usemap | 映象地圖 |
十四．圖像的源文件屬性SRC
配合src屬性指定圖像源文件所在的路徑，就可以完成圖像的插入了。
圖像的低分辨率源文件屬性LOWSRC
如果用戶的瀏覽器速度很慢，網(wǎng)頁(yè)設(shè)計(jì)者可以在頁(yè)面中為其插入一張低分辨率的圖像供顯示。
十五.圖像的提示文字屬性ALT
提示文字有兩個(gè)作用。當(dāng)瀏覽網(wǎng)頁(yè)時(shí)，如果圖像下載完成，鼠標(biāo)放在該圖像上，鼠標(biāo)旁邊會(huì)出現(xiàn)提示文字。也就是說(shuō)，當(dāng)鼠標(biāo)指向圖像上方的時(shí)候，稍等片刻，可以出現(xiàn)圖像的提示文字，這用于說(shuō)明或者描述圖像。第二個(gè)作用是，如果圖像沒(méi)有被下栽，在圖像的位置上就會(huì)顯示提示文字。
十五.控制文本的水平位置
css使用text-align屬性控制文本的水平位置，如下表：
text-align屬性的設(shè)置值
| 設(shè)置值 | 說(shuō)明 |
| left | 左對(duì)齊，也是瀏覽器默認(rèn)的 |
| right | 右對(duì)齊 |
| center | 居中對(duì)齊 |
| justify | 兩端對(duì)齊 |
聯(lián)系客服
