首页  ·  知识 ·  前端
CSS样式表的几种运用方法
佚名  本站原创    编辑:dezai  图片来源:网络
在浏览网页时我们通常可以设置页面的字体大小,不过这样就很容易影响整个页面的版面效果,因为随着字体的大小变化,整个版面都会随之改变,有时还会面
在浏览网页时我们通常可以设置页面的字体大小,不过这样就很容易影响整个页面的版面效果,因为随着字体的大小变化,整

个版面都会随之改变,有时还会面目全非。那有什么办法可以让我们的页面不会随着字体的改变而改变呢?不用说,当然是有了。

它就是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
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读