0.行内样式添加CSS
<p style="color: red;">这是一个段落</p>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css</title> 6 </head> 7 <body> 8 <p><font color="red">这是一个段落</font></p> 9 <p style="color: red;">这是一个段落</p> 10 <p style="color: green;">这是一个段落</p> 11 <p>这是一个段落</p> 12 </body> 13 </html>
1.<head>标签中用成对的<style>标签添加
<style>
/*元素[标签]选择器：选到的是一个元素或者一组元素*/
p {
color: red;
}
</style>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>css</title>
6 <style>
7 /*元素[标签]选择器：选到的是一个元素或者一组元素*/
8 p {
9 color: red;
10 }
11 </style>
12 </head>
13 <body>
14 <p>这是一个段落</p>
15 <p>这是一个段落</p>
16 <p>这是一个段落</p>
17 <p>这是一个段落</p>
18 </body>
19 </html>
2.外链方式<link>标签
<link rel="stylesheet" type="text/css" href="./css2.css">
.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>外链方式</title> 6 <link rel="stylesheet" type="text/css" href="./css2.css"> 7 </head> 8 <body> 9 <p>这是一个段落</p> 10 <p>这是一个段落</p> 11 <p>这是一个段落</p> 12 <p>这是一个段落</p> 13 </body> 14 </html>
.css
p {
color: green;
}
3.优先级
<style>和外联样式的优先级：
看他们出现的先后顺序，最后的出现会把前面的覆盖
所以：最后出现的样式会生效
行内样式优先级是三者之中最高的
<p style="color: blue;">
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>3种样式用法的优先级</title>
6 <style>
7 p {
8 color: green;
9 }
10 </style>
11 <link rel="stylesheet" href="./style.css">
12 </head>
13 <body>
14 <p style="color: blue;">这是一个段落</p>
15 <p>这是一个段落</p>
16 <p>这是一个段落</p>
17 </body>
18 </html>
原文地址：https://www.cnblogs.com/denggelin/p/8993866.html
时间： 2024-10-09 20:02:29