css (Cascading Style Sheets),層疊樣式表,為html標(biāo)記語言提供了一種樣式描述,定義了其中元素的顯示方式。用于控制Web頁面的外觀。通過使用 css 實(shí)現(xiàn)頁面的內(nèi)容與表現(xiàn)形式分離,極大提高了工作效率 。樣式存儲(chǔ)在樣式表中,通常放在 <head> 部分或存儲(chǔ)在 外部 CSS 文件中。作為網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)的趨勢(shì),CSS 取得了瀏覽器廠商的廣泛支持,正越來越多的被應(yīng)用到網(wǎng)頁設(shè)計(jì)中去。 網(wǎng)頁現(xiàn)在的新標(biāo)準(zhǔn)是 W3C 。目前的模式是 html + Css + JavaScript ,如何理解呢,就是 Html 是網(wǎng)頁的結(jié)構(gòu),CSS 是網(wǎng)頁的樣式,JavaScript是行為。結(jié)構(gòu)就是蓋房子先要把結(jié)構(gòu)建出來,然后用 CSS 來裝飾。其實(shí)你在用 Dreamweaver 做網(wǎng)頁時(shí)就已經(jīng)用到了 CSS,比如你用 DW 的屬性面板來設(shè)置一個(gè)字的字體、顏色和大小,當(dāng)你選好后,就會(huì)自動(dòng)生成一個(gè) .style1 的紅色代碼,在 <style></style> 之間不知道你注意過沒有,這就是 CSS。 如何使用 CSSCSS 是在 HTML 4 開始使用的,是為了更好的渲染 HTML 元素而引入的. CSS 可以通過以下方式添加到 HTML 中:
最好的方式是通過外部引用 CSS 文件 內(nèi)聯(lián)樣式當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí),就可以使用內(nèi)聯(lián)樣式,你可以在 <head> 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色。 實(shí)例<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> HTML樣式實(shí)例 - 背景顏色背景色屬性(background-color)定義一個(gè)元素的背景顏色: <!DOCTYPE html> <html> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> </body> </html> 早期背景色屬性(background-color)是使用 bgcolor 屬性定義。 HTML 樣式實(shí)例 - 字體,字體顏色 ,字體大小我們可以使用 font-family(字體),color(顏色),和 font-size(字體大小)屬性來定義字體的樣式: 實(shí)例<!DOCTYPE html> <html> <body> <h1>A heading</h1> <p>A paragraph.</p> </body> </html> 現(xiàn)在通常使用 font-family(字體),color(顏色),和 font-size(字體大小)屬性來定義文本樣式,而不是使用 <font> 標(biāo)簽。 HTML 樣式實(shí)例 - 文本對(duì)齊方式使用 text-align(文字對(duì)齊)屬性指定文本的水平與垂直對(duì)齊方式: 實(shí)例<!DOCTYPE html> <html> <body> <h1>Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html> 文本對(duì)齊屬性 text-align 取代了舊標(biāo)簽 <center> 。 內(nèi)部樣式表當(dāng)單個(gè)文件需要特別樣式時(shí),就可以使用內(nèi)部樣式表。你可以在 <head> 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表: 實(shí)例<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> 外部樣式表當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 已棄用的標(biāo)簽和屬性在 HTML 4,原來支持定義 HTML 元素樣式的標(biāo)簽和屬性已被棄用。這些標(biāo)簽將不支持新版本的 HTML 標(biāo)簽。 不建議使用的標(biāo)簽有: <font>,<center>,<strike> 不建議使用的屬性: color 和 bgcolor. |