本文通过实例讲解了样式表的四种类型：行内样式、内嵌样式、外部样式表和导入样式。在IE和Firefox中，样式优先级有所不同，通常以最后出现的样式为准。@import在IE中优先级较低，而<link>在Firefox中即使位于<style>之后仍具有较高优先级。
四种样式：行内样式（style="")内嵌样式（<style></style>)链接式（<link>)和导入（@imorpt）。
我自己在ie和ff中测试了一下。感觉是以最后出现的优先级为最高，@imorpt特殊，在ie中它无论在什么位置都落后于<style></style>标签中任何其他样式。但如果<link>在<style>标签前，则优先于<link>,而在ff中就算位于<link>后一样优先级在最后。
下面都以是
这个例子讲解：
将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素，
样式表分类：（1）内部样式表（2）外部样式表
而内部样式表又分为内嵌式样式表和内联式样式表。
外部样式表：外部单独的css文件，如在外建立sample.css文件。
嵌入式样式表：
是利用html中style标签，在嵌入到head标签内部：
eg：
第一次尝试：
<html>
<head>
</head>
<body>
<script type="text/javascript">
</script>
<h1 color=red font-size=14 > 嵌入式样式表 </h1>
</body>
</html>
！！！！！！！！失败：
第二次尝试：
<head>
<style type="text/css">
h1{color:red;font-size:14px}
</style>
</head>
<body>
<script type="text/javascript">
</script>
<h1 > 内嵌式样式表 </h1>
</body>
</html>
内联式样式表：
是利用html标签元素内部的style属性
<html>
<head>
</head>
<body>
<script type="text/javascript">
</script>
<h1 style="color:red;font-size:14px" > 内联式样式表 </h1>
</body>
</html>
外部样式表：
我先在C:/Users/Administrator/Desktop/java/下建立了sample.css文件
内容如下：
h1{color:red;font-size:14px}
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///C:/Users/Administrator/Desktop/java/sample.css" />
</head>
<body>
<script type="text/javascript"/>
</script>
<h1 > 外部样式表 </h1>
</body>
</html>
或者@import
<html>
<head>
<style type="text/css">
@import url(file:///C:/Users/Administrator/Desktop/java/sample.css);
</style>
</head>
<body>
<script type="text/javascript"/>
</script>
<h1 > 外部样式表 </h1>
</body>
</html>
扫一扫
32
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
