[align=center][size=xx-small]HTML引入CSS样式的方式详解[/size][/align]
[b]1.1内联属性(Inline style attribute)[/b]
直接修改HTML元素的style属性,将CSS代码直接写在style属性里。
例:
<h1 style="font-size: 12px;">我的字号被修改了</h1>
[b]1.2直接写在style标签里[/b]
通过选择器选择HTML元素,将CSS样式放在<style>标签中,<style>标签一般要求写放在<head>标签里。如果不写在<head>标签里有些浏览器会报错。
例:
[b]1.3外部链接调用[/b]
[b]1.3.1链接方式——<link>标签[/b]
定义:
<link>标签定义文档与外部资源的关系。
语法:
<link rel="stylesheet" href="styles.css" />
[color=red]注意:<link>标签一般写在<head>标签里。[/color]
常用属性:
rel属性,规定当前文档与被链接文档之间的关系。如:"stylesheet"表示文档的外部样式表。
href属性,设置引用CSS文件的路径。
tyle属性,规定链接文档文件类型。
media属性,规定应用的设备。如:"screen"是默认值,说明应用在计算机屏幕上。
[b]1.3.2导入方式——CSS@规则(@import)[/b]
定义:
@import是CSS@规则,用于加载外部层叠样式表。
语法:
<style [type="text/css"]>
@import url(../CSS/style.css);
</style>
[color=red]注意:<style>标签一般写在<head>标签里。[/color]
[b]1.3.3链接方式和导入方式的比较[/b]
相同点:
两者的目的相同,都是将一个独立的CSS文件引入到HTML文件中。
不同点:
语法不同,链接式使用HTML的标记引入外部CSS文件,而导入式则是使用CSS的规则引入。
CSS文件加载顺序不同,当HTML文件被加载时,链接式引用的文件会同时被加载,而导入式引用的文件则会等页面全部下载完毕再被加载。
兼容性不同,由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而<link>标签无兼容性问题。
功能多样性不同,<link>除了调用CSS外还可以有其他作用,譬如声明页面链接属性,声明目录等,而@import就只能调用CSS。
<link>标签支持使用JS控制DOM去改变样式;而@import不支持。
引入多个CSS文件的方式不同。链接式引入多个CSS文件,使用多个<link>标签,而导入式除了使用多个@import,还可以在css文件中嵌套CSS文件。
[b]1.4总结[/b]
没有特殊要求下,应尽量使用<link>标签导入外部CSS文件,避免或者少用使用其他方式。
[b]1.5实例详解——引入多个CSS文件[/b]
例1-1:
例1-2:
例1-3:
[color=red]注意:此方法有一个缺点,会对网站服务器产生过多的HTTP请求。以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。[/color]
[b]1.6三种方式的CSS样式执行优先级[/b]
内联式>内嵌式>外部引用式。
[b]1.1内联属性(Inline style attribute)[/b]
直接修改HTML元素的style属性,将CSS代码直接写在style属性里。
例:
<h1 style="font-size: 12px;">我的字号被修改了</h1>
[b]1.2直接写在style标签里[/b]
通过选择器选择HTML元素,将CSS样式放在<style>标签中,<style>标签一般要求写放在<head>标签里。如果不写在<head>标签里有些浏览器会报错。
例:
<style>
h1{
font-size:12px;
}
</style>
[b]1.3外部链接调用[/b]
[b]1.3.1链接方式——<link>标签[/b]
定义:
<link>标签定义文档与外部资源的关系。
语法:
<link rel="stylesheet" href="styles.css" />
[color=red]注意:<link>标签一般写在<head>标签里。[/color]
常用属性:
rel属性,规定当前文档与被链接文档之间的关系。如:"stylesheet"表示文档的外部样式表。
href属性,设置引用CSS文件的路径。
tyle属性,规定链接文档文件类型。
media属性,规定应用的设备。如:"screen"是默认值,说明应用在计算机屏幕上。
[b]1.3.2导入方式——CSS@规则(@import)[/b]
定义:
@import是CSS@规则,用于加载外部层叠样式表。
语法:
<style [type="text/css"]>
@import url(../CSS/style.css);
</style>
[color=red]注意:<style>标签一般写在<head>标签里。[/color]
[b]1.3.3链接方式和导入方式的比较[/b]
相同点:
两者的目的相同,都是将一个独立的CSS文件引入到HTML文件中。
不同点:
语法不同,链接式使用HTML的标记引入外部CSS文件,而导入式则是使用CSS的规则引入。
CSS文件加载顺序不同,当HTML文件被加载时,链接式引用的文件会同时被加载,而导入式引用的文件则会等页面全部下载完毕再被加载。
兼容性不同,由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而<link>标签无兼容性问题。
功能多样性不同,<link>除了调用CSS外还可以有其他作用,譬如声明页面链接属性,声明目录等,而@import就只能调用CSS。
<link>标签支持使用JS控制DOM去改变样式;而@import不支持。
引入多个CSS文件的方式不同。链接式引入多个CSS文件,使用多个<link>标签,而导入式除了使用多个@import,还可以在css文件中嵌套CSS文件。
[b]1.4总结[/b]
没有特殊要求下,应尽量使用<link>标签导入外部CSS文件,避免或者少用使用其他方式。
[b]1.5实例详解——引入多个CSS文件[/b]
例1-1:
<!DOCTYPE html>
<html>
<head>
<title> 链接式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../CSS/PublicStyles.css"/>
<link rel="stylesheet" href="../CSS/styles.css"/>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
#box {
color:red;
}
例1-2:
<!DOCTYPE html>
<html>
<head>
<title> 导入式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url(../CSS/ PublicStyles.css);
@import url(../CSS/style.css);
</style>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
#box {
color:red;
}
例1-3:
<!DOCTYPE html>
<html>
<head>
<title> 导入式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url(../CSS/style.css);
</style>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
@import url(../CSS/ PublicStyles.css);
#box {
color:red;
}
[color=red]注意:此方法有一个缺点,会对网站服务器产生过多的HTTP请求。以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。[/color]
[b]1.6三种方式的CSS样式执行优先级[/b]
内联式>内嵌式>外部引用式。