?? css1_8.htm
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="StyleSheet" href="../chn.css" type="text/css">
<title>CSS與HTML的結合方式</title>
</head>
<body background="../images/background.gif" bgcolor="#FFFFFF">
<!-- Spidersoft WebZIP Ad Banner Insert -->
<TABLE width=100% border="0" cellpadding="0" cellspacing="0">
<TR>
<TD>
<ILAYER id=ad1 visibility=hidden height=60></ILAYER>
<NOLAYER>
<IFRAME SRC="http://www.spidersoft.com/ads/bwz468_60.htm" width="100%" height="60" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></IFRAME>
</NOLAYER>
</TD>
</TR>
</TABLE>
<!-- End of Spidersoft WebZIP Ad Banner Insert-->
<p align="center"><a href="../index.htm"><img src="../images/title.gif" alt="title.gif (2221 bytes)" border="0" WIDTH="380" HEIGHT="56"></a></p>
<p align="center"><font color="#FF0000">CSS入門</font></p>
<table border="0" width="100%">
<tr>
<td width="11%" align="right"><img src="../images/blue-rect.jpg" alt="blue-rect.jpg (3374 bytes)" WIDTH="20" HEIGHT="20"></td>
<td width="89%" bgcolor="#D5F8CD">CSS與HTML的結合方式</td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%"></td>
</tr>
<tr>
<td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
<td width="89%"><font color="#FF0080">方式一</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">第一種方式其實大家都已很熟悉了，我們在前面的例程中已經多次用到過。這種方式就是將所定義的CSS內容書寫在<STYLE
TYPE="text/css">和</STYLE>這一對標簽之間。</td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"><HTML><br>
<HEAD><br>
<TITLE> 頁面標題 </TITLE> </td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#C8ECFD"><STYLE TYPE="text/css"> <br>
<font color="#008000">此處放置您的CSS內容</font><br>
</STYLE> </td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"></HEAD><br>
<BODY><br>
</BODY><br>
</HTML>-</td>
</tr>
<tr>
<td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
<td width="89%"><font color="#FF0080">方式二</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">第二種方式是將CSS內容單獨保存為一個文本文件，再由<LINK>標簽來調用。這種方式的優點顯而易見，我們只需要修改該定義文件之中的內容，便可改變整個網站的頁面風格（若都使用該樣式表文件）。當然你也可在同一網站不同板塊頁面使用不同的外部樣式表文件，修改樣式表文件時只改動部分頁面風格。</td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"><HTML><br>
<HEAD><br>
<TITLE> 頁面標題 </TITLE> </td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#C8ECFD"><strong><font face="Arial" size="2"><LINK
REL=STYLESHEET TYPE="text/css" HREF="</font><font color="#008000" face="Arial" size="2">http://</font><font size="2" color="#008000">樣式表文件名</font><font color="#008000" face="Arial" size="2">.css</font><font face="Arial" size="2">"> </font></strong></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"></HEAD><br>
<BODY><br>
</BODY><br>
</HTML></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%"><font color="#FF8040">注：如果樣式表文件就在本地，鏈接語句不必添加</font><font color="#008000">http://</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">可能有許多朋友要問，外部樣式表文件該如何書寫呢？其實，你只要將方式一中<STYLE
TYPE="text/css">和</STYLE>之間的定義內容(綠色部分)保存成一個以"css"為擴展名的文本文件即可。另外，如果將<HTML>到</HTML>所包含的全部內容一并保存也一樣可以。</td>
</tr>
<tr>
<td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
<td width="89%"><font color="#FF0080">方式三</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">方式三是可以將樣式的定義直接加到各標簽之后，我們通過一個例子來說明</td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"><HTML><br>
<HEAD><br>
<TITLE> 頁面標題 </TITLE><br>
</HEAD><br>
<BODY> </td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#C8ECFD"><P <font color="#008000">STYLE="color: . .
."</font>> 需使用該樣式風格的段落 </P></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"></BODY><br>
</HTML></td>
</tr>
<tr>
<td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
<td width="89%"><font color="#FF0080">方式四</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">最后這種方法在Netscape瀏覽器中無法正確顯示，因此并不推薦大家使用</td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"><HTML><br>
<HEAD><br>
<TITLE> 頁面標題 </TITLE> </td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#C8ECFD"><STYLE TYPE="text/css"><br>
@import url(<font color="#008000"><font size="2"><strong>樣式表文件名</strong></font>.css</font>);
<br>
</STYLE></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%" bgcolor="#E8E8E8"></HEAD><br>
<BODY><br>
</BODY><br>
</HTML></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%"></td>
</tr>
</table>
<hr>
<p align="right"><a href="css1_7.htm"><img src="../images/back-button-off.gif" alt="上一頁--空格與邊框" border="0" WIDTH="31" HEIGHT="31"></a><a href="css1_9.htm"><img src="../images/forward-button-off.gif" alt="下一頁--CSS同低版本瀏覽器的兼容性" border="0" WIDTH="31" HEIGHT="31"></a></p>
<p align="center"><a href="index.htm">返回CSS教程目錄</a></p>
<p align="center"><a href="../index.htm"><img src="../images/home.gif" alt="home.gif (267 bytes)" border="0" WIDTH="32" HEIGHT="32"><br>
返回主頁</a></p>
<p> </p>
<layer src="http://www.spidersoft.com/ads/bwz468_60.htm" visibility=hidden id=a1 width=600 onload="moveToAbsolute(ad1.pageX,ad1.pageY); a1.clip.height=60;visibility='show';"></layer>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -