首頁
一、CSS的四種實現方式：
1.內嵌式：
2.外鏈式：
3.導入式
4.屬性式：
二.CSS的定義：
選擇對像{屬性1:值1;屬性2:值2;屬性3:值3;屬性n:值n……}
如：
三.四種選擇對像
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊對像 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置標符，如：DIV、TD、H1。HTML selector的作用範圍是應用了該樣式的所有頁面中的所有該置標符。
例：
注意：在中沒有應用什麼，其中文字自動變紅色。
2.class selector
定義class selector需要往其名稱其加一個點「.」。如「.classname」。class selector的作用範圍是所有包含「class="classname"」的置標符。
例：
注意：在第二個 中沒有「class="fontRed"」，所以文字沒有變紅色。
3.ID selector
定義ID selector需要往其名稱其加一個點「#」。如「#IDname」。ID selector的作用範圍是所有包含「ID="classname"」的置標符。
例：
注意：在第二個 中沒有「ID="fontRed"」，所以文字沒有變紅色。
4.特殊對像
特殊對像包括四種，是針對鏈接對像設置的:
a:hover 鼠標移上時的超鏈接
a:link 常規，非訪問超鏈接
a:visited 訪問過的超鏈接
a:active 鼠標點擊時的超鏈接
特殊對象的作用範圍是所有置標符（這句話有待商榷，因為下面很快就有一種方法可以把「所有」兩個字推翻）。
例：
注意下面，很有用！！！
四.應用：
1.置標符 自動應用
2.特製類 class="NAME"
3.ID ID="IDname"
4.特殊對像 自動應用
五.CSS屬性
CSS的屬性有很多，像上文中用到最多的color，表示文字的顏色。background-color表示背景色。這個是最主要的，但是因為沒有什麼難度，參考一下相關手冊就可以了。
1.內嵌式：
- 代碼:
<style type="text/css">
<!--
CSS代碼段
-->
</style>
2.外鏈式：
- 代碼:
<link href="http://blogbeta.blueidea.com/*.css" rel="stylesheet" type="text/css">
3.導入式
- 代碼:
<style type="text/css">
<!--
@import url("*.css");
-->
</style>
4.屬性式：
- 代碼:
<div style="position:absolute; width:200px; height:115px; z-index:1; left: 209px; top: 154px;"></div>
二.CSS的定義：
選擇對像{屬性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;}
三.四種選擇對像
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊對像 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置標符，如：DIV、TD、H1。HTML selector的作用範圍是應用了該樣式的所有頁面中的所有該置標符。
例：
- 代碼:
<html>
<head>
<title>藝網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>藝網--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意：在
2.class selector
定義class selector需要往其名稱其加一個點「.」。如「.classname」。class selector的作用範圍是所有包含「class="classname"」的置標符。
例：
- 代碼:
<html>
<head>
<title>藝網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">藝網--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意：在第二個
3.ID selector
定義ID selector需要往其名稱其加一個點「#」。如「#IDname」。ID selector的作用範圍是所有包含「ID="classname"」的置標符。
例：
- 代碼:
<html>
<head>
<title>藝網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">藝網--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意：在第二個
4.特殊對像
特殊對像包括四種，是針對鏈接對像設置的:
a:hover 鼠標移上時的超鏈接
a:link 常規，非訪問超鏈接
a:visited 訪問過的超鏈接
a:active 鼠標點擊時的超鏈接
特殊對象的作用範圍是所有置標符（這句話有待商榷，因為下面很快就有一種方法可以把「所有」兩個字推翻）。
例：
- 代碼:
<html>
<head>
<title>藝網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://www.ArtHtml.com">藝網--ArtHtml.com</a></td>
</tr>
<tr>
<td>探索民族設計風格 網聚全球藝術精華</td>
</tr>
</table>
</body>
</html>
注意下面，很有用！！！
- 代碼:
a.classname:hover
a#IDname:hover
四.應用：
1.置標符 自動應用
2.特製類 class="NAME"
3.ID ID="IDname"
4.特殊對像 自動應用
五.CSS屬性
CSS的屬性有很多，像上文中用到最多的color，表示文字的顏色。background-color表示背景色。這個是最主要的，但是因為沒有什麼難度，參考一下相關手冊就可以了。