了解css控制页面三种方式

最新推荐文章于 2022-03-05 10:30:59 发布

原创最新推荐文章于 2022-03-05 10:30:59 发布 · 819 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css控制页面三种方式 #css控制页面三种方式优先级

css，css控制页面三种方式，css，css控制页面三种方式优先级专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS控制页面样式的三种方式：行内样式、内部样式和外部样式表，并详细阐述了它们之间的区别及优先级顺序。

了解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，哪个在下面哪个优先级高！