HTML CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素標(biāo)簽的樣式。比如我們前面所學(xué)的給<body>加一個(gè)背景色。給<p>標(biāo)簽里面的文字改變顏色，這些都是用css做到的
如何使用CSS
CSS 是在 HTML 4 開(kāi)始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過(guò)以下方式添加到HTML中:
內(nèi)聯(lián)樣式- 在HTML元素中使用"style"?屬性
內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style>?元素?來(lái)包含CSS
外部引用 - 使用外部 CSS?文件
最好的方式是通過(guò)外部引用CSS文件，css文件指的是以 .css 結(jié)尾的文件，我們的html文件是以.html結(jié)尾的
在本站的HTML教程中我們使用了內(nèi)聯(lián)CSS樣式來(lái)介紹實(shí)例，這是為了簡(jiǎn)化的例子，也使得你能更容易在線(xiàn)編輯代碼并在線(xiàn)運(yùn)行實(shí)例。
你可以通過(guò)本站的CSS教程?CSS 教程學(xué)習(xí)更多的CSS知識(shí).
內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式就是在HTML 標(biāo)簽內(nèi)部直接使用 style 屬性直接定義，我們前面的課程也有提到，看下面的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p style="color: red; margin-left: 20px"> 我是內(nèi)聯(lián)樣式 </p> </body> </html>
上面的css樣式是將<p>標(biāo)簽里的文字變成黑色，然后文字往左邊移動(dòng)20px，px指的是像素
代碼運(yùn)行結(jié)果：
內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí)，比如將兩個(gè)<P>標(biāo)簽設(shè)成紅色，如果用內(nèi)聯(lián)樣式定義的話(huà)，需要在兩個(gè)<P>標(biāo)簽都要寫(xiě)上css樣式，如果是5,10<P>標(biāo)簽?zāi)?，是不是很麻煩，這就要用的我們的內(nèi)部樣式表。你可以在<head> 部分通過(guò) <style>標(biāo)簽定義內(nèi)部樣式表，像下面這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
<style type="text/css">
p{color: red}
</style>
</head>
<body>
<p>
我的顏色是在 head 標(biāo)簽里面定義的
</p>
<p>
我的顏色是在 head 標(biāo)簽里面定義的
</p>
<p>
我的顏色是在 head 標(biāo)簽里面定義的
</p>
</body>
</html>代碼運(yùn)行結(jié)果：
外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候，外部樣式表將是理想的選擇。
外部樣式表是用<link>標(biāo)簽引入一個(gè)外部css文件，使用外部樣式表，你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。
比如一個(gè)css文件里面定義的是把<body>的背景色變成黃色，<h1>標(biāo)題變成紅色，<p>變成藍(lán)色，css文件如下
body{background-color:yellow;}
p{color: blue;}
h1{color: red;}在HTML文件引入用<link>引入css文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> <link rel="stylesheet" type="text/css" href="first.css"> </head> <body> <h1>外部樣式表</h1> <p> 我的顏色是用外部樣式表定義的 </p> <p> 我的顏色是用外部樣式表定義的 </p> </body> </html>
程序運(yùn)行結(jié)果：
HTML 樣式標(biāo)簽
| ? ? ? 標(biāo)簽 | ? ? ? 描述 |
| ? ? <style> | ? ??定義文本樣式 |
| ? ??<link> | ? ??定義資源引用地址 |
實(shí)例
我們前面學(xué)的<a>鏈接標(biāo)簽，下面是帶著下劃線(xiàn)的，我們用css樣式把下劃線(xiàn)去掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <a href="http://miracleart.cn/" style="text-decoration:none;">訪(fǎng)問(wèn) php.cn!</a> </body> </html>
程序運(yùn)行結(jié)果：
訪(fǎng)問(wèn)我們的 CSS 教程，學(xué)習(xí)更多有關(guān)樣式的知識(shí)。
