CSS fundamental

Posted on | In
CSS 的一些基礎知識

Basic

Color & Background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
    background: #000    /* 底色 */
        url("image.jpg")    /* 背景圖片, 會在底色之上 */
        no-repeat   /* 是否重複圖片已填滿整個畫面 */
        fixed;      /* 是否隨著滾動頁面而移動 (fixed / scroll)*/
}

/* 可以breakdown成 : */
body {
    background-color: #000;
    background-image:  url("image.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* CSS3 */
body {
    background-size: cover;     /* 自動將image縮放, 去完整個cover我們的target */
}

Font

  • 用 font-family 這個 attribute 去設定字體集
    • 是一個 array, 因此可以指定多個 font
    • 有先後順序, 前面的 font 找不到才會使用下一個 font
  • 使用系統 Default 之 Native font :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
    font-family:
        /* Safari for OS X and iOS */
        -apple-system,
        /* Chrome >= 56 for OS X , Windows, Linux and Android */ 
        system-ui,
        /* Chrome < 56 for OS X */
        BlinkMacSystemFont,
        /* Windows */
        "Segoe UI",
        /* Android */
        "Roboto",
        /* Basic web fallback */
        "Helvetica Neue", Arial, sans-serif;
}
  • 使用 Google 提供的免費 font
    • Google font
    • 利用 CDN 的概念
      • 選擇想要的 font, 按右上角的(+), 就可以得到使用時要用的連結(CDN)

Selectors

  • 在 CSS 中選擇元件依據
    • id
    • class
    • … etc.
1
2
3
4
5
6
7
8
9
10
11
h1 {
    ...
}

.class1 {
    ...
}

#id1 {
    ...
}

Advanced selectors

  • Composition - A or B
1
#id1, .class1 { ... } /* 有 id1「或」有class1這個class的元件 */
  • And - A and B
1
li.class1 { ... } /* li「且」有class1這個class的元件 */
  • Descendent - 在A之下的B (A中含有B的子元件)
1
li a { ... } /* 在li內裡面的a元件*/
  • Adjacent - 與A在同一層, 且B是在A的下一個元件
1
2
3
.red + span {  /* 與.red元件同一層, 鄰近的span元件 */
    font-color:red; 
}
1
2
3
<div class="red"></div>
<span>我是紅色</span>
<span>我是黑色</span>
  • Attribute selector - 選擇某個含有特定attribute的元件
1
a[href="https://..."] { ... } /* 選擇含有href這個attr.且value是"https://..."的a元件 */

Pseudo class & element

選擇元件的「某個狀態」或「某個位置」

1
2
3
4
5
6
7
8
/* pseudo class selector */ 
a:hover, a:visited {    /* 當a在hover或visited時 */
...
}
/* pseudo element selector */ 
p::first-latter {   /* p的第一個latter */
    ...
}

The 30 CSS Selectors You Must Memorize

Inheritance, Cascading, and Specificity

  • Inheritance
    • 有些父元件的屬性是會被子元件繼承的
    • e.g. font, color, text-align … etc.
  • Cascading
    • 某個元件最終的 Style, 可能是由多個 CSS 組合而成
1
2
3
4
5
6
7
8
9
h1 {
    color: #000;
}
.text {
    text-align: center;
}
#mytext {
    font-size: 100px;
}
1
2
<!-- 最終的style會有上方三個selector指定的attr.組合而成 -->
<h1 class="text" id="mytext">Hi</h1>

  • Specificity

    • 當不同的Selector選到同個元件, 且設定的attr.有衝突時, 比較的順序 :

      1. 是否有宣告 !important

        1
        2
        3
        body {
            color : red !important; /* 若有衝突, 都以宣告important的為主 */
        }

      2. 比較 specificity

        • 誰大就以誰為主
          • id : 百位數
          • class : 十位數
          • type : 個位數
          • e.g.
            • #id1 li.class1 => 111
            • li ul.class1 => 012
      3. 比較撰寫順序, 後者覆蓋前者

Layout

Box model

Layout

  • 遵循Normal flow
    • 由上而下
    • 由左而右

  • display

    • 指定一個元件的layout
    • 四種設定
      • block : 元件佔滿一個橫向的block
      • inline : 元件會由左而右排列, 直到佔滿螢幕寬才換行, 且 換行時會對元件進行切割
      • inline-block : 一樣是由左而右排列, 不過換行時是以元件為單位(即不會對元件進行切割)
      • none : 讓元件消失, 且不佔空間

  • hidden methon

    1. visibility:hidden
      • Still occupies space in normal flow
    2. display:none
      • Removed from normal flow

  • Centering content

    • In block
      • text-align: center
    • In inline
      • 無法, 因為無法設定寬度, 沒有所謂的center
    • In block’s block
      • Add margin-left:auto and margin-right:auto in inner block
        • Tips :
          • 當 margin 設為 auto 時, browser 會自動幫我們配置最大的 margin

  • Margin collapse

    • 相鄰的, 大吃小

Relative Metrics & Box Sizing

  • Relative to parent

    • width: 70%;
      • 佔 parent 的70%

  • Relative to root

    • rem

      1
      2
      3
      4
      5
      6
      7
      html {
          font-size: 16px;    /* root */
      }
      div {
          max-width: 3rem;    /* 3 * 16 px */
          font-size: 1rem;    /* 1 * 16 px */
      }

  • Box sizing

    • 一般來說, 在 CSS 中的 width 指的是 content 的 width
      • 也就是不包含 padding 和 border
      • 不直覺
    • 若希望一併考慮 padding 和 border
      1
      2
      3
      4
      5
      /* 在一開始設定 */
      * {
          /* border & padding count into width & height */ 
          box-sizing: border-box;
      }

Position

  • Position
    • Default(也就是當沒有去設定 position 的 value 時) : static
      • 遵循 normal flow
      • 無法透過 top, left 等屬性去設定其上距左距…等
    • position: relative
      • 遵循 normal flow
      • 可以去設定其 top, left … etc.
    • position: absolute
      • 不遵循 normal flow
      • 位置是根據其最接近且有設定 position 屬性的祖先, 否則則根據 html 這個根元件
    • position: fixed
      • 不遵循 normal flow
      • 位置是根據 window(viewport) 元件
        • 也就是當我們 scroll 時, 不會影響其位置

Float

  • float
    • 不遵循 normal flow
    • 元件將向左/右堆疊

Stacking order

  • z-index
    • 設定 z-index attribute
      • 值越高, 越上層
      • 所有元件之 defalut 皆為 0
      • 元件必須被 positioned才生效
1
2
3
4
5
6
7
8
9
10
11
.higher {
    position: relative;
    z-index: 2;
}
.lower {
    position: relative;
    z-index: 2;
}
.none-use {
    z-index: 99;    /* 沒設定position, 所以z-index無效 */
}

  • Stacking context
    • 當 B,C 元件為 A 元件的後代
      • B, C 元件的 z-index 為在 A 下的 local index

參考資料