ITPOW教程 从用出发
一、认识样式表内容
在前一讲中我们已经接触了样式表,并且知道如何创建、使用一个空白的样式表了,下面就是我们主要的工作了--学习样式表内容,首先认识样式的结构:
body
{
color:#FF0000;
}
body 称为选择符
color 称为属性
#FF0000 称为属性值
大括号({})是选择符的作用域
冒号(:)是属性与属性值的间隔符分号(;)是属性值结束的符号,也是一个属性结束的符号。
二、选择符有哪些种类?
前面所讲的 body 可以作为选择符,选择符共分五种:
1、类型选择符
2、后代选择符
3、联合选择符
4、伪类选择符
5、类选择符
6、ID 选择符
三、何谓类型选择符?
类型选择符:就是 HTML 标签。比如前面说到的 body,另外还有table、form、p等等。table{}就表示所有的表格使用这个样式表。
四、何谓后代选择符?
就是一个空格符号。
比如:
table p
{
color:#FF0000;
}
它表示,所有位于 table 下的 p 内的文字颜色为红色。
<table>
<tr>
<td><p>这些文字颜色为红色</p></td>
</tr>
</table>
<p>这些文字虽然在 p 内,但由于 p 没有位于 table 下,所以不是红色。</p>
五、何谓联合选择符?
就是一个逗号。
比如:
div, p
{
width:50px;
}
它表示,所有的div和p的宽度都是50像素(px)。
<div>这个宽度是50px</div>
<p>这个宽度也是50px</p>
六、何谓伪类选择符?
就是一个冒号。
最常见的就是
a:link
{
color:#FF0000;
}
它表示没有点击过的超链接颜色为红色。
另外
a:visited,已经点击过的超链接样式。
a:hover,鼠标移到超链接上时的样式。
七、类选择符
格式:Element.value,如 p.title,则<p class="title">会响应此样式,如果不要Element,则所有 class 为 title 的标签皆响应此样式。
八、ID 选择符
格式:Element#value,如 p#title,则<p id="title">会响应此样式,由于 id 在文档中唯一,所以Element也可以不写。ID 选择符只能在文档中被引用一次,而类选择符可以被引用多次。
如果不能理解类选择符和 ID 选择符,也不要紧,在以后的讲解中,我们会给出大量的示例,多看几个示例就会很清楚了。
相关文章:CSS 选择符