木子李教程之CSS全攻略
第一次正式寫教程，開門見山。
CSS全稱Cascading Style Sheet。層疊式樣式表。從三年前就開始使用CSS了，但一直以來(lái)都小看了它。CSS的出現(xiàn)其實(shí)是一次革命，它試圖將網(wǎng)站的內(nèi)容與表現(xiàn)分開。
一、CSS的四種實(shí)現(xiàn)方式：
1.內(nèi)嵌式：
<style type="text/css">
<!--
CSS代碼段
-->
</style>
2.外鏈?zhǔn)剑?BR><link href="*.css" rel="stylesheet" type="text/css">
3.導(dǎo)入式
<style type="text/css">
<!--
@import url("*.css");
-->
</style>
3.屬性式：
<div style="position:absolute; width:200px; height:115px; z-index:1; left: 209px; top: 154px;"></div>
二.CSS的定義：
選擇對(duì)象{屬性1:值1;屬性2:值2;屬性3:值3;屬性n:值n……}
如：
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四種選擇對(duì)象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊對(duì)象 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置標(biāo)符，如：DIV、TD、H1。HTML selector的作用范圍是應(yīng)用了該樣式的所有頁(yè)面中的所有該置標(biāo)符。
例：
<html>
<head>
<title>藝網(wǎng)CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
td
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td>藝網(wǎng)--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設(shè)計(jì)風(fēng)格 網(wǎng)聚全球藝術(shù)精華</td>
</tr>
</table>
</body>
</html>
注意：在<TD>中沒(méi)有應(yīng)用什么，其中文字自動(dòng)變紅色。
2.class selector
定義class selector需要往其名稱其加一個(gè)點(diǎn)“.”。如“.classname”。class selector的作用范圍是所有包含“class="classname"”的置標(biāo)符。
例：
<html>
<head>
<title>藝網(wǎng)CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.fontRed
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td class="fontRed">藝網(wǎng)--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設(shè)計(jì)風(fēng)格 網(wǎng)聚全球藝術(shù)精華</td>
</tr>
</table>
</body>
</html>
注意：在第二個(gè)<TD>中沒(méi)有“class="fontRed"”，所以文字沒(méi)有變紅色。
3.ID selector
定義ID selector需要往其名稱其加一個(gè)點(diǎn)“#”。如“#IDname”。ID selector的作用范圍是所有包含“ID="classname"”的置標(biāo)符。
例：
<html>
<head>
<title>藝網(wǎng)CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
#fontRed
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td ID="fontRed">藝網(wǎng)--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設(shè)計(jì)風(fēng)格 網(wǎng)聚全球藝術(shù)精華</td>
</tr>
</table>
</body>
</html>
注意：在第二個(gè)<TD>中沒(méi)有“ID="fontRed"”，所以文字沒(méi)有變紅色。
4.特殊對(duì)象
特殊對(duì)象包括四種，是針對(duì)鏈接對(duì)象設(shè)置的:
a:hover 鼠標(biāo)移上時(shí)的超鏈接
a:link 常規(guī)，非訪問(wèn)超鏈接
a:visited 訪問(wèn)過(guò)的超鏈接
a:active 鼠標(biāo)點(diǎn)擊時(shí)的超鏈接
特殊對(duì)象的作用范圍是所有<a>置標(biāo)符（這句話有待商榷，因?yàn)橄旅婧芸炀陀幸环N方法可以把“所有”兩個(gè)字推翻）。
例：
<html>
<head>
<title>藝網(wǎng)CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
a
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td><a href="http://theartemis.cn">藝網(wǎng)--ArtHtml.com</a></td>
</tr>
<tr>
<td>探索民族設(shè)計(jì)風(fēng)格 網(wǎng)聚全球藝術(shù)精華</td>
</tr>
</table>
</body>
</html>
注意下面，很有用?。?！
a.classname:hover
a#IDname:hover
這兩種寫法，是分別配合.classname與#IDname使用的。它的作用范圍變成了所有包含“class="classname"”或“ID="IDname"”的<a>置標(biāo)符。這種寫法，可以幫助你在同一頁(yè)面中實(shí)現(xiàn)多種a:hover效果，可以看一下藝網(wǎng)(http://theartemis.cn)的主頁(yè)上導(dǎo)航欄文字與普通文章標(biāo)題在鼠標(biāo)時(shí)的區(qū)別。
四.應(yīng)用：
1.置標(biāo)符 自動(dòng)應(yīng)用
2.特制類 class="NAME"
3.ID ID="IDname"
4.特殊對(duì)象 自動(dòng)應(yīng)用
五.CSS屬性
CSS的屬性有很多，像上文中用到最多的color，表示文字的顏色。background-color表示背景色。這個(gè)是最主要的，但是因?yàn)闆](méi)有什么難度，參考一下相關(guān)手冊(cè)就可以了。
CSS屬性參考：http://theartemis.cn/eNews/news/200502/0011_0000000271.html
最后最需要的可能就是一個(gè)完整的CSS應(yīng)用的例子了。我這里沒(méi)有給。因?yàn)殡S便打開一個(gè)網(wǎng)頁(yè)的源代碼，例子隨處可見
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇
