CSS：CSS介紹 & CSS與HTML結合方式
阿新 • • 發佈：2021-08-09
1 什麼是CSS？
CSS是指層疊樣式表 cascading style sheets。
通過CSS可以讓我們定義HTML元素如何顯示。
CSS可以讓我們原本HTML不能描述的效果，通過CSS描述出來。
通過CSS描述我們的html頁面，可以讓我們的頁面更加漂亮，可以提高工作效率。
2 CSS與HTML結合方式
第一種方式 內聯/行內樣式
就是在我們的HTML標籤上通過style屬性來引用CSS程式碼。
優點:簡單方便 ；
缺點:只能對一個標籤進行修飾。
第二種方式 內部樣式表
我們通過<style>標籤來宣告我們的CSS. 通常<style>標籤我們推薦寫在head和body之間，也就是“脖子”的位置。
優點:可以通過多個標籤進行統一的樣式設定
缺點: 它只能在本頁面上進行修飾
語法： 選擇器 {屬性:值;屬性:值}
第三種方式 外部樣式表
我們需要單獨定義一個CSS檔案,注意CSS檔案的字尾名就是.css
在專案根目錄下，建立css目錄，在css目錄中建立css檔案 css01.css
在<head>中使用標籤引用外部的css檔案
還可以使用另一種引入css檔案的方式：
<style> @import 'css/css01.css' </style>
關於外部匯入css使用與@import的區別?
1. 載入順序不同
@import方式匯入會先載入html，然後才匯入css樣式，那麼如果網路條件不好，就會先看到沒有 修飾的頁面，然後才看到修飾後的頁面
如果使用link方式，它會先載入樣式表，也就是說，我們看到的直接就是修飾的頁面
2.@import方式匯入css樣式，它是不支援javascript的動態修改的。而link支援
三種樣式表的優先順序：滿足就近原則
內聯 > 內部 > 外部