[翻译]标记语言和样式手册 Chapter 2 标题(3)
作者:zhaozy 来源:3user.com 时间:2008-01-16 11:56:00
技巧延伸
这里我们将采用方法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:加上灰色底边的标题样式示例
我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.
另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.
标签:样式,标记,css,手册
0
投稿
猜你喜欢
MYSQL教程:保证安全的备份MYSQL数据库的方法
2010-03-03 17:12:00
18个超棒的Web和移动应用开发框架
2011-03-31 17:04:00
br玩转清除浮动
2007-05-11 16:52:00
3个比较好用的asp检查函数
2007-09-24 13:25:00
WEB页面工具语言XML带来的好处
2008-05-29 11:01:00
全兼容的纯CSS级联菜单要点浅析
2009-06-10 14:42:00
CSS pointer-events下层元素被点击
2010-04-11 22:31:00
配置高可用性的MySQL服务器负载均衡群集
2009-01-04 12:43:00
MySQL中SQL的单字节注入与宽字节注入
2009-03-25 14:49:00
怎样正确的解决 MySQL 中文模糊检索问题
2008-12-19 17:26:00
asp如何读取文本文件的内容?
2009-11-18 20:55:00
2008年Logo设计10大趋势
2008-02-28 13:06:00
实例讲解启动mysql server失败的解决方法
2008-12-26 17:27:00
八种获取当前日期的js代码
2007-09-07 10:26:00
asp 过滤尖括号内所有内容的正则代码
2011-04-03 10:40:00
Google Chrome的hack写法以及CSS的支持程度
2008-09-04 12:28:00
在SQL Server计算机上运行病毒扫描软件
2009-01-19 14:38:00
CSS样式表:详细介绍IE7新支持的选择器
2007-10-09 18:24:00
网页设计中的对比原则与接近性原则
2010-03-30 14:51:00
SQL Server 2000如何设置会话上下文信息?
2010-05-18 18:33:00