《CSS教程》03章 特别内容的设定

---

本章讲述连接、段落的第一行、段落的第一个字、段落内特定元素的设置方法。 注：从本章起例子部分只列出style部分和body部分。本章不太重要。

连接的设定

连接的元素名就一个<a>，它有四个属性来控制其颜色的变化。

元素名:link { ～ }       ◆未访问过的连接部分的式样
元素名:visited { ～ }    ◆已经访问过的连接部分的式样
元素名:hover { ～ }      ◆光标或鼠标停在连接上面时的式样(尚未按下)
元素名:active { ～ }     ◆鼠标按下后的式样(尚未松开)

s03_01.htm

【CSS】
/* 普通连接颜色的设定 */
a:link { color: #0000ff; background: #ffffff } 
a:visited { color: #000080; background: #ffffff }
a:hover { color: #ff3300; background: #ffffff } 
a:active { color: #ff0000; background: #ffffff }

/* 指定了class的连接部分 */
a.special { font-weight: bold }
a.special:link { color: #00cc00; background: #ffffff }
a.special:visited { color: #009900; background: #ffffff }
a.special:active { color: #00ff00; background: #ffffff }

.navbar {
  text-align: center;
  border-top: solid 1px #999999;
  padding-top: 1em
}

/* 指定class部分的段落范围内的普通连接 */
.navbar a:link { color: #ff6600; background: #ffffff } 
.navbar a:visited { color: #ff9900; background: #ffffff }
.navbar a:active { color: #ff0000; background: #ffffff }

【HTML】
<h1>关于连接的式样</h1>
<p>
这是普通的连接<a href="s02_01.htm">&lt;a href="s02_01.htm"&gt;</a><br>

这是指定了class的连接<a href="s02_02.htm" class="special">
&lt;a href="s02_02.htm" class="special"&gt;</a></p>

下面段落指定了class(<p class="navbar">)，但连接部分是普通连接。
<p class="navbar">
[<a href="s01_01.htm">前页</a>]
[<a href="s01_02.htm">开头</a>]
[<a href="s01_03.htm">下页</a>]
</p>

段落内首行的设置

元素名:first-line { ～ }
注：元素的部分也可以用"#ID名"或".class名"指定

s03_02.htm

【CSS】
p { line-height: 1.6 }
p:first-line {
  color: #ffffff;
  background: #ff6600
}

【HTML】
<p>
新华网安徽颍上7月6日电（记者葛如江、李柯勇、董峻）由于淮河防汛形势日趋紧张，
安徽省防总决定6日中午在淮河唐垛湖炸坝行洪。此次行洪，需转移1.7
万生活在庄台以下的群众。目前，群众已全部撤离。本社记者将在现场报道行洪的情况。
</p>

段落内第一个字符的设置

元素名:first-letter { ～ }
注：元素的部分也可以用"#ID名"或".class名"指定

s03_03.htm

【CSS】
p:first-letter {
  font-size: 3em;
  float: left;         /* 如果第一个字占多行，则设置为环绕方式 */
  font-weight: bold;   /* 粗体 */
  color: #ff6600;      /* orange颜色 */
  background: #ffffff
}

【HTML】
<p>
新华网安徽颍上7月6日电（记者葛如江、李柯勇、董峻）由于淮河防汛形势日趋紧张，
安徽省防总决定6日中午在淮河唐垛湖炸坝行洪。此次行洪，需转移1.7
万生活在庄台以下的群众。目前，群众已全部撤离。本社记者将在现场报道行洪的情况。
</p>

段落范围内元素的设定

元素名　元素名　{ ～ }

s03_04.htm

【CSS】
p em {
  color: #ffffff;         /* 前景为白色 */
  background: #ff6600     /* 背景为Orange */
}
【HTML】
<h1>这是h1元素中的<em>强调</em>部分。</h1>
<p>这是p元素中的<em>强调</em>部分。</p>