上面这张思维导图已经大概的讲明白了四种设置方式的不同点，下面就细入说明一下各自的用法和注意点。
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>
运行结果：
最后说一点关于四种设置方式的优先级：这个就不用代码作为示例了，大家可以自己简单的实验一下。
内联样式表优先级高于其他三种，其他三种的优先级在于加载顺序，先加载的先运行。
时间： 2024-10-07 11:22:50