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>1、HTML+DIV+CSS零基础快速入门到制作企业站视频课程_8 css 3种样式引用方法<link><style>
原文地址：https://www.cnblogs.com/denggelin/p/8993866.html