[color=darkred][b]使用CSS样式控制页面的方法包括:[/b][/color]
[i]1、行内样式
2、内嵌样式表
3、外部样式表[/i]
[color=darkred][b]链接外部样式表和导入外部样式表的区别:[/b][/color]
[color=darkblue]1、加载顺序不同[/color]
当一个页面被加载时,使用<link>标签引用的CSS会同时被加载,而使用@import引用的
CSS会等页面全部被下载完再加载.
[color=darkblue]2、兼容性的区别[/color]
@import是CSS2.1提出的使用方式,有些老的浏览器并不支持.比如IE4以下浏览器
[color=darkblue]3、使用DOM控制页面样式的区别[/color]
当页面使用JavaScript控制DOM改变页面样式时,使用<link>标签支持,而@import并不
是DOM可控制的,另外,<link>属于XHTML标签,而@import完全是CSS提供的一种方式.
[color=darkred][b]样式的优先级:[/b][/color]
[color=darkblue]从高到低:[/color]
1、行内样式表
2、内嵌样式表
3、链接外部样式表
4、导入外部样式表
[i]1、行内样式
2、内嵌样式表
3、外部样式表[/i]
<!--行内样式-->
<h2>test</h2>
<p style ="color: #ff0000; font-size: 24px" /> test </p>
<!--内嵌样式表-->
<head>
<style type ="text/css">
p{
color: red;
}
</style>
</head>
<!--外部样式表-->
<!--1、链接外部样式表-->
<head>
<link href ="url" rel ="stylesheet" type ="text/css" />
</head>
<!--2、导入外部样式表-->
<head>
<!--
@import url("外部样式表CSS文件的路径和名称");
-->
</head>
[color=darkred][b]链接外部样式表和导入外部样式表的区别:[/b][/color]
[color=darkblue]1、加载顺序不同[/color]
当一个页面被加载时,使用<link>标签引用的CSS会同时被加载,而使用@import引用的
CSS会等页面全部被下载完再加载.
[color=darkblue]2、兼容性的区别[/color]
@import是CSS2.1提出的使用方式,有些老的浏览器并不支持.比如IE4以下浏览器
[color=darkblue]3、使用DOM控制页面样式的区别[/color]
当页面使用JavaScript控制DOM改变页面样式时,使用<link>标签支持,而@import并不
是DOM可控制的,另外,<link>属于XHTML标签,而@import完全是CSS提供的一种方式.
[color=darkred][b]样式的优先级:[/b][/color]
[color=darkblue]从高到低:[/color]
1、行内样式表
2、内嵌样式表
3、链接外部样式表
4、导入外部样式表