那將 CSS 與網頁結合,
主要就會透過 CSS 選取器來對 HTML 標籤進行控制.
選取器有三種:
1. 標籤選取器
2. Class 選取器
3. ID 選取器
利用先前範例來進行修改看看改變狀態.
原先網頁:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Conntent</title>
</head>
<body bgcolor="99FF99" text="#FFFFFF">
<table width ="608" hright="320" border="1">
<tr>
<td align= "center" bgcolor="blue">Blue</td>
<td align= "center" bgcolor="green">Green</td>
<td align= "center" bgcolor="red">Red</td>
</tr>
<p>
ABCDEFG
</p>
</table>
<a href ="http://www.google.com.tw/" target="_black">Botton to connent the network </a>
</body>
</html>
1. 標籤選取器 - 將,<p> 和 </p> 內的字體做調整.
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Conntent</title>
<style>
p{
font-family: Arial;
color:#F00;
}
</style>
</head>
<body bgcolor="99FF99" text="#FFFFFF">
<table width ="608" hright="320" border="1">
<tr>
<td align= "center" bgcolor="blue">Blue</td>
<td align= "center" bgcolor="green">Green</td>
<td align= "center" bgcolor="red">Red</td>
</tr>
<p>
ABCDEFG
</p>
</table>
<a href ="http://www.google.com.tw/" target="_black">Botton to connent the network </a>
</body>
</html>
由粗體部分來看,
利用大括號 { } 將所有屬性與值包起來,
表示一個完整的 CSS 宣告.
其中屬性與值用 : 來區隔, 屬性與屬性用 ; 來區隔.
在 CSS 宣告結束後,
網頁內的所有對應標籤內容就會套用宣告的樣式效果.
2. Class 選取器
3. ID 選取器
From 精通 CSS 網頁設計法則
沒有留言:
張貼留言