在浏览网页时我们通常可以设置页面的字体大小,不过这样就很容易影响整个页面的版面效果,因为随着字体的大小变化,整
个版面都会随之改变,有时还会面目全非。那有什么办法可以让我们的页面不会随着字体的改变而改变呢?不用说,当然是有了。
它就是CSS样式表了,它在网页设计方面的作用真的没得说了,它不仅能够很好的保证我们的页面效果,还可以保证整个站点的风
格统一。
1.直接添加在标识符(tag)里:
< Tag style="properties">content< /tag>
如:< td style="color: #333333; font-size: 12px">ICE-FREE< /td>
在单元格里用灰色显示字体大小为12px的“ICE-FREE”。尽管使用简单、直观,但是这种方法不常用。因为这样不能反复利用
,每个页面都要定义一次,那样就达不到我们的目的,也不利于整个站点的风格统一。
2.直接添加在< head>里:
< head>
< style type="text/css">
< !--
(这里定义你的样式表的内容)
-->
< /style>
< /head>
type= "text/css"表示样式表采用MIME类型,帮助不支持CSS的浏览器过滤掉CSS代码,避免在浏览器面前直接以源代码的方
式显示我们设置的样式表。但为了保证上述情况一定不要发生,还是有必要在样式表里加上注释标识符“< !--注释内容-->”。
3.联合使用样式表
像上面的一样,同样是添加在< head>里,不过稍有些不同:
< head>
< style type="text/css">
< !--
@import "*.css"
(这里写上其他样式表的定义)
-->
< /style>
< /head>
以@import开头的联合样式表输入方法可以在链接外部样式表的同时,针对该网页的具体情况,做出别的网页不需要的样式规
则。和下面的链接样式表相比,它更有优势,更加灵活。
使用时需要注意下面几点:
·联合法输入样式表必须以@import开头。
·如果输入的样式表和网页里的样式规则冲突时,使用外部的样式表。
·如果同时输入多个样式表有冲突的时候,将按照第一个输入的样式表对网页排版。
4.链接样式表(用得最多)
本站基本上都采用这种方式,同样是添加在HTML的头信息标识符< head>里:
< head>
< link rel="stylesheet" href="*.css" type="text/css" media="ALL">
< /head>
*.css是单独保存的样式表文件,其中不能包含( style)标识符,并且只能以css为后缀。
Media是可选的属性,表示使用样式表的网页将用什么媒体输出。取值范围:
·Screen(默认):输出到电脑屏幕
·Print:输出到打印机
·TV:输出到电视机
·Projection:输出到投影仪
·Aural:输出到扬声器
·Braille:输出到凸字触觉感知设备
·Tty:输出到电传打字机
·All:输出到以上所有设备
如果你要输出到多种媒体中,可以用逗号( ,)分隔开。Rel属性表示样式表将以何种方式与HTML文档结合。取值有:
·Stylesheet:指向一个外部的CSS样式表
·Alternate Stylesheet:指向一个交互样式表
本文作者:佚名 来源:本站原创
CIO之家 www.ciozj.com 微信公众号:imciow