艺术中国-中国书画艺术综合门户

SS定义标题的几个实例

1970-01-01 08:33:26 www.artchn.com 来源:艺术中国 已有人浏览 有0人发表了看法
[导读]...

原文:What is the Best Way to Mark up the Title of a Document?

  • 说明:本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号:ISBN:1590593812。我们会陆续翻译此书中有价值的章节。
  • 原作者:Dan Cederholm
  • 翻译:阿宏

简单的样式

使用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: 带有平铺背景的标题

[1] 2  下一页

来源:Donews

热门关键词: SS定义 S定义标 定义标题 义标题的

艺术中国声明:①凡注明 “艺术中国” 字样的内容均属于本站专稿,如需转载请注明来源,否则本网站将依据《信息网络传播权保护条例》维护网络知识产权。②本站上发表的所有内容,均为原作者的观点,不代表艺术中国网的立场,也不代表艺术中国网的价值判断。③如涉侵权稿件,请立即与艺术中国网联系,我们将及时处理。

  延伸阅读: 

网页设计中排版与布局基础

网站设计工程的规范与管理

如何设计有个性的网站?

面向搜索引擎的网站优化知识

站长必须了解的基础常识

弹出网页窗口设计知识总结