SOURCE

<p>
  Hello World!
</p>
<p>
  这个段落采用CSS样式化。
</p>
<h1>
  Heading
</h1>
<h2>
  这个段落采用CSS样式化.
</h2>
<p id="para1">
  Hello World!
</p>
<p>
  这个段落不受该样式的影响。
</p>
<footer class="center">
  <div id="big-brother">
<h1 >
  标题居中
</h1>
<p >
  段落居中。
</p>
  </div>
  <p>
  Hello World!
</p>
<p>
  这个段落采用CSS样式化。
</p>
</footer>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>

p,
h2 {
  color: red;
}

h1 {
  color: blue;
}

h2 {
  color: #00FFFF;
}

#para1 {
  text-align: center;
  color: #FFFF00;
}
/*.center div p
{ 
  text-align: center;
	background-color:	#FF00FF;
}后代选取器 */
/*.center div p,p
{ 
  text-align: center;
	background-color:	#FF00FF;
}*/
/*.center >p
{
   text-align: center;
	background-color:	#FF00FF;
}//子元素选择器*/
/*#big-brother+p
{
  font-size:20px;
  background-color:yellow;
}//相邻兄弟选择器*/

#big-brother~p
{
  font-size:20px;
  background-color:yellow;
}//普通相邻兄弟选择器
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
/*p:first-line 
{
color:#0000FF;
font-variant:small-caps;
}*/
/*p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}*/