在講HTML時說過，有個Style標籤是在CSS裏用的，是的，在HTML中添加CSS樣式必須要用到Style，在標籤裏單獨定義標籤屬性時用的是Style屬性。上一節我們也說過，先不用管那個Style標籤，那麼這一節，我們就單獨來解決這個Style標籤。
看一看幫助文檔，他是怎麼說Style的，指定頁面的樣式表，Style 元素只能在 HTML 文檔的 Head節內使用，那麼究竟該怎麼指定呢？
有三種方式，看下圖：
最常用的要數第一層，外部引用，這樣的化程序員和美工設計者分工非常明確，便於分開操作，也可以增加代碼的複用性，後來需要補充的屬性可以頁面嵌入，很少用內聯的形式。其實除了外部引入方式，我們沒有接觸過，頁面嵌入和內聯形式都接觸過了，就再都介紹介紹吧。
1.內聯引入
思想：通過標籤的Style屬性設置當前標籤的樣式。
例子：
<html> <head> </head> <body> <tableborder="10px"bordercolor="#0000FF"cellspacing="0"> <caption>DHTML技術</caption> <tr style="background-color:#FF0000; font-size:18px"> <th>名稱</th><th>HTML</th><th>CSS</th><th>JavaScript</th> <th>DOM</th><th>Jquery</th><th>Ajax</th></tr> <tr style="background-color:#00FF00; font-size:36px"> <td>難易程度</td><td>非常容易</td><td>特別容易</td><td>比較容易</td> <td>較容易</td><td>容易</td><td>相當容易</td></tr> <tr style="background-color:#FF0000; font-size:18px"> <td>獨立新技術</td><td>是</td><td>是</td><td>是</td><td>是</td> <td>否</td><td>否</td></tr> <tr style="background-color:#00FF00; font-size:36px"> <td>深度要求</td><td>很深</td><td>深一點</td><td>更深一點</td> <td>深</td><td>較深</td><td>最深</td></tr> <tr style="background-color:#FF0000; font-size:18px"> <td>是否學過</td><td>Yes</td><td>Yes</td><td>Yes</td> <td>Yes</td><td>Yes</td><td>Yes</td></tr> </table> </body> </html> |
紅色的代碼是嵌入在tr標籤內，輸入內聯形式。
2.頁面嵌入
思想：在Head標籤內定義選擇器，美化當前頁面。
例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <style type="text/css"> div{ background:#00ff00} .Waring{ background:#ff0000; cursor:help} #OnePerson{font-size:36px;color:#F0F} </style> </head> <body> <div>半路</div> <hr/> <p>薛凱琪</p> <hr/> <input id="OnePerson"type="text"value="一個人失憶"/> </body> </html> |
這回懂了上一節的遺留問題，其實看看就能知道，太簡單了。
3.外部引入
思想：單獨建立一個Css文件，在Css文件中寫Css代碼樣式，在HTML代碼中通過Link標籤導入，效果和頁面嵌入一樣。
例子：
Css文件名css1.css，文件代碼：
p{ font-size:24px;color:#00ff00}
div{font-size:xx-large;background-color:#F0F;color:#FFF}
a:active{color:Green}
a:hover{cursor:move}
a:link{color:Red}
a:visited{color:#FF0}
HTML頁面代碼：
<html>
<head>
<link type="text/css"rel="Stylesheet" href="css1.css"/>
</head>
<body>
<div>如煙</div>
<hr/>
<p>五月天</p>
<hr/>
<a href="www.baidu.com">百度首頁</a>
</body>
</html>
Css文件代碼和頁面嵌入類型代碼格式一樣。注意link標籤的引入。
按照我的進度，今天應該是CSS的最後一節了，下一節將介紹JavaScript，JavaScript在目前非常火，具有跨平臺性，甚至因爲JavaScript技術誕生出好多綜合技術，相當了得，敬請期待下一節吧。