CSS是“Cascading Style Sheets”的簡(jiǎn)稱，中文翻譯為“串接樣式表”，也有人翻譯 為“樣式表”。CSS用以作為網(wǎng)頁(yè)的排版和風(fēng)格設(shè)計(jì)，在web標(biāo)準(zhǔn)建站中，對(duì)CSS的熟悉和使用 是相當(dāng)重要的一個(gè)內(nèi)容。CSS的作用是彌補(bǔ)HTML的不足，讓網(wǎng)頁(yè)的設(shè)計(jì)更為靈活。
這個(gè)文章只是為您介紹CSS的基礎(chǔ)應(yīng)用，指引您的一個(gè)入門(mén)的基礎(chǔ)教程，主要目的是為 推進(jìn)web標(biāo)準(zhǔn)貢獻(xiàn)自己的微薄之力。
說(shuō)點(diǎn)我自己的體會(huì)，現(xiàn)在有好多人都在推廣WEB標(biāo)準(zhǔn)，其實(shí)對(duì)初學(xué)者來(lái)說(shuō)，不需要?jiǎng)倢W(xué) 的時(shí)候就學(xué)標(biāo)準(zhǔn)，學(xué)點(diǎn)簡(jiǎn)單的還是容易入門(mén)的，因?yàn)楝F(xiàn)在HTML還在照樣用啊，所以我希望初學(xué) 者學(xué)習(xí)時(shí)不要非遵循標(biāo)準(zhǔn)，當(dāng)你入門(mén)之后，你做網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)使用表格特麻煩的時(shí)候你就 該去尋求簡(jiǎn)單方法了，到時(shí)再學(xué)也不晚啊，如果你喜歡新技術(shù)那么你初學(xué)時(shí)就學(xué)標(biāo)準(zhǔn)吧，按個(gè) 人的實(shí)際來(lái)行動(dòng)吧。下面開(kāi)始學(xué)習(xí)了
一、如何在HTML中應(yīng)用CSS。
您可以利用下列 3 種方式將 CSS 指定的格式加入到HTML中：
1. 在 HTML 文件里加一個(gè)超級(jí)連結(jié)，連接到外部的 CSS 文檔。(外部連結(jié) CSS)
這個(gè)方法最方便管理整個(gè)網(wǎng)站的網(wǎng)頁(yè)風(fēng)格，它讓網(wǎng)頁(yè)的文字內(nèi)容與版面設(shè)計(jì)分開(kāi)。您 只要在一個(gè) CSS 文檔內(nèi)（擴(kuò)展名為 .CSS）定義好網(wǎng)頁(yè)的風(fēng)格，然后在網(wǎng)頁(yè)中加一個(gè)超級(jí)連接 連接到該文檔，那么你的網(wǎng)頁(yè)會(huì)按在CSS文檔內(nèi)定義好的風(fēng)格顯示出來(lái)了。
具體的使用防范是：
<HTML>
<HEAD>
<TITLE>網(wǎng)頁(yè)文件的標(biāo)題</TITLE>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</HEAD>
注意：style.css文件的位置。
2. 在 HTML 文件內(nèi)的 <HEAD>.......</HEAD> 標(biāo)簽之間，加一段 CSS 的描述內(nèi)容。(內(nèi)定義CSS)
這個(gè)方法適用于指定某個(gè)網(wǎng)頁(yè)，除了表現(xiàn)外部的 CSS 文檔定義好的網(wǎng)頁(yè)風(fēng)格外，同時(shí) 還要表現(xiàn)本身 HTML 文檔內(nèi)指定的 CSS 。
如果內(nèi)在添加的 CSS 描述與外部連接的 CSS 描述相沖突的話，網(wǎng)頁(yè)的表現(xiàn)將以內(nèi)在 添加的 CSS 描述為主，也就是外部的描述就不再起作用了。
具體使用方法是：
<HTML>
<HEAD>
<TITLE>網(wǎng)頁(yè)標(biāo)題</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font: 12pt}
H1 {font: 16pt}
P {font-weight: bold;
color: green}
-->
</STYLE>
</HEAD>
<BODY>
網(wǎng)頁(yè)內(nèi)容…
</BODY>
</HTML>
值得注意的是，為了防止不支持 CSS 的瀏覽器誤將標(biāo)簽間的 CSS 風(fēng)格描述當(dāng)成普通 字串，而表現(xiàn)于網(wǎng)頁(yè)上，您最好將 CSS 的敘述文字插入在<!--和-->之間。
3. 在 HTML 文件的文本內(nèi)容中，隨時(shí)有需要，隨時(shí)加一小段 CSS 的描述指定風(fēng)格。( 文本間CSS)
這個(gè)方法適用于指定網(wǎng)頁(yè)內(nèi)的某一小段文字的呈現(xiàn)風(fēng)格。
外部CSS與內(nèi)定義CSS如果和此定義有相同的項(xiàng)，那么以此定義的 CSS 風(fēng)格表現(xiàn)，外部 CSS文檔與內(nèi)定義CSS和此定義的沒(méi)相同的項(xiàng)時(shí)那么還會(huì)正常顯示，同時(shí)還會(huì)顯示文本內(nèi)容間的 CSS 風(fēng)格。
具體使用方法是：
<HTML>
<HEAD>
<TITLE>網(wǎng)頁(yè)標(biāo)題</TITLE>
</HEAD>
<BODY>
<P STYLE="color: red">
本頁(yè)內(nèi)容…
</P>
</BODY>
</HTML>
上述的 3 種 CSS，可以同時(shí)并用，也可以擇您所好，單一或成雙地使用。如果各 CSS 間的敘述相沖突，則內(nèi)在定義的 CSS 會(huì)覆蓋外部連結(jié)的 CSS ，文本間的 CSS 會(huì)覆蓋內(nèi)在定 義的 CSS 。
二、挑選者、屬性和值。
先舉個(gè)例子：H3{ COLOR : BLUE }表示在文本中只要使用H3標(biāo)簽的文字的顏色都是綠 色。其中H3為挑選者，COLOR為屬性，BLUE為COLOR屬性的值。挑選者是套用樣式的元件，通常 為外部CSS或內(nèi)定義CSS定義的風(fēng)格的一個(gè)名字，在這個(gè)初級(jí)教程里理解為一個(gè)標(biāo)簽的名字也可 以。屬性是用語(yǔ)描述挑選者的特性，相當(dāng)于HTML語(yǔ)法中的標(biāo)簽的屬性。值就是屬性的具體內(nèi)容 。
在CSS中當(dāng)我們使用到屬性值的時(shí)候，通常值是有一個(gè)度量依據(jù)的，也就是說(shuō)值是有單 位的。比如我們通常說(shuō)你從家到學(xué)校走1，1什么呢？米，公里，還是走1小時(shí)。通常在CSS中的 單位有：相對(duì)單位與絕對(duì)單位兩種單位具體如下：
“em” (比如 font-size: 2em) ：相對(duì)于字母高度的比例因子。
“%” (比如 font-size: 80%)： 相對(duì)于長(zhǎng)度單位（通常是目前字型的大小）的百分 比例。
'px' (比如 font-size: 12px) ：像素（系統(tǒng)預(yù)設(shè)單位）。
'pt' (比如 font-size: 12pt)： 像點(diǎn)。
此外還有 'pc' (印刷活字單位), 'cm' (公分), 'mm' (公厘) 和 'in' (英寸)等單位 。
當(dāng)值為0時(shí)，我們就不需要設(shè)置單位了，比如你不想要邊框那么我們直接設(shè)置border=0 。
在這我多說(shuō)一句，就是強(qiáng)調(diào)單位的使用時(shí)，當(dāng)我自己制作的網(wǎng)頁(yè)想在分辨率改變時(shí)， 字體大小也隨著改變那么我們就使用單位%和em，如果你想時(shí)你的網(wǎng)頁(yè)不管怎么調(diào)分辨率都是 固定大小的那么我們使用px、pt等元素了。呵呵！
三、顏色的設(shè)置和使用。
CSS提供了16,777,216種顏色可以供我們來(lái)使用，通常表現(xiàn)顏色的方式有三種：顏色名 字、RGB(red/green/blue) 數(shù)值和十六進(jìn)制數(shù)形式，具體表現(xiàn)如下：
紅色可以表示為：red、RGB(255,0,0)、rgb(100%,0%,0%)、#ff0000 和 #f00 五種方 式。
#RRGGBB：以三個(gè)00到FF的十六進(jìn)位值分別表示0到255十進(jìn)位值的紅、綠、藍(lán)三原色數(shù) 值。
#RGB：簡(jiǎn)略表示法，只用三個(gè)0到F的十六進(jìn)位值分別表示紅、綠、藍(lán)三原色數(shù)值。而 事實(shí)上，瀏覽器會(huì)自動(dòng)擴(kuò)展為六個(gè)十六進(jìn)位的值，如『#ABC』將變?yōu)椤?AABBCC』。但是，顯 見(jiàn)這樣的 表示法并不精確。
rgb(R,G,B)：以0到255十進(jìn)位值的紅、綠、藍(lán)三原色數(shù)值來(lái)表示顏色。
rgb(R%,G%,B%)：以紅、綠、藍(lán)彼此相對(duì)的數(shù)值比例來(lái)表示顏色，如rgb (60%,100%,75%)。
Color_Name： 直接以顏色名稱來(lái)表示顏色，共有141種標(biāo)準(zhǔn)的顏色名稱。
通常我們?cè)谠O(shè)置顏色的時(shí)候通常是設(shè)置文字的顏色還有一個(gè)就是背景色。如按下圖進(jìn) 行設(shè)置：
我們可以保存一下文蕩然后瀏覽你就可以看到效果了。
四、關(guān)于文本的設(shè)置。
我們可以使用多種屬性來(lái)改變網(wǎng)頁(yè)文本的大小和形狀,以使網(wǎng)頁(yè)文本內(nèi)容看起來(lái)更加美 觀。
font-family：設(shè)定文字字型 可以取family-name值，范例：SPAN { family-name : " 楷體" }或范例：<SPAN style="family-name:楷體">。
font-style：設(shè)定字體樣式，可以取的值有normal 普通字、italic 斜體字；范例： SPAN { font-style : italic }。
font-weight：設(shè)定字型份量；可以取的值有normal 普通字 、bold 粗體字 、bolder 相對(duì)于父元素稍粗 、lighter 相對(duì)于父元素稍細(xì) 、100,200,300,400,500,600,700,800,900 數(shù)字由小到大代表筆畫(huà)由細(xì)到粗，例如：normal=400 bold=700 ；范例：SPAN { font- weight : bolder }。
font-size：設(shè)定文字大小。
text-decoration：設(shè)定文字修飾，可能值有 none 普通字 、underline 文字加底線 、overline 文字加頂線 、line-through 文字加刪除線 、blink 設(shè)定文字閃爍 ；范例： SPAN { text-decoration : blink }
text-transform：設(shè)定文字轉(zhuǎn)換 ；可能值有none 普通字 、capitalize 將英文單字 地一個(gè)字母轉(zhuǎn)換為大寫(xiě) 、uppercase 將所有文字轉(zhuǎn)換為大寫(xiě) 、lowercase 將所有文字轉(zhuǎn)換為 小寫(xiě) ；范例：SPAN { text-transform : uppercase }。
五、邊緣和區(qū)塊的設(shè)置。
MARGIN：邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調(diào)整來(lái)達(dá)到內(nèi)容元素位 置調(diào)整的目的。PADDING：補(bǔ)白，也就是內(nèi)容元素與框架之間的這段距離與空間，也可以利用 CSS指令去控制大小。
把代碼改為如圖：
他們的屬性有：margin-top(上邊緣寬度), margin-right(右邊緣寬度), margin- bottom(下邊緣寬度), margin-left(左邊緣寬度), padding-top(上方補(bǔ)白寬度), padding- right(右方補(bǔ)白寬度), padding-bottom(下方補(bǔ)白寬度) 和 padding-left(左方補(bǔ)白寬度)。
下面通過(guò)一個(gè)圖來(lái)給大家說(shuō)明：
看看上圖理解點(diǎn)了吧！下面我們開(kāi)始講講邊框。
六、邊框border性質(zhì)設(shè)定。
邊框也能應(yīng)用到大多數(shù)的HTML標(biāo)簽中，可以來(lái)使網(wǎng)頁(yè)更加美觀，邊框的具體屬性有 border-top：綜合設(shè)定上邊框性質(zhì) 、border-right：綜合設(shè)定右邊框性質(zhì) 、border-bottom ：綜合設(shè)定下邊框性質(zhì)、 border-left：綜合設(shè)定左邊框性質(zhì)。
border-style 綜合設(shè)定邊框樣式 ，可能值：solid(實(shí)線), dotted(虛線), dashed( 短直線), double(雙直線), groove (3d凹線), ridge (3d凸線), inset (3d嵌入) 和 outset (3d隆起)。
border-width 綜合設(shè)定邊框?qū)挾?可以設(shè)置的有 border-top-width(設(shè)定上邊框?qū)挾?), border-right-width(設(shè)定右邊框?qū)挾?, border-bottom-width(設(shè)定下邊框?qū)挾? 和 border-left-width(設(shè)定左邊框?qū)挾?.
border-color 綜合設(shè)定邊框顏色。
把下面代碼加到你的網(wǎng)頁(yè)中可以看到效果了：