爲什麼需要CSS樣式表？
在我們在開發網站時，我們知道HTML標籤的外觀樣式比較單一，一般顏色只有黑白、字體類型和大小無變化，而樣式表的作用相當於華麗的衣服，使用樣式表使我們的網站更漂亮；使用樣式表能實現內容與樣式表分離，同時也方便團隊開發（美工做樣式，程序員寫代碼）。所以我們在開發網站時，樣式表是不可缺少的。
接下來我們來看一下怎麼樣使用樣式表，首先來看一下樣式表的基本語法：
<STYLE type=”text/css”>
P{color:red;font-size:30px;font-family:隸書;}
….
</STYLE>
注：<STYLE type=”text/css”>爲文檔樣式表的開始,類型爲CSS樣式 </STYLE>爲聲明文檔樣式表結束,包含的部分爲樣式規則。
樣式規則:
HTML選擇器{樣式屬性：屬性值; 樣式屬性：屬性值;}
P 爲選擇器 color 爲樣式屬性 red 爲屬性值
示例：
<HTML>
<HEAD>
<TITLE>樣式規則</TITLE>
<STYLE type="text/css">
P { color:red; font-family:"隸書"; font-size:24px;}
</STYLE>
</HEAD>
<BODY>
<H2>靜夜思</H2>
<P>牀前明月光，</P>
<P>疑是地上霜。</P>
<P>我是郭德剛，</P>
<P>低頭思故鄉。</P>
</BODY>
</HTML>
以上代碼所有的段落都採用P樣式，保證風格統一，但是如果希望其他的標籤也能採用P標籤的樣式，怎麼辦？
也就是讓其他標籤和P標籤應該採用相同的樣式，所以要爲它們定義一個共享樣式。這種樣式我們稱爲類樣式（class）
語法：
<STYLE type="text/css">
.red { color:red; font-family:"隸書"; font-size:24px; }
……
</STYLE>
樣式規則爲: .類名{樣式屬性：屬性值;}
示例：
<HTML>
<HEAD>
<TITLE>樣式規則</TITLE>
<STYLE type="text/css">
.red
{ color:red; font-family:"隸書"; }
</STYLE>
</HEAD>
<BODY>
<H2 class="red">靜夜思</H2>
<P class="red">牀前明月光，</P>
<P class="red">疑是地上霜。</P>
<P>我是郭德剛，</P>
<P class="red">低頭思故鄉。</P>
</BODY>
</HTML>
注：應用類選擇器，只
可 如：<H2 class="red">靜夜思</H2>
接着我們來看一下常用的樣式屬性，這也是我們做網站常用到的。
文本屬性：
|
文本屬性 |
說 明 |
|
font-size |
字體大小 |
|
font-family |
字體類型 |
|
font-style |
字體樣式 |
|
color |
設置或檢索文本的顏色 |
|
text-align |
文本對齊 |
示例：
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>文本屬性樣式</TITLE>
<STYLE type="text/css">
p
{ font-size: 12px;
font-family: "宋體";
text-align:left;
}
/* 大字體的樣式*/
.bigFont
{ font-size: 16px;
color:red; }
</STYLE>
</HEAD>
<BODY>
【新聞】[設搜狐爲首頁] 9月1日
<p class="bigFont">·世錦賽劉翔12秒95奪冠成就大滿貫</p>
<p>·我國實施不安全食品召回制度 遏制非法出口</p>
<p>·中國代表向聯合國通報軍備透明制度舉措</p>
<p class="bigFont">·博客| 劉翔：最後勝利的感覺真好！ </p>
</BODY>
</HTML>
背景屬性：
|
背景屬性 |
說 明 |
|
background-color |
設置背景顏色 |
|
background-image |
設置背景圖像 |
|
background-repeat |
設置一個指定的圖像如何被重複 可取值repeat-x、 repeat、 no-repeat、repeat-y |
示例：
<STYLE type="text/css">
/* 表格單元格小字體的樣式*/
TD
{
font-size: 14px;
font-family: "宋體";
padding-left:10px;
}
/* 大字體的樣式*/
.bigFont
{
font-size: 16px;
color: #0000FF;
}
/* 表格虛線邊框的樣式*/
.tableBorder
{
border-right-width: 2px;
border-right-style: dashed;
}
/*設置無下劃線的超連接樣式*/
A {
color: blue;
text-decoration: none;
}
A:hover{ /*鼠標在超鏈接上懸停時變爲顏色*/
color: red;
}
/*設置表格的背景圖片樣式*/
table
{
background-image: url(images/type_back.jpg);
background-repeat:no-repeat;
}
</STYLE>
方框屬性：
|
屬 性 |
CSS名稱 |
說 明 |
|
邊界屬性 |
margin-top |
設置對象的上邊距 |
|
margin-right |
設置對象的右邊距 |
|
|
margin-bottom |
設置對象的下邊距 |
|
|
margin-left |
設置對象的左邊距 |
|
|
邊框屬性 |
border-style |
設置邊框的樣式 |
|
border-width |
設置邊框的寬度 |
|
|
border-color |
設置邊框的顏色 |
|
|
填充屬性 |
padding-top |
設置內容與上邊框之間的距離 |
|
padding-right |
設置內容與右邊框之間的距離 |
|
|
padding-bottom |
設置內容與下邊框之間的距離 |
|
|
padding-left |
設置內容與左邊框之間的距離 |
示例：
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>表格虛線框的樣式</TITLE>
<STYLE type="text/css">
.tableBorder
{
border-right-width: 3px;/*設置單元格右邊框寬度爲3像素*/
border-right-color:red;
border-right-style:dashed;/*設置單元格右邊框爲虛線框*/
padding-top:20px;
padding-left:10px; /*設置單元格里文字與左邊框的距離爲10像素*/
}
TR{
background:yellow;/*表格行背景*/
}
</STYLE>
</HEAD>
<BODY>
<TABLE border="0">
<TR>
<TD class="tableBorder">手機衝值</TD>
<TD class="tableBorder">電子彩票</TD>
</TR>
<TR>
<TD class="tableBorder">電腦硬件</TD>
<TD class="tableBorder">數碼相機</TD>
</TR>
</TABLE>
</BODY>
</HTML>
特殊樣式（超連接）
a:link {color: #FF0000} /* 未被訪問的鏈接 紅色 */
a:visited {color: #00FF00} /* 已被訪問過的鏈接 綠色 */
a:hover {color: #FFCC00} /* 鼠標懸浮在上的鏈接 橙色 */
a:active {color: #0000FF} /* 鼠標點中激活鏈接 藍色 */
說了這麼多，我們來看下面一個示例，也是在做網站常用的。
圖片按鈕示例：
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>圖片按鈕及細邊框</TITLE>
<STYLE type="text/css">
/*細邊框的文本輸入框*/
.textBorder
{
border-width:1px;
border-style:solid
}
/*設置圖片按鈕*/
.picButton{
background-image: url(images/back.jpg);/* 背景圖像爲images文件夾下的back.jpg */
margin: 0px;/* 按鈕的邊界、邊框、填充均爲0像素 */
border:0px;
padding: 0px;
height: 23px;/* 設定按鈕寬度、高度和圖片大小一樣 */
width: 82px;
font-size: 14px; /*設置按鈕上的字體大小爲14像素*/
}
</STYLE>
</HEAD>
<body>
<form action=”#” method=”post”>
<input type=”text” class=”textBorder” name=”txtName”/>
<input type=”button” class=”picButton” value=”提交”/>
</body>
</html>
寫了這麼多，下面我們總的來說一下樣式表的三類應用方式：
內嵌樣式表、行內（嵌入）樣式表、外部樣式表
內嵌樣式使用如下：
<HEAD>
<STYLE type="text/css">
樣式規則
</ STYLE>
</HEAD>
注：如果希望本網頁內的所有同類標籤都採用統一樣式，這時應採用內嵌樣式。
行內（嵌入）樣式使用如下：
<P style = "color:red;font-size:30px;font-family:隸書;">
這個段落應用了樣式
<P>
注：某段文字和其他段落文字顯示風格不一樣,這時應採用行內樣式, 行內樣式使用範圍更小，只適用於某一個標籤，對其他標籤不起作用
外部樣式的使用如下：
a.鏈接（LINK ）外部樣式表
使用LINK（鏈接）標籤 :
<HEAD>
<LINK href="newsyle.css" rel="stylesheet" type="text/css">
</HEAD>
b.導入（@import）外部樣式表
使用@import導入 ，語法：
<HEAD>
<STYLE TYPE="text/css">
@ import newstyle.css;
</STYLE>
</HEAD>
注：一個網站中多個頁面的樣式保持一致時，我們採用外部樣式表
希望給初學者帶來幫助。