📄 css1_2.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="StyleSheet" href="../chn.css" type="text/css">
<title>CSS的三种selector</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的三种selector</td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">上一节开始我们讨论 CSS (Cascading Style Sheet) 的基础.
告诉你有三种 Selector. 但只介绍了其中的 HTML selector. <br>
这一节我们把三种都详细介绍给你 <ul>
<li>HTML selector </li>
<li>class selector: </li>
<li>ID selector: </li>
</ul>
</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">HTML selector</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS
定义了它们, 在整页中, 这个 Tag 的性质就按照你的定义来显示了. HTML
selector 的语法如下 <pre> <b>tag {property:value}</b></pre>
<p>比如我们想叫 H1 的颜色是红的 </p>
<pre> H1 {color: red}</pre>
<p>这里还要告诉你 CSS 的一个特点, 它可定义好几个 selector 在一个
rule 里. 比如 </p>
<pre> H1, H2, TD {color: red}</pre>
<p>这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色. </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">Class selector</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">Class selector 有两种, 一种叫相关 class selector, 它跟一个
HTML 的 tag 有关系. 它的语法是 <pre> <b>tag.Classname {property:value}</b></pre>
<p>比如我们想叫一些而不是全部 H1 的颜色是红的 </p>
<pre> H1.redone {color: red}</pre>
<p>这样在下面的语句中, 第一个 H1 是红色的, 而第二个就不是了 </p>
<pre><H1 class="redone">红色的题目</H1>
<H1>普通的题目</H1></pre>
<p>第二种是独立 class selector . 它可被任何 HTML tag 所应用.
它的语法如下 </p>
<pre> <b>.Classname {property:value}</b></pre>
<p>假如我们有下面这个定义 </p>
<pre> .blueone {color: blue}</pre>
<p>那么我们可以把他应用到不同的 Tag 当中去. 比如 </p>
<pre><H1 class="blueone">蓝色的题目</H1>
<P class="blueone">蓝色的段落</P></pre>
<p>显然 class selector 给了我们更多的自由. </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">ID selector</font></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%">ID selector 其实跟独立 class selector 的功能一样.
而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML <br>
元素有帮助. 它的语法如下 <pre> <b>#IDname {property:value}</b></pre>
<p>假如我们有下面的定义 </p>
<pre> #yelowone {color: yellow}</pre>
<p>我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如 </p>
<pre> <SPAN ID="yellowone">text here</SPAN></pre>
<p>你可能觉得既然 ID selector 和独立 class selector 功能一样,
为什么两者都存在呢. 如果你知道用 CSS-P 来定位的话, <br>
你就明白它们的区别了. 有 ID 的 HTML 元素可以被 CSS-P和 JavaScript
来操纵 </p>
<p>到现在为止, 你已经大概知道如何来写 CSS 的定义了,
下面五节我们将会告诉你如何用 CSS 来操纵或修改 <ul>
<li><a href="css1_3.htm">字体</a> </li>
<li><a href="css1_4.htm">文字间的空间和修饰</a></li>
<li><a href="css1_5.htm">列表 </a></li>
<li><a href="css1_6.htm">颜色与背景</a> </li>
<li><a href="css1_7.htm">空格与边框</a> </li>
</ul>
</td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%"></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%"></td>
</tr>
<tr>
<td width="11%" align="right"></td>
<td width="89%"></td>
</tr>
</table>
<hr>
<p align="right"><a href="css1_1.htm"><img src="../images/back-button-off.gif" alt="上一页--CSS的规则" border="0" WIDTH="31" HEIGHT="31"></a><a href="css1_3.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>
<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 + -