代码学习群简易教程（37）

春天没来 2014-10-14

展开全文

第三十七节 css样式页内插入用法实例 第三十七节 css样式页内插入用法实例

上一节《教程》讲解了“css样式页内插入用法”的各种“选择器与声明”。在制作网页时，“css样式”必须与“html标签”配合应用，才能显示出其效果。本节《教程》为您讲解“css样式页内插入用法”实例，旨在引导您学会应用“css样式页内插入用法”制作网页。我讲解的这些实例，都是比较简单的例子。在学会这些实例的基础上，您可以组合应用这些实例中的选择器与声明，设置为比较复杂的css样式，制作出许许多多您喜欢的漂亮网页来。

一、简单的css样式：

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

代码举例：

<H2>我是标题，我的颜色是红色。</H2></CENTER>

上面的代码，选择器是H2，声明是{color:red;}

提示：要查看上面的代码效果，可将代码“复制”“粘贴”到你的图书馆首页“撰写”文章处的“代码编辑”页面中“发表”。（要查看下面的“代码举例”效果，方法也相同，不再提示。）

二、添加声明：

代码举例：

<H1>我是标题1，我的颜色是蓝色，我的字体是黑体，字号是20pt。</H1></CENTER>

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

三、添加选择器：

代码举例：

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

</STYLE>
<BR><P1>我是段落1，我的颜色是红色。</P1> <BR><P2>我是段落2，我的颜色是红色。</P2> <BR><P3>我是段落3，我的颜色是红色。</P3> <BR><P4>我是段落4，我的颜色是红色。</P4> <BR><P5>我是段落5，我的颜色是红色。</P5> <BR>
<H1>我是标题1，我的颜色是红色。</H1></CENTER>

上面的代码中，选择器为：p1,p2,p3,p4,p5,h1，声明是{color:red;} 。

四、选择器的类型：

1、元素选择器：

代码举例：

<H1>我是标题1，我的颜色是红色。</H1>
<H2>我是标题2，我的颜色是绿色。</H2>
<P>我是段落，我的颜色是系统默认的颜色：黑色。</P></CENTER>

上面的代码，选择器是H1与H2。H1的声明是： {color:#ff0000;} ，H2的声明是： {color:#00ff00;} 。由于p标签与选择器不匹配，所以段落中的文字颜色是黑色。

2、类选择器：

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

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

代码举例：

<CENTER><FONT style="FONT-SIZE: 1px">z</FONT>
<STYLE type=text/css>
<!--
.yanse {color:#ff0000;}

-->
</STYLE>

<H1 class=yanse>我是标题1，我的颜色是红色。</H1>
<H2 class=yanse>我是标题2，我的颜色是红色。</H2>
<P class=yanse>我是段落，我的颜色是红色。</P>
<P>我是段落，我与选择器不匹配，因此我的颜色是系统默认的颜色：黑色。</P></CENTER>

上面的代码，选择器是：yanse 声明是：{color:#ff0000;}

有class=yanse属性的html代码标签，文字颜色是红色；无class=yanse属性的html代码标签，文字颜色不是红色。

3、ID 选择器：

ID 选择器叫做“序号选择器”或者“身份选择器”。ID 选择器前面有一个 # 号，称为棋盘号或井号。

与类选择器不同，在一个 HTML 文档中，ID 选择器能使用一次，而且仅一次。

代码举例：

<CENTER><FONT style="FONT-SIZE: 1px">z</FONT>
<STYLE type=text/css>
<!--
#yanse {color:#ff0000;}

-->
</STYLE>

<H1 id=yanse>我是标题1，我的颜色是红色。</H1>
<H2 class=yanse>我没有id=yanse属性，我的颜色不是红色。</H2>
<P id=yanse>我是段落，我的颜色是红色。</P>
<P>我是段落，我与选择器不匹配，因此我的颜色是系统默认的颜色：黑色。</P></CENTER>

上面的代码，选择器是：yanse 声明是：{color:#ff0000;}

有id=yanse属性的html代码标签，文字颜色是红色。 ID 选择器在一篇网页中只能使用一次，是指在“相同的html代码标签”中只能使用一次。

4、属性选择器：

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

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

代码举例：

<CENTER><FONT style="FONT-SIZE: 1px">z</FONT>
<STYLE type=text/css>
<!--
img[alt]
{
border: 3px solid red;
}

-->
</STYLE>
<IMG style="WIDTH: 959px; HEIGHT: 640px" alt=春天没来欢迎您 src="http://image78.360doc.com/DownloadImg/2014/09/2506/45583360_1.jpg"><BR><BR><IMG style="WIDTH: 959px; HEIGHT: 640px" alt=春天没来欢迎您 src="http://image78.360doc.com/DownloadImg/2014/09/2506/45583360_2.jpg"><BR><BR><IMG style="WIDTH: 959px; HEIGHT: 640px" src="http://image78.360doc.com/DownloadImg/2014/09/2506/45583360_3.jpg"> </CENTER>

上面的代码中，选择器是：img“alt”。声明是：{border: 3px solid red;}。没有“alt”属性的图片不会显示边框线。

5、属性和值选择器：

属性和值选择器，在选择器中添加了属性的属值。

代码举例：

<CENTER><FONT style="FONT-SIZE: 1px">z</FONT>
<STYLE type=text/css>
[title=biaoti]
{
border:5px solid blue;
}
</STYLE>
<IMG title=biaoti alt="长发女 - 宇斯 - 宇斯的博客" src="http://image78.360doc.com/DownloadImg/2014/09/1608/45309215_1.jpg" height=320>
<H1>无法应用样式：</H1>
<P title=biaoti><FONT style="COLOR: rgb(0,250,0); FONT-SIZE: 35px">“春天没来”欢迎您！</P></FONT></CENTER>

上面的代码中，选择器是：[title=biaoti]，声明是{border:5px solid blue;}。图片与段落标签中有此样式，所以有边框线；标题中无此样式，所以标题文文字没有边框线。

6、后代选择器：

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

代码举例：

<H2>学习代码的关键是<EM>理解各种标签及其属性属值的作用，</EM>用不着死记各种代码。</H2>
<P>学习代码的关键是<EM>理解各种标签及其属性属值的作用，</EM>用不着死记各种代码。</P></CENTER>

上面的代码中，选择器是h2的后代 em，只有在h2标签内的em标签样式起作用，其它标签中用em标签控制的文字内容不起作用。

7、子元素选择器：

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。“子元素”可以理解为“后代元素”中的一部分。

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

代码举例：

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

</STYLE>

<H2>学习代码的关键是<STRONG>理解各种标签及其属性属值的作用，</STRONG>用不着死记各种代码。</H2>
<P>学习代码的关键是<STRONG>理解各种标签及其属性属值的作用，</STRONG>用不着死记各种代码。</P></CENTER>

上面的代码，选择器是h2子元素 strong，只有在h2标签内的strong标签样式才起作用，其它标签中用strong标签控制的文字内容不起作用。

8、相邻兄弟选择器：

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

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

代码举例：

<H1>学习代码要弄懂常用的十来种标签。</H1>
<P>学习代码要弄懂常用的十来种标签。</P>
<P>学习代码要弄懂常用的十来种标签。</P>
<P>学习代码要弄懂常用的十来种标签。</P>
<P>学习代码要弄懂常用的十来种标签。</P></CENTER>

上面的代码，选择器是与H1标签相邻的P标签。与H1标签相邻的P标签中的内容，样式才起作用，上方有50px的外边距，其余的P标签中的内容上方没有外边距。

9、伪类选择器：

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

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

代码举例：

<P><B><A href="http://www.360doc.com/userhome/4127803" target=_blank>这是一个链接。</A></B></P></CENTER>

上面的代码是为一个链接添加了特殊的文字效果。未被访问的链接文字颜色为红色，鼠标移动到链接文字上颜色为粉红色，鼠标按下去未放开时文字颜色为蓝色，已被访问的链接文字颜色为绿色。

10、派生选择器：

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

代码举例：

<CENTER><FONT style="FONT-SIZE: 1px">z</FONT>
<STYLE type=text/css>
<!--
li strong {
font-style: italic;
font-weight: normal;
}

-->
</STYLE>

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

上面的选择器，是li标签包裹的 strong标签。声明是斜体字，中等粗细。

只有在li标签内的 strong标签样式才起作用，显示为斜体字；其余的strong标签样式不起作用。

六、页内css精品样式举例：

1、设置背景图片与边框线：

代码举例：

<CENTER><FONT style="FONT-SIZE: 1px">2</FONT>
<STYLE type=text/css>
body {background-image:url(http://image73.360doc.com/DownloadImg/2014/06/0421/42312848_1.jpg );}
p{background-image:url(http://image73.360doc.com/DownloadImg/2014/06/0217/42245883_90.gif);width: 680px; height: 50px;color: rgb(0, 250, 0); font-family: 黑体; font-size: 30pt;text-align: center;border:15px double rgb(250,0,255);}

</STYLE>

<P>春天没来欢迎您！</P></CENTER>

上面的代码，为“文档的主体”设置了背景图片，为“段落”设置了背景图片与边框线。

2、设置背景颜色与对齐方式：

代码举例：

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

body {background-color:#ffff00; }
h1 {background-color: #00ff00;text-align: center;}
h2 {background-color:#ff00ff;text-align: center;}
p {background-color: rgb(0,200,255);text-align: left;}

p.no2 {background-color:#00ff00; padding: 20px;text-align: right; }

</STYLE>

<H1>这是居中对齐的标题1 </H1>
<H2>这是居中对齐的标题2 </H2>
<P>这是居左对齐的段落</P>
<P class=no2>这是居右对齐的段落设置了内边距 </P></CENTER>

上面的代码，为“文档的主体”设置了背景颜色，为“段落”和“标题”设置了不同的背景颜色与对齐方式等样式。

作业：

一、继续认识各种“选择器”与“声明”。

二、继续熟悉各种“选择器”与“声明”的设置方法。

三、学习css样式与html代码标签配合应用的方法。

四、用“css样式页内插入方法”制作几篇网页，并修改css样式，观察网页有何变化。体会用“css样式页内插入方法”制作网页的优点。

“春天没来”编撰

2014年10月15日于北京