☆代码学习群简易教程（36）

春天没来 2014-10-10

展开全文

第三十六节 “选择器”与“声明” 第三十六节 “选择器”与“声明”

前面三节《教程》，讲解了css样式的页内插入用法。在页内插入用法中，涉及到css样式的设置，而css样式的设置又涉及到“选择器”与“声明”，因此，我们有必要把“选择器”与“声明”这两个内容弄清楚。

本节《教程》将比较详细地讲解css样式的设置方法，讲解“选择器”与“声明”。

CSS 样式由两个主要的部分构成：选择器与声明。选择器与声明合起来叫“规则”。

一、简单的css样式：

简单的css样式，由一个选择器与一条声明组成。举例如下：

<FONT style="FONT-SIZE: 1px">z</FONT>
<STYLE type=text/css>

</STYLE>
<H1>我是标题1，我的颜色是红色。</H1>

简单的css样式，应该设置如下内容：

1、输入一个（或者几个）字母或者文字。这一步，为的是使设置的css样式生效。因为360图书馆是不支持css样式的页内插入用法的。

2、css样式标签。

3、注释标签。注释标签中放入你设置的css样式规则。

这一步，也可以不使用注释标签。使用注释标签的目的，是为了防止版本比较低的浏览器识别不了css样式，把css样式显示在网页的内容里。现在的浏览器，大部分都能够识别css样式了。

4、css样式尾标签。

5、一套h1标签。因为选择器是h1，所以，这里必须设置一套h1标签。文字内容要放到h1首标签与其尾标签之间。

注释说明：

1、css样式首标签中，要设置属性：type=text/css。

2、选择器的位置，在大括号的前面；声明的内容，在大括号里面。

3、上面的规则，选择器为h1；声明为：color:red；

4、声明：color:red ，可以替换为十进制颜色表示：color:rgb(255,0,0)，也可以替换为十六进制颜色表示：color:#ff0000 。

5、简单的css样式，由一个选择器与一条声明组成。声明中，由一个属性和一个属值组成。属性和属值用冒号连接。

二、添加声明：

css样式中的声明，不一定就是一条，可以设置若干条。

举例如下：

h1{color: rgb(0, 0, 255);
font-family: 黑体;
font-size: 20pt}

上面的代码中，选择器是h1；声明有三条：文字颜色，文字字体，文字字号。

各条声明之间用分号隔开，各条声明的属性和属值用冒号连接。各条声明最好各占一行。

css样式中有多条声明，叫做“多重声明”，也可以叫做“声明分组”。

三、添加选择器：

css 样式中的选择器，不一定就是一个，可以设置若干个。添加选择器，也叫“选择器分组”。

举例如下：

p1,p2,p3,p4,p5,h1 {color:red;}

css样式中有多个选择器，要用逗号把各个选择器隔开。

上面的代码中，p1,p2,p3,p4,p5,h1内容的颜色都是红色的。

css样式中有多个选择器，叫做“选择器分组”。

四、选择器的类型：

css样式的选择器，有许多类型：

元素选择器、类选择器、ID 选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器、派生选择器……

1、元素选择器：

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常是某个 HTML 元素，比如 p、h1、em、a，等等。

例如：

h1 {color:blue;}

2、类选择器：

要应用样式而不考虑具体设计的元素时，最常用的方法就是使用类选择器。

例如：

.lxzq {color:red;}

类选择器的标识是：在选择器的名称前面有一个小原点。使用类选择器，必须在html标签中设置class=?属性，？代表你设置的选择器名称。上面的选择器名称为：lxzq

类选择器可以单独使用，也可以与其他元素结合使用。

上面的例子是类选择器单独使用的例子。

类选择器可以与通配选择器配合应用。

通配选择器的标识是：在选择器的名称前面有一个星状符号。通配选择器一般不单独应用，因为它管辖的范围太大了。

例如：

*.lxzq {color:red;}

类选择器可以与元素选择器配合应用：

p.lxzq {color:red;}

类选择器与元素选择器配合应用，在p标签内应设置class=lxzq属性。

代码举例：

<FONT style="FONT-SIZE: 1px">z</FONT>
<STYLE type=text/css>

</STYLE>
<P class=lxzq>我的颜色是红色。</P>
<H2 class=lxzq>我不在p标签内，我的颜色不是红色。</H2>
<P>我的标签内没有class=lxzq属性，我的颜色也不是红色。

3、ID 选择器：

ID 选择器，叫做“序号选择器”或者“身份选择器”。

ID 选择器的标识是：在选择器的名称前面有一个“ # ”号，称为“棋盘号”或“井号”。

例如：

#intro {font-weight:bold;}

ID 选择器也可以与通配选择器配合应用：

*#intro {font-weight:bold;}

4、属性选择器：

属性选择器可以根据元素的属性及属值来选择元素。

例如：

[title] {color:red;}

上面的代码意思为：包含标题（title）的所有元素的颜色都是红色。

属性选择器的标识是方括号，选择器的名称在方括号内。

几个属性选择器可以连接在一起应用：

a[href][title] {color:red;}

上面的代码意思为：同时有 href 和 title 属性的 HTML 超链接的文本颜色为红色。

5、后代选择器：

后代选择器，又称为“包含选择器”。

后代选择器可以选择作为某元素后代的元素。

例如：

h1 em {color:red;}

上面的代码意思为：把作为 h1 元素后代的 em 元素的文本变为红色。

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块区中的 em）则不会被这个规则选中，也就是说，其他 em 文本的颜色不是红色：

<H1>This is a <EM>important</EM> heading</H1>
<P>This is a <EM>important</EM> paragraph.</P>

h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。

后代选择器是由两个元素组成的，后面的元素是前面元素的后代，父元素与子元素之间用空格隔开。体现在html代码中，后面的元素被包含在前面的元素中。

“后代选择器”与“选择器的分组”形式是不相同的。后代选择器，两个元素之间用空格隔开；而选择器的分组，几个元素之间用逗号隔开。

“后代选择器”与“选择器的分组”表示的意义也不相同。“后代选择器”，两个元素之间是“父子”关系，而“选择器的分组”，几个元素之间是“兄弟”关系或者“姐妹”关系。

6、子元素选择器：

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

例如：

如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<H1>This is <STRONG>very</STRONG> <STRONG>very</STRONG> important.</H1>
<H1>This is <EM>really <STRONG>very</STRONG></EM> important.</H1>

子元素选择器的标识是使用了大于号（子结合符）。大于号的位置在“父元素”与“子元素”之间。

“子结合符”两边可以有空格。如下：

h1 >strong
h1> strong
h1 >strong
h1> strong

7、相邻兄弟选择器：

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

相邻兄弟选择器的标识是使用了加号（+），即“相邻兄弟结合符”。

与子结合符一样，相邻兄弟结合符旁边可以有空格。

8、伪类选择器：

伪类选择器用于添加特殊的效果。

例如：

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}

伪类选择器的标识是使用了冒号。冒号前面是要添加css样式的html标签，冒号后面是伪类。

上面的代码，第一行是未被访问的链接文字颜色为红色，第二行是已被访问的链接文字颜色为绿色，第三行是鼠标移动到链接文字上颜色为粉红色。

9、派生选择器：

通过依据元素在其位置的上下文关系来定义样式，应用这种方式来定义规则的选择器被称为“派生选择器”，也叫做“上下文选择器”。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong { font-style: italic; font-weight: normal; }

请注意标记为LI的代码的上下文关系：

<P><STRONG>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</STRONG></P>
<OL>
<LI><STRONG>我是斜体字。这是因为 strong 元素位于 li 元素内。</STRONG>
<LI>我是正常的字体。 </LI></OL>

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

再看看下面的 CSS 规则：

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

下面是它施加影响的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

小结：

一、css样式的页内插入方法，有许多种选择器可以应用，但是，最常用的选择器还是元素选择器与类选择器。

希望群友们把这两种选择器学会，能够应用于网页制作之中。其它的选择器，有兴趣的群友们，可以钻研一下，争取学会，也应用于网页制作之中。

二、css样式的外链用法，我探讨测试了好多天，未能成功。不知是360图书馆不支持css样式的外链用法，还是我应用的方法不对。对css样式的外链用法有兴趣的朋友们，可自己钻研探讨一下。

三、不过，有css样式的“行内用法”与“页面用法”也基本上够用了。

css样式的外链用法，可以使整个网站的网页保持一致的样式。只要修改我们设置的CSS样式，整个网站所有网页的效果就都修改啦。很是方便的。但是，我们不是馆方，我们没必要把我们图书馆中的每篇网页，都应用一样的样式。每篇网页都应用一样的样式，太呆板，也不美观。当然了，我们也可以在我们的一些网页中应用css样式的外链用法，在另一些网页中不应用css样式的外链用法，这样，网页效果就不呆板了。所以说，尽管有css样式的“行内用法”与“页面用法”也基本上够用了，但是，研究探讨css样式的外链用法，还是有必要的。

css样式的页面用法，可以应用于一篇具体的网页。只要修改我们设置的css样式，这篇网页的效果就修改啦。也是比较方便的。

css样式的行内用法，可以用于一篇网页的某个标签。修改这个标签中的css样式，这个标签所管辖的内容的效果就修改啦。这种方法也有它的优点，如果我们只想修改某一个段落或者某几个段落显示效果的情况下，可以应用css样式的行内用法。

四、CSS样式的优先级为：行内样式→页内样式→外链样式。换句话来讲，一篇网页中如果同时设置了三种样式，有“行内样式”的地方，其余的两种样式不起作用；一篇网页中如果同时设置了“页内样式”与“外链样式”，“页内样式”起作用，“外链样式”不起作用。

五、我们还可以用自定义的方法设置选择器的名称。选择器的名称不能用汉字定义，因为大部分的浏览器识别不了汉字定义的选择器名称。选择器的名称，第一个字符也不能使用数字。最好用英语或者拼音定义选择器的名称。也可以用字母结合数字定义选择器的名称。

附注：

对css样式感兴趣的朋友，可到此页面学习探讨css样式：http://www.w3school.com.cn/css/index.asp 此页面有css教程《课程表》。

作业：

一、填空：

1、CSS 样式由两个主要的部分构成：（）与（）。（）与（）合起来叫“规则”。

2、简单的css样式，由（）与（）组成。

3、在css样式的页内用法中，选择器的位置，在（）；声明的内容，在（）。

4、声明分组，各条声明之间用（）隔开，各条声明的属性和属值用（）连接。各条声明最好（）。