标签：gre inf 一个 doctype 优先 图片 span 入门 png
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>
标签：gre inf 一个 doctype 优先 图片 span 入门 png
原文地址：https://www.cnblogs.com/denggelin/p/8993866.html
