使用CSS 的3种方式

0428loveyu

浏览: 30924 次
性别:
来自: 西安

最近访客更多访客>>

dongguangming88

米克1997

Erriny

wei.

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (108)

社区版块

存档分类

CSS（Cascade Style Sheet），层叠样式表凭着着“丰富的样式、简单易用、重复使用、缩小文件”等优势成为了现代网页必不可少的一样技术。需要注意的是，目前我们将CSS定义为样式表中的一种，未来可能有其他样式表被开发出来。直白地说，CSS就是一系列样式的集合，它用于定义文档元素的外观表现形式（如背景、颜色、字体、边框），从而实现了文档结构（structure）和外观（presentation）的分离，使得网页的维护更加容易、更具可读性，同时可以大大提高开发效率。

那么，如何将样式表用到文档中去呢，我个人总结了如下三种方式：

external style sheet
document style sheet
inline style sheet

下面分别对这三种方式进行详细的介绍：

1.External Style Sheet：

外部样式表是将所有的样式规则（style rules ）集中到一个文件中，这个文件的拓展名为 .css ，然后再将其导入到HTML、JSP等文档中去。例如，我们有一个名称为style.css的样式表文件，现在我们通过这种方法导入进入。导入的方法又有2中，分别如下：

在<head>标签中，嵌入<link>标签：

可以同时使用多个<link>标签导入多个样式表文件。注意，当用到<link>标签的title属性时，情况较为复杂。可以参看《CSS权威指南》

在<style>标签的最开始处用@import导入：

@import url(style.css) ;

</style>

这里需要注意的是，@import必须放在<style>标签的最前面（<style>标签中还可以直接放置样式规则，也就是下面要介绍的第二种方法），否则浏览器会忽略掉。这种方式一样可以同时导入多个文件。

2.Document Style Sheet：

这种方式是将样式规则放在<style>标签当中（@import后面），如下示例：

<style>

p { color:red;

background:yellow;

</style>

仅适用于当前页面。但有些旧式浏览器无法识别<style>标签，此时样式规则的代码将显示到页面的最前端，为了避免这样的情况，可以做如下处理：

<!- -

@import url(style.css);

p { color: red;}

- ->

<style>

如此一来，能够识别<style>标签的浏览器正常应用CSS规则，无法识别的当做注释，也正常工作，问题解决。

3.Inline Style Sheet：

第三种方式是将样式规则放在标签的style属性中，适用于单个元素，一般情况不鼓励用这种方式。具体用法如下：

<p style="color:red; background: yellow;">Content goes here</p>

以上便是3中方式的简单介绍，欢迎补充、纠正！

分享到：

深入CSS选择器 | WebRTC is almost here, and it will chang ...

2012-08-28 22:47
浏览 309
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论