HTML CSS
一．CSS基本介紹
級(jí)聯(lián)樣式表（Cascading Style Sheet）簡(jiǎn)稱(chēng)“CSS”，通常又稱(chēng)為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。
CSS是英語(yǔ)CascadingStyle Sheets（層疊樣式表單）的縮寫(xiě)，它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫(xiě)法，針對(duì)各類(lèi)人群，有較強(qiáng)的易讀性。
二．CSS的使用方法
有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表：
內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性
內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style> 元素 來(lái)包含CSS
外部引用 - 使用外部 CSS 文件
每一種方法均有其優(yōu)缺點(diǎn)：
當(dāng)要在站點(diǎn)上所有或部分網(wǎng)頁(yè)上一致地應(yīng)用相同樣式時(shí)，可使用外部引用樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁(yè)上。通常外部樣式表以 .css 做為文件擴(kuò)展名，例如新聞發(fā)布系統(tǒng)中的公共樣式Common.css。然后在需要此樣式的頁(yè)面中將其鏈接進(jìn)來(lái)，如：
<link href="/css/Common.css" rel="stylesheet" type="text/css"/>
當(dāng)人們只是要定義當(dāng)前網(wǎng)頁(yè)的樣式，可使用內(nèi)部樣式表。內(nèi)部樣式表是一種級(jí)聯(lián)樣式表，“嵌”在網(wǎng)頁(yè)的 <HEAD>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁(yè)上使用。 如：
<style type="text/css">
<!-- /* 把聲明的樣式包含在一個(gè)html注釋中，這樣可以解決較老的瀏覽器不識(shí)別style的問(wèn)題 */ -->
body {background:grey;}
</style>
使用內(nèi)聯(lián)樣式以應(yīng)用級(jí)聯(lián)樣式表屬性到網(wǎng)頁(yè)元素上。如：
<pstyle="@importurl('style3.css');">CSS document</p>
<!-- 不能在style屬性中使用@import -->
如果網(wǎng)頁(yè)鏈接到外部樣式表，為網(wǎng)頁(yè)所創(chuàng)建的內(nèi)聯(lián)的或內(nèi)部樣式將擴(kuò)充或覆蓋外部樣式表中的指定屬性。
要在網(wǎng)頁(yè)上使用外部樣式表的樣式，可將該網(wǎng)頁(yè)鏈接到樣式表，方法是使用位于 “格式” 菜單上的 “樣式表連接” 命令?？梢枣溄右粋€(gè)或數(shù)個(gè)樣式表到網(wǎng)頁(yè)視圖模式下的當(dāng)前網(wǎng)頁(yè)，或到在文件夾列表中的所選網(wǎng)頁(yè)，或到站點(diǎn)上的全部網(wǎng)頁(yè)。
該“樣式” 框列出標(biāo)準(zhǔn) HTML 標(biāo)記符，例如標(biāo)題 1，還有嵌入的樣式表或鏈接到網(wǎng)頁(yè)的外部樣式表中所含的類(lèi)或 ID 選擇器。要應(yīng)用樣式到網(wǎng)頁(yè)元素，請(qǐng)選定該樣式然后單擊 “樣式” 框中的樣式或選擇器。
在 Microsoft FrontPage 2000中，某些格式設(shè)置特性會(huì)作為內(nèi)嵌樣式自動(dòng)應(yīng)用。例如∶如果使用 “邊框與陰影” 命令（在 “格式” 菜單上）在普通段落周?chē)鷳?yīng)用框，F(xiàn)rontPage 會(huì)寫(xiě)下格式設(shè)置信息，作為段落標(biāo)記符的內(nèi)嵌樣式屬性（例如∶ <pstyle="border-style: solid">）。然而某些屬性的應(yīng)用需要使用 CSS，其他則需要使用 HTML 。如果人們只想使用 CSS 應(yīng)用內(nèi)嵌樣式，可使用 “樣式”按鈕（位于網(wǎng)頁(yè)元素的 “屬性” 對(duì)話框里）應(yīng)用類(lèi)或 ID 選擇器或嵌入式樣式。
實(shí)例1
背景色屬性（background-color）定義一個(gè)元素的背景顏色：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body style="background-color: green;"> <h2 style="background-color: red;">標(biāo)題</h2> <p style="background-color: blue;">內(nèi)容</p> </body> </html>
實(shí)例2
使用font-family（字體），color（顏色），和font-size（字體大?。傩詠?lái)定義字體的樣式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <h1 style="font-family:verdana;">文字的標(biāo)題</h1> <p style="font-family:arial;color:red;font-size:20px;">下面是一句話。</p> </body> </html>
實(shí)例3
使用 text-align（文字對(duì)齊）屬性指定文本的水平與垂直對(duì)齊方式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <h1 style="text-align:center;">居中對(duì)齊的標(biāo)題</h1> <p>這是一個(gè)段落。</p> </body> </html>
