📄 css1_1.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="StyleSheet" href="../chn.css" type="text/css">
<title>CSS的规则</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="主页制作DIY--http://homediy.cjb.net" 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的规则</td>
</tr>
<tr>
<td width="11%" align="right" rowspan="5"></td>
<td width="89%">CSS 的每一条规则(rule)都有如下的形式 <pre> selector {property:value; property:value; ...}</pre>
<ul>
<li>selector: 第一种是 HTML 的 tag, 比如 P, BODY, A 等等.第二种叫 class,
第三种叫 ID. 你这里先知道有这么三种，具体的咱们以后在谈. </li>
<li>property: 就是那些将要被修改的性质, 比如 color </li>
<li>value: 给 property 的值, 比如给 color 的可以是 red </li>
</ul>
<p>请看下面的一个典型规则</p>
<pre> H1 {color: red}</pre>
<p>用这条规则所有的1号标题都变成红色的了.
一般来说我们把所有的规则全包括在 STYLE 元素里面放到 HEAD 里面.
请试验下面的<br>
网页 </td>
</tr>
<tr>
<td width="89%" bgcolor="#E8E8E8"><pre><HTML>
<HEAD></pre>
</td>
</tr>
<tr>
<td width="89%" bgcolor="#DBFDF7"><pre> <STYLE TYPE<font face="宋体" size="2" color="#000000">="text/css"></font>
<!--
H1 { color: red; font-size: 30px; font-family: impact }
P { text-indent: 1cm; background: yellow; font-family: courier }
-->
</STYLE></pre>
</td>
</tr>
<tr>
<td width="89%" bgcolor="#E8E8E8"><pre></HEAD>
<BODY>
<H1>主页制作DIY</H1>
<P>如果本行的背景不是黄色，则说明你必须升级你的浏览器到IE 4.0以上（或Netscape 最新版），否则无法完成此CSS教学。</P>
</BODY>
</HTML></pre>
</td>
</tr>
<tr>
<td width="89%"><a tppabs="http://www.nease.net/~haidian/dhtml_t/css_basic1.html" href="css_basic1.htm">点这里</a> 看上面的例子. <p>怎么样? 很简单把.
你只要知道所有可以改动的元素和它们的性质灵活的运用 CSS 的规则,
你就可以使得你的网页制作更上一层楼.
下面一节我们将要告诉你其他两种 selector 以及其他一些基础. </td>
</tr>
</table>
<hr>
<p align="right"><a href="index.htm"><img src="../images/back-button-off.gif" alt="上一页--返回CSS教学目录" border="0" WIDTH="31" HEIGHT="31"></a><a href="css1_2.htm"><img src="../images/forward-button-off.gif" alt="下一页--CSS的三种selector" 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="返回“主页制作DIY”首页" 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 + -