您的位置：首页 > Web前端 > CSS

了解css控制页面三种方式

2017-05-02 18:24 218 查看

了解css控制页面的三种方式：

一、Css语法

选择器{属性：值；}

二、css控制页面的三种方式

行内样式：

将css样式编码写在XHTML标签中。如：

<h1 style=”font-size:12px; color:#ff0000”></h1>

内部样式。

可单独针对某一页进行设计，将样式信息放在页面一个固定位置上。一般放在头部当中（head）中。如：

<head>
<style type=”text/css”>
.one{color:red;font-size:25px;border:1px solid #000;}

</style>

</head>

外部样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

注意：

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/1.jpg") no-repeat;}

注意：外部样式表另一种写法：

<style type=”text/css”>
@import url（“a.css”）；

</style>

与link与@import的区别：

差别1：老祖宗的差别。

link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。　　

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。　

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。　　

差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

三、三种方式的优先级

如果你对同一个元素使用了以上三种方法，那么最后起作用的是哪一种呢？也就是三个的优先级别。优先级最高的是行内样式，如果你三种都写了同样的属性，那么行内样式会覆盖其余两种方式，内部样式和外部样式取决于他们在head标签中位置的顺序：

<style type="text/css">
.one{color:red;font-size:25px;border:1px solid #000;}

</style>

<link rel="stylesheet" type="text/css" href="style.css" />

style.css中：h1{color:green}

此时外部在内部下方，那最终显示的结果应该是外部中设置的color:green；同样，如果外部样式在内部上方那么最终显示结果是color:red，哪个在下面哪个优先级高！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css css控制页面三种方式 css控制页面三种方式优先级

相关文章推荐

新的分享

章节导航