web标准化 用CSS定义标题的几个实例(2)

　　<h1>文章标题</h1>

　　我们接下去的标题（如果不是用另一个<h1>重复的话）应该是<h2>，然后是<h3 >，等等。你也许不应该在<h1>后面跳过一级，直接跟上<h3>。我倾向于同意以上的观点，顺着行文保持级别的连续性，来构造一个排版结构。这样的话，给一个已经存在的页面添加标题和样式就更容易了，你会减少因使用超出的数字而导致的错误。

　　前面提到的，设计者也许会用<h4>来标签一个页面上最重要的标题，仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住，先结构，后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。

　　简单的样式

　　使用CSS，最容易做的事情就是给我们的标题设置不同的字体样式。我们可以建立一个CSS规则，它将把样式应用到页面中出现的所有<h1>标签（或者是整个站点，当使用一个外部样式表的时候）。随后，如果我们想要改变整个站点上所有出现<h1>标签的地方的颜色、尺寸、字体的话，我们所有需要做的事情就是修改一些CSS规则，然后它们将立即改变。听上去非常诱惑人，不是吗？

　　让我们认识一下我们自己的超级酷的标题：

<h1>Super Cool Page Title</h1>

　　用CSS改变颜色、字体和尺寸：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}

　　页面上所有找到<h1>的地方都将应用Arial字体（或者是缺省的sans-serif字体）、24点大小以及兰色，就象图2-2显示的。

图2-2： 应用样式后的标题

　　接着，让我们在文字的下面增加一条1点宽的灰色边框，以增强清晰度（看图2-3）：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}

图2-3：带有灰色下边框的样式化标题

　　我们在文字的下方增加了一点补白，来让线条附近宽松一点。由于标题是一个块级元素，所以它的边界不仅仅到文字，而是与页面的水平宽度灵活的保持一致。

　　值得指出的是，这个特别的创建边框的方法是一个由三部分组成的语句：宽度、式样、颜色。试着改变它们的值，看看会产生什么不同的效果。

　　增加背景

　　背景可以增强标题的整洁效果。增加一点补白和背景颜色，我们就有了一个不需要图片的，但又很有样子的标题。如下：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}

　　我们把文字改成白色，周围加上4个点的补白，再把背景改成绿色。就象图2-4显示的那样，这可以建立一个好看的绿色条来横贯页面，分隔段落。

图2-4： 带有背景色和补白的标题

　　背景和边框

　　在标题下面增加一个窄窄的边框，加上淡淡的背景色，你能够创建一种三维的效果，却不需使用图片。

　　这个CSS和前面的例子很相似，仅仅改变一点颜色和在底部增加一个2点宽的边框。

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}

　　试着创建各种不同的同色阴影，产生的立体效果如图2-5显示。

图2-5：带有背景和下部边框的标题

　　平铺的背景

　　当背景图片被一起加入后，就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器，创建一个10*10的图片，图片的顶部有黑色的边框，渐变的灰色一直到底部，象图2-6显示的。

图2-6：A 在Photoshop中创建10×10点大小的图片（被放大了）

　　我们可以用CSS把这个极小的图片平铺在<h1>的底部：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif) repeat-x bottom;
}

　　repeat-x会通知浏览器仅在水平方向平铺（repeat-y 将在垂直方向平铺）。我们再把图片设置在bottom，又增加了额外的padding-bottom，我们可以调节平铺的图片和上面文字之间的距离。（看图2-7）

图2-7： 带有平铺背景的标题

　　可替换的图标

　　处理行内的装饰性圆点和图标时，作为代替硬编码的方式，我们可以继续使用CSS的background属性来把图标设置在文字左边。这个方法可以迅速的改变整个站点的look and feel——升级一个CSS文件从而立刻改变整个站点的页面。

　　代码和前面平铺范例很相似：

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}

　　这里，我们在左边留出了额外的空间（在那儿我们将显示一个图标），设为no-repeat，是为了让背景图片只显示一次（看图2-8）。我们把它放置在距离首部0点和距离顶部50%的位置上。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有