[翻译]标记语言和样式手册 Chapter 2 标题（3）
作者：zhaozy 来源：3user.com 发布时间：2008-01-16 11:56:00
标签：样式,标记,css,手册
技巧延伸
这里我们将采用方法C,并用它来实验一些简单的css样式.我们将完全发挥标题标签独特性的优势.我们可以非常安心的使用标题标签,因为不管在什么浏览器和设备上,都能正确的处理标题内容.接下来我们来给他装扮装扮,然后带它上街(如果你能够带着一个html标签上街的话....)
简单的样式
使用css,最简单最容易实现的效果就是为标题设置不同的字型.我们可以编写一个css规则,然后套用到页面中所有的<h1>标签上(如果你用到了外部样式表,那就可以把样式套用到整个网站上).如果在稍后的时间里想要改变整个网站里每个<h1>的颜色,大小或者字体,那么只需要修改几条css规则就行了,而且修改之后的效果能够马上看到!这听起来很诱人,对吧?
让我们超级酷的标题来告诉我们自己吧:
<h1>Super Cool Page Title</h1>
让我们用css来改变它的颜色,字体和大小吧:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}
就像我们刚才所说的,非常简单,整个页面的所有<h1>都被设置成24像素大小,蓝色的Arial(或者默认的sans-serif)字体,如图 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:加上灰色底边的标题样式示例
我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.
另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.
0
投稿猜你喜欢
- SQL Server 阻止了对组件 'Ad Hoc Distributed&nbs
在本教程中，你会学到如何把HTML的列表项（li元素）转换成下图的“便签墙”。该效果分5步实现。内核为webkit的Safari和Chrom- 很早之前就在PJ的blog上看到可以用VS2005调试ASP程序，但是没有写出具体的步骤，后来一次偶尔也让我找到了方法，但是一直没把它写出来
- 程序设计是困难的，其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。好的体系架构是必需给程序足够的结构使其健
- 1.1.1 摘要 相信大家对于SQL Transcation再熟悉不过，它确保了数据库的数据一致性和安全性，尤其在对数据执行增删时，如果发生
- 代码如下:<％ Randomize Do While Len(pass)<12
- 用新云还不是很熟，一点点学习中。今天遇到一个文章列表前有小圆点的问题，把去除方法记一下。文章列表前有小圆点有这么几种情况：1、li的默认样式
- Oracle的执行计划一句话命令：set autotrace on
- 格式请使用 gif 或 jpg 或swf （flash）同一组广告请使用一种格式。命名命名方式：宽x高.图片格式x 必须小写 ； 图片格式
- 网页过渡是指当浏览者进入或离开网页时，页面呈现的不同的刷新效果，比如卷动、百叶窗等。这样你的网页看起来
- Firefox 3 有一个很让人讨厌的bug：基于某种目的，在表单提交时 disable 掉提交按钮，通过后退键回到这个页面后，这个提交按钮
- 喜欢Gucci的优雅吗？或者痴迷美国普普艺术？谷歌中国最近改版的谷歌个性化首页iGoogle集中了近1500个主题，包括近120多位全球顶级
- 呃，看到这个标题，我们可以首先将IE系浏览器无视了。我承认，我是有极简主义倾向的，我希望能够使用最少的代码和图片做更多的事情。虽然CSS3仅
- 下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a>
- 阅读上一篇：css基础教程属性篇 本篇主要介绍css对边框(border)的属性控制和链接(link)的伪类选择器.边框(border):
- 网站设计时，有一个最常用的指导性原则：页面长度原则上不超过3屏，宽度不超过1屏。这个原则明显是从用户的体验出发，特别是宽度不超过一屏，其最基
- 即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的
- 在blueidea上看到movoin转的一个动态加载include文件代码，接着dnawo又修改了下，我用了dnawo修改后的版本，感觉挺好
- 代码如下: <!-- #include file="../conn.asp" --> <!-- #in
- 最近设计一个优惠券列表，有个属性是有效日期，因为空间有限，必须要把开始日期和结束日期在一行显示，这样就出现一排的数字，日期有好几种我们习惯的
