上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点。
1.嵌入样式表
<html>
<head>
<title>CSS四种设置方式</title>
</head>
<body>
<p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p>
</body>
</html>
运行结果:
2.嵌入样式表
<html>
<head>
<title>CSS四种设置方式</title>
<style>
p{
font-size:2cm;
color:red;
}
h2{
color:red;
}
table{
border:1px solid black;
font-size:1cm;
}
table caption{
color:red;
}
table th{
color:red;
border:1px solid black;
}
table td{
color:red;
border:1px solid black;
}
</style>
</head>
<body>
<p>嵌入样式表</p>
<h2>嵌入样式表</h2>
<table cellspacing="0";cellpadding="0";>
<caption>表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>个体</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>个体</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>个体</td>
</tr>
</table>
</body>
</html>
运行结果:
3.外部样式表
css3.html:
<html>
<head>
<title>CSS四种设置方式</title>
<!--href="文件名"-->
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<p>外部样式表</p>
<b>外部样式表</b>
</body>
</html>
layout.css:
<pre name="code" class="css">p{
color:green;
background-color:red;
border:5px solid blue;
font-size:3cm;
}
b{
color:yellow;
background-color:gray;
border:4px solid yellow;
font-size:3cm;
}
运行结果:
4.输入样式表
one.css:
p{
color:yellow;
}
two.css:
b{
color:yellow;
}
three.css:
@import url(one.css);
@import url(two.css);
p{
font-size:1cm;
border:2px solid green;
}
b{
font-size:1cm;
border:2px solid green;
}
css4.html:
<html>
<head>
<title>输入样式表</title>
<style>
@import url(three.css);
</style>
</head>
<body>
<p>输入样式表</p>
<b>输入样式表</b>
</body>
</html>
运行结果:
最后说一点关于四种设置方式的优先级:这个就不用代码作为示例了,大家可以自己简单的实验一下。
内联样式表优先级高于其他三种,其他三种的优先级在于加载顺序,先加载的先运行。