HTML CSS
一. CSS基本介紹?
級(jí)聯(lián)樣式表(Cascading Style Sheet)簡稱“CSS”,通常又稱為“風(fēng)格樣式表(Style Sheet)”,它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。例如,如果想讓連結(jié)字未點(diǎn)擊時(shí)是藍(lán)色的,當(dāng)滑鼠移上去後字變成紅色的且有底線,這就是一種風(fēng)格。透過設(shè)立樣式表,可以統(tǒng)一控制HTML中各標(biāo)誌的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效控制網(wǎng)頁外觀。使用級(jí)聯(lián)樣式表,可以擴(kuò)充精確指定網(wǎng)頁元素位置,外觀以及創(chuàng)建特殊效果的能力。?
CSS是英文CascadingStyle Sheets(層疊樣式表單)的縮寫,它是一種用來表現(xiàn)HTML或XML等檔案樣式的電腦語言。 CSS目前最新版本為CSS3,是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對(duì)於傳統(tǒng)HTML的表現(xiàn)而言,CSS能夠?qū)W(wǎng)頁中的物件的位置排版進(jìn)行像素級(jí)的精確控制,支援幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁物件和模型樣式編輯的能力,並能夠進(jìn)行初步交互設(shè)計(jì),是目前基於文字展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。 CSS能夠根據(jù)不同使用者的理解能力,簡化或優(yōu)化寫法,針對(duì)各類人群,有較強(qiáng)的易讀性。?
二. CSS的使用方法?
有三種方法可以在網(wǎng)站網(wǎng)頁上使用樣式表:?
內(nèi)嵌樣式- 在HTML元素中使用" style"?屬性
內(nèi)部樣式表-在HTML文檔頭部<head> 區(qū)域使用<style>?元素?來包含CSS
#外部引用- 使用外部CSS?檔案
每種方法都有其優(yōu)缺點(diǎn):?
當(dāng)要在網(wǎng)站上所有或部分網(wǎng)頁上一致地應(yīng)用相同樣式時(shí),可使用外部引用樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式,並將它們連結(jié)到所有網(wǎng)頁,以便確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式,只需在外部樣式表中修改一次,而該更改會(huì)反映到所有與該樣式表相連結(jié)的網(wǎng)頁上。通常外部樣式表以 .css 做為檔案副檔名,例如新聞發(fā)布系統(tǒng)中的公共樣式Common.css。然後在需要此樣式的頁面中將其連結(jié)進(jìn)來,如:?
<link href="/css/Common.css" rel="stylesheet" ?type="text/css"/ >?
當(dāng)人們只是要定義目前網(wǎng)頁的樣式,就可以使用內(nèi)部樣式表。內(nèi)部樣式表是一種級(jí)聯(lián)樣式表,「嵌」在網(wǎng)頁的 <HEAD>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。 如:?
<style type="text/css">
<!-- /* 把宣告的樣式包含在一個(gè)html註解中,這樣可以解決較老的瀏覽器不識(shí)別style的問題*/ -->
body {background:grey;}?
</style>?
#使用內(nèi)嵌樣式以套用級(jí)聯(lián)樣式表屬性到網(wǎng)頁元素上。如:?
<pstyle="@importurl('style3.css');">CSS document</p>?
#<!-- 不能在style屬性中使用@import -->?
如果網(wǎng)頁連結(jié)到外部樣式表,則為網(wǎng)頁所建立的內(nèi)聯(lián)的或內(nèi)部樣式將擴(kuò)充或覆寫外部樣式表中的指定屬性。?
要在網(wǎng)頁上使用外部樣式表的樣式,可將該網(wǎng)頁連結(jié)到樣式表,方法是使用位於 “格式” 選單上的 “樣式表連接” 指令。可以連結(jié)一個(gè)或數(shù)個(gè)樣式表到網(wǎng)頁視圖模式下的目前網(wǎng)頁,或到在資料夾清單中的所選網(wǎng)頁,或到網(wǎng)站上的全部網(wǎng)頁。?
此「樣式」 方塊列出標(biāo)準(zhǔn) HTML 標(biāo)記符,例如標(biāo)題?1,也有嵌入的樣式表或連結(jié)到網(wǎng)頁的外部樣式表中所包含的類別或 ID 選擇器。若要套用樣式至網(wǎng)頁元素,請(qǐng)選取該樣式然後按一下 “樣式” 方塊中的樣式或選取器。?
在 Microsoft FrontPage 2000中,某些格式設(shè)定特性會(huì)作為內(nèi)嵌樣式自動(dòng)套用。例如∶如果使用「邊框與陰影」 指令(在「格式」 選單上)在普通段落周圍套用框,F(xiàn)rontPage 會(huì)寫下格式設(shè)定訊息,作為段落標(biāo)記的內(nèi)嵌樣式屬性(例如∶ <pstyle=" border-style: solid">)。然而某些屬性的應(yīng)用需要使用 CSS,其他則需要使用 HTML 。如果人們只想使用 CSS 套用內(nèi)嵌樣式,可使用 “樣式”按鈕(位於網(wǎng)頁元素的 “屬性” 對(duì)話方塊中)套用類別或 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(字體大小)屬性來定義字體的樣式:
<!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>