CSS學習筆記(一)-4.CSS樣式引入三種方式
阿新 • • 發佈：2021-07-09
一、內部樣式
即在Html中任意位置使用<style></style>標籤，內部編寫樣式。
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-09 21:15:57 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-09 21:15:58 7 * @Description: 8 * @FilePath: \CSS2\07-CSS的三種樣式引入.html 9 -->View Code10 <!DOCTYPE html> 11 <html lang="en"> 12 <head> 13 <meta charset="UTF-8"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 16 <title>07-CSS的三種樣式引入</title> 17<style> 18 * { 19 color:red; 20 } 21 </style> 22 </head> 23 <body> 24 <h2>我是測試標題</h2> 25 </body> 26 </html>
好處：1.樣式位置清晰。
2.可以控制當前整個Html檔案。
缺點：不能控制其他hmtl檔案。沒有做到css與html完全分離。
二、行內樣式表
在標籤內部寫樣式，使用style屬性
1View Code<!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-09 21:15:57 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-09 21:20:53 7 * @Description: 8 * @FilePath: \CSS2\07-CSS的三種樣式引入.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>07-CSS的三種樣式引入</title> 18 </head> 19 20 <body> 21 <h2 style="color:pink;">我是測試標題</h2> 22 </body> 23 24 </html>
編寫規範：style屬性，屬性值必須雙引號
好處：1.除錯單個標籤方便
缺點：1.沒有做到樣式與html分離
2.如果需要控制大量元素，編寫麻煩。
三、外部樣式表
就是將原始寫在單獨的css檔案中，然後Html中單獨引用。
好處：1.css月html分離
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-09 21:15:57 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-09 21:25:56 7 * @Description: 8 * @FilePath: \CSS2\07-CSS的三種樣式引入.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>07-CSS的三種樣式引入</title> 18 <link rel="stylesheet" href="./normal.css"> 19 </head> 20 21 <body> 22 <h2>我是測試標題</h2> 23 </body> 24 25 </html>View Code
本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14992541.html