📄 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 + -