css控制页面的三种方式

原创 沦落 随笔 css 230阅读 2017-05-02 10:12:00 举报

CSS控制页面三种方式

一、Css语法

选择器{属性:值;}

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

行内样式。

将css样式编码写在XHTML标签中。如:
<h1 style=”font-size:12px; color:#ff0000”></h1>
是否符合css三大优势?
不符合三大优势,行内样式只是说明了xhtml对style属性的支持。
什么时候会用:因为方便测试时候,但是测试完成后删除。

内部样式。

可单独针对某一页进行设计,将样式信息放在页面一个固定位置上。一般放在head中。如:
<head>
<style type=”text/css”>
<!--
h1{
color:#ffff00;
}
-->
</style>
</head>
是否符合css三大优势,为什么。
略微符合,但是不够完美,因为内部样式只对当前页面有效,所以对一个网页来说是符合的,但是对于一个网站来说不符合,因为网站由多个网页构成,无法做到提高重用性,修改时候也得一个个的改无法做到提高可维护性,基本实现结构表现分离。
设计师之所以会使用内部样式表的原因:
站点可能只由一个页面构成
用户还在使用ie3访问站点(ie3最早开始支持css,不支持外联样式)
仅为某个页面写额外定义
设计师不断的修改样式表,并想立即看见效果,即在测试时使用。

外部样式表。

<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/back40.gif");}
不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
是否符合css三大优势,为什么。
符合,是css中最好的一种应用方式,它将css样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用同一个样式表文件,这样能够实现代码的最大限度重用及网站文化的最优化配置。当用户把一个外联样式表下载到缓存中,它依然能控制一个几十个几百个的页面,而不需要另外再加载。所以能提高浏览速度,大大节省用户和服务器带宽。所有支持css的浏览器都支持link法。

注意:外部样式表另一种写法:
<style type=”text/css”>
@import url(“a.css”);
</style>
与link区别:
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。   
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,一边下载一边浏览梦之都网页时,就会出现上述问题)。   
差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。   
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

三、三种方式的优先级

如果你对同一个元素使用了以上三种方法,那么最后起作用的是哪一种呢?也就是三个的优先级别。优先级最高的是行内样式,如果你三种都写了同样的属性,那么行内样式会覆盖其余两种方式,内部样式和外部样式取决于他们在head标签中位置的顺序:
<style type="text/css">
<!--
h1{color:red}
-->
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
style.css中:h1{color:green}
此时外部在内部下方,那最终显示的结果应该是外部中设置的color:green;同样,如果外部样式在内部上方那么最终显示结果是color:red。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复