网海天涯

页面元素的样式(2) 实战篇
上节内容中，我向大家介绍了a h2 这两个页面元素（或者称为html标签），大家还记得我在上节内容中留下的问题的话吧，这节内容中，我们就要通过css代码来解决了。

先来看看上节中，我留下的问题吧。“想要修改标题字体的大小以及颜色，而且要去掉链接下面的横线”，为了使这节内容更有实战意味，我们把前面11节的的代码也搬过来看看：

Index块：
<!-- ~ header ~ -->
<div id="header">
 <h2><a href="http://<!-- ~ domain ~ -->"><!-- ~ blogname ~ --></a></h2>
 <h4><!-- ~ blogdescr ~ --></h4>
</div>

大家对这段代码还熟悉吗，不熟悉的话，那就说明你到目前为止都还没真正入门哦。补救的方法就是再看一遍css样式表的教程……好了，我们来分析下上面的代码，黑色部分我就不多作介绍了，主要看下 
 <h2><a href="http://<!-- ~ domain ~ -->"><!-- ~ blogname ~ --></a></h2>
 
上节内容中，大家已经看到过类似的用法了。我主要解释下中间的模板系统标签：<!-- ~ domain ~ -->，它代表的是你博客的域名，以我的博客为例，它就是mobanxx.blogbus.com;<!-- ~ blogname ~ --> 它代表的是，你博客的名称（在“Blog设置”中可以看到），以我的博客为例，它就是万恶的blogbus模板。我们先来看下，没有对h2，a定义css样式的效果吧。

现在大家看到了，文字显示的大小可能小了点，颜色也要修改下，链接下面的下划线也得去掉。另外，位置也不是我们想要的位置。好了，我们先来解决大小，颜色和下划线的问题，位置的问题我们以后再讲。

css代码块：
<style>
#header {
width:500px;
height:290px;
border:2px solid red;
background:url(http://photo1.bababian.com/upload3/20071020/3792C7DFF95FB9FCBE261A9BACCC9B78.jpg) no-repeat;
background-color:black;
}
#header h2 a {
text-decoration:none;
font-size:28px;
color:#FFF;
}
#header h4 {
font-size:18px;
color:#FFF;
}
</style>

第一块代码，大家应该熟悉吧？如果不懂，可以到前面的教程中找到相关的解释。我们来看看下面的两段代码：
#header h2 a ｛｝ 这段代码用到了前面介绍过的样式层级书写的方法（关于层级的意思，也请到前面的教程中找到相关解释）。那么，这段代码定义的样式是：h2标签中的a标签，并且h2标签是在id为header的层中。如果我们这样直接书写 a {}，那么它表示的就是页面中所有a标签的样式。用#header h2 a ｛｝这种写法的目的，就在于使得#header h2中的a标签的样式是独特的样式。用这种层级书写方法的好处，在以后的模板修改过程中会经常碰到的，所以请大家一定要认真的思考下层级的意思。

好了，在讲过层级的用法之后，我们再来看下{}中的属性和值吧。“text-decoration:none;”这句代表的意思是 文字下划线修饰:无;对于a标签，text-decoration的默认值是underline（下划线）。“font-size:28px;”代表的是字体大小：18像素;实际上，我们知道，h2是有它自己的默认字体大小的，但有些时候，我们想要自己定义h2的字体大小，那么就要用到font-size了。一般来说，正文字体的大小是12px，你在修改标题文字的大小时，可以根据需要，选择合适的大小。“color:#FFF;”代表的是字体的颜色为#FFF（白色）。关于颜色的表示方式，大家还是去看这里的说明吧……

再来看下定义h4样式的代码:#header h4 {} 用层级的说法来解释这段代码的意思就是:在ld为header中的h4标签。如果不用层级的书写方法来说明的话，而是直接用h4{}
来定义这块的样式，那么它定义的就是页面中所有h4的样式。#header h4 {}中的样式代码的意思，大家可以看看#header h2 a {}的样式说明。下面是用了css后的效果。

这节的内容比较重要，主要的目的就在于让大家理解层级的书写方法。如果大家对层级的书写方法还不能理解的话，请再仔细阅读一下相关内容。下节将是令人期待已久的模板修改实战 头部修改篇，敬请期待！