技術標籤：csscss

CSS樣式表

CSS的三種樣式表

按照CSS樣式書寫的位置(或者音符的方式), CSS樣式表可以分為三大類

1. 行內樣式表(行內式)

在元素標籤內部的style屬性中設定CSS樣式

• 適合於修改簡單樣式

    <div style="color: red; font-size: 12px;">小屁熊</div>

2. 內部樣式表(嵌入式)

單獨把所有CSS樣式抽取出來, 單獨放在一個<style>標籤中

<style>
    div {
        font-size: 16px;
        font-weight: lighter;
        font-style: italic;
    }
</style>
 

- `<style>`標籤理論上可以放在HTML文件的任何地方, 但一般會放在文件`head`標籤中
- 程式碼結構清晰, 但是並**沒有實現結構與樣式完全分離**
- 使用內部樣式表設定CSS, 通常也被稱為**嵌入式引入**, 這種方式是我們**練習時常用**的方式

3. 外部樣式表(連結式)

• 實際開發都是外部樣式表, 適合於樣式比較多的情況.
• 核心是: 樣式單獨寫到CSS檔案中, 之後把CSS檔案引入到HTML頁面中使用

步驟: (兩步)

1. 新建一個字尾名為.css的樣式檔案, 把所有CSS程式碼都放入此檔案中
2. <link rel="stylesheet" href="css檔案路徑">
   
   stylesheet描述當前頁面與hred所指定文件的關係

總結

Chrome除錯工具

• Ctrl + 0 復原瀏覽器大小
• 如果點選元素, 發現右側沒有樣式引入, 極有可能是類名或者樣式引入錯誤
• 如果有樣式, 但是樣式前面有黃色歎號提示, 則是樣式屬性書寫錯誤

Emmet語法

• Emmet語法
• CSS的複合選擇器
• CSS的元素顯示模式
• CSS的背景
• CSS的三大特性
• CSS的註釋