筆記 - CSS 基礎

Posted on In

本週開始從前端 CSS 基礎開始複習與學習。

CSS

All CSS properties - w3c school

display

  • display: none
  • display: block
  • display: inline
  • display: inline-block
  • display: contents
  • display: flex
  • display: grid

等等

display:flex => Flexbox 排版系統

display: flex 之後，item 為 flex container。

參考資料

Flex container properties:

  • flex-direction: 改變 item 的排列方向 （ default: row, 表示 row 由左至右 為 main axis）屬性有 row, row-reverse, column, column-reverse

  • flex-wrap: 元素太多遇到邊界自動換行

    • no wrap (default): 寬度不夠時，會壓縮元素寬度擠成一行
    • warp: 寬度不夠時會自動換行
    • wap-reverse：換行時，新的一行在舊的上面

  • flex-flow: flex-direction flex-wrap 寫一起


  • justify-content: main axis 的對齊與間距。space 指 container 空間裡 item 的分佈
    • flex-start (default): 對齊起始點
    • flex-end
    • center
    • space-between: 兩側貼邊界，在平均分配間距
    • space-around: 每個 item 左右兩側空間平均分配
    • space-evenly: 每個 item 間距、與邊界距離都相同

  • align-items: cross axis 的對齊與間距
    • stretch (default): item 會延展填滿空間，除非有指定 width/height
    • flex-start: 貼齊 cross axis start
    • flex-end
    • center
    • baseline: 先對齊內容（文字下緣）， item 隨著跑
  • align-content（？）

position

定義元素與頁面流 (page flow) 的相互關係

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

  • position: static (default) 不會因為設定偏移值 (top/right/bottom/left) 而產生位移
  • position: relative 定義 top/right/bottom/left 會產生偏移
  • position: absolute 跳脫 page flow, 在 page flow 中不佔有空間
    • 元素大小會根據內容變化
    • 定義偏移值後，元素會往上層尋找「非靜態區塊」（不是 position: static 的元素）做為定位參考點。若上層皆為 static，則會找到 HTML 最外層元素 <body> 來做定位。
    • 要使用 absolute 時，通常在此元素的 parent layer 定義 relative 做為定位參考點
  • position: fixed 跳脫 page flow, 以當前頁面的可視區 viewport 來定位
    • 元素大小依內容變化，也不受 parent layer 影響
    • 應用：header, 網頁右下客服框

CSS 優先級

CSS 樣式來源

CSS = Cascading Style Sheets，來源可分為三種，優先順序低 -> 高

  • User agent origin：由「瀏覽器廠商」制定，就是瀏覽器預設樣式
  • User origin：由「瀏覽器使用者」制定，使用者設定
  • Author origin：由「網頁開發者」制定

CSS 套用方法

優先順序低 -> 高

  • HTML 外部載入 <link href="style.css">
  • HTML 內部載入 <style>...</style>
  • HTML 行內套用 <div style="...">

CSS 選擇器

透過多種 CSS 選擇器，選取到特定的元素來指定樣式，分為三個等級，以下由高至低

  • 等級一：id, ex.#article
  • 等級二：class, attribute, pseudo-class. ex. .container, [type="radio"], :hover
  • 等級三：element and pseudo-element. ex. div, ::before

CSS 選擇器優先級計算：

以#article > .my-container div 為例

  • 等級一：id #article
  • 等級二：class .my-container
  • 等級三：element div
    優先級得分是 1-1-1

若加入一個class #article > .my-container div.active，則會變成 1-2-1，優先級會比上一個選擇器高，裡面的樣式會優先呈現。

應用樣式優先級計算，在不修改前面的 code 前提下，修改或改寫 CSS 樣式。

CSS Diner - CSS 選擇器練習小遊戲

CSS 撰寫順序

後面寫的會覆蓋掉前面寫的

實作中需注意的三件事

  1. 不輕易使用 !important 避免導致日後難維護
  2. 遵守內容和樣式分離：盡量不要在 HTML 中另外撰寫 style 區塊及使用 inline style ，除非是用 JavaScript 動態控制樣式變化的時候
  3. 讓選擇器的優先級放低：盡量選用 Class 或 Element 的級別的選擇器，非必要不用 id 或複雜的選擇器組合，保留彈性給後續的樣式來覆蓋

偽元素與偽類

Pseudo-elements 偽元素

MDN

偽元素不存在於 DOM 節點中，但卻如真的元素一樣可受 CSS 操控樣式

寫法：選擇器後面加上兩個冒號與關鍵字，例如p::first-line，可以選取段落中的第一行文字

常用關鍵字如下，其中 ::before 與 ::after 尤其常用

  • ::first-line - 選取第一行
  • ::first-letter - 選取第一個字
  • ::before - 在選取的元素前面插入東西
  • ::after - 在選取的元素後面插入東西
  • ::selection - 選取反白後的文字
1
<p>Hello World</p>
1
2
3
4
5
6
7
8
p::before {
content: "♥";
color: red;
}
p::after {
content: "^_^";
color: blue;
}

可以看到 ♥ Hello World ^_^

::before 會變成 <p> 內的第一個子元素，::after 為 <p> 結束前的最後一個子元素。::before 與 ::after 兩者的預設值都是 display:inline 行內元素，並會繼承 p 標籤的其他屬性（例如字體大小）

Pseudo-class 偽類

偽類與元素的某個「狀態」有關，例如：

  • :visited - 點擊過的超連結
  • :checked - 被勾選的元素
  • :hover - 滑鼠滑過的地方
  • :focus - 滑鼠所在的表單輸入框
  • :first-child - 第一個子元素
  • :last-child - 最後一個子元素
  • :nth-child() - 特定子元素
1
2
3
4
5
6
<div class="example">
    <p>一</p>
    <p>二</p>
    <p>三</p>
    <p>四</p>
</div>
1
2
3
4
5
6
.example p:nth-child(odd) {
    background-color: OrangeRed;
}
.example p:nth-child(even) {
    background-color: LightSeaGreen;
}

可以達成單雙數行背景顏色不同的效果。