四、[前端] CSS

CSS 主要是來管外觀的部份

範例

p {
    margin: 10px;
    font-size: 16px;
    color: #ccc;
}

選擇器 {
    屬性: 值;
}

CSS 選擇器(selector)

再舉例

/*所有 p 標籤的背景都會變藍色*/
p {
    baceground-color: blue;
}

/* id 為 target 元素的文字大小變成 32px */
#target {
    font-size: 32px;
}

/* class 為 container 元素的外距會自動調整，產生置中效果 */
.container {
    margin: 0 auto; // 置中
}

如果直接選不夠的話，需要設立條件縮小範圍

/* 從 header 底下找 li，不管幾層都可以，子孫有就行 */
#header li {
    backgournd-color: #ccc;
}

/* 只有 nav 的下一層的 ul，只有底下一層的孩子 */
#nav > ul {
    padding: 4px 12px;
}

/* li.active 代表既是 li 又有 .active 的元素
 ~ 用來連接目標與後面同一層的元素，只要是在 li.active 之後的 li，都會套用設定 */
li.active ~ li {
    font-weight: bold;
}

/* 只有目標後面的正後面的元素才會套用設定，就是 li.active 正後面的 liv 才會套用設定 */
li.active + li {
    color: green;
}

常見的 CSS selector

• 基本

  • p 基本標籤 tag

  • #target id

  • .container class name

• 篩選條件

  • div.container 所有帶有 .container 的 div

  • #header li #header 底下所有的 li 子孫

  • #header > ul #header 下一層的 ul 兒子

  • .active ~ li .active 後的同一層的所有 li

  • .active + li .active 後的第一個 li

常見的 CSS 屬性

知道了選擇器，可以找到目標後，接下來學習怎麼改外觀。首先要了解 box model

box model 由外而內包含

• margin，外距，自己與其他元素的距離

• border，邊框，自己的邊框

• padding，內距，留白，content 到 border 的距離

• width / height，內容自己的長與寬

.block {
    /* 外距和內距，有上下左右屬性 */
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 20px;

    /* 邊框 */
    border-width: 2px; /* 寬度 */
    border-style: solid; /* 長相 */
    border-color: black; /* 顏色 */
    border: 2px solid black; /* 簡寫   */
}

接下來談 position，位置。它不是直接調整座標 (x,y) 位置，而是用來設定元素位置的根據點的屬性。例如

• static。自然的文章流動，由上而下由左至右，是預設值。它不能調整位置

• relative。可以調整位置的 static。一樣有自然文章流動，但可以調整位置

• absolute。設定特別。會有起始點，根據最早有設定 position 的祖先當作基準點

• fixed。起始點就是網頁整個可見的範圍

接下來談 float，就是文繞圖的概念。

• float

  • 值有 left, right

• clear

  • 值有 left, right, both

float 常被用在排版上面。float: left 的主要內容可以設定 width: 80%，float: right 的側邊欄可以設定 width: 20%，這樣排版就會正常。

只是使用完 float 後，要清除 float，不然網頁下方的 footer 會往上跑。這屬性叫 clear。clear: both

範例

<!-- html -->

<div id="content">
    <div id="article">
        Lorem
    </div>
    <div id="sidebar">
        Lorem
    </div>

    <div class="clearfix"></div>
</div>

<div id="footer">
    footer is here
    <p>
        Lorem
    </p>
</div>

#content {
    position: relative; /* 文字自然流動，但能調整大小與位置 */
    float: left; /* 文字靠左流動 */
    width: 80%; /* 內容寬度佔父親寬度的 80% */
}

#sidebar {
    position: relative;
    float: right;
    width: 20%
}

.clearfix {
    clear: both;
}

小結

• box model

• position

• float / clear

• 基礎 CSS 教學！不再擔心記不住，一次掌握 CSS 常用屬性 / 網頁基礎 15 天 - Blog

常見的 CSS 設定補充

• 比較大的架構

  • display

    • block, inline, none, flex

    • Flexbox basic - YouTube

      • System

      • CSS properties

      • Playground

      • Practice

      • Can I use?

  • position

    • static, relative, absolute, fixed

    • 搭配 top / right / bottom/ top 調整位置

  • float & clear

    • float: left, right

    • clear: left, right, both

• 比較小的細節

  • box-model

    • 很多屬性的總稱

    • margin, border, padding, width / height

    • block 元素才有 box model；inline 元素就沒有

  • background

    • background-color, background-image, background

  • text

    • text-align

    • line-height

  • font

    • font-size, font-weight, color 文字顏色, font-family

  • Others

    • overflow 當內容超出容器，怎麼顯示

    • list-style-type li 點的樣式

    • text-decoration 底線 underline、刪除線 line-through

    • ...

Flexbox basic - YouTube

• System

  • 在自己設定 display: flex 後，自己變成 flex container，子元素變成 flex item

  • flex lines 基準線會被 flex item Follow

  • Main axis and Cross axis 水平軸線與垂直軸線

  • Main start / Main end, Cross start / Cross end

  • 這個系統可以調整的東西：方向、對齊方式、寬度設定

• CSS properties

  • Flex container

    • Flex container About axis

      • flex-direction

        • 定義 main axis 的走向

        • 預設值 flex-direction: row 由左置右

        • 設定值 row, row-reverse, column, column-reverse

      • justify-content

        • flex items 如何對齊 main axis

        • 預設值 justify-content: flex-start

        • 設定值 flex-start, flex-end, center, space-between, space-around

      • align-items

        • flex items 如何對齊 cross axis

        • 預設值 align-items: flex-start

        • 設定值 `flex-start, flex-end, center, stretch(延展開來), baseline(看 flex item 裡文字的底線)

    • Flex container About wrap 包覆的方式

      • flex-wrap

        • flex item 超過 container 的話，該怎麼做

        • 預設值 flex-wrap: nowrap 雖然不會超出去，但 item 也不會換行，就在同一行硬塞

        • 設定值 nowrap, wrap, wrap-reverse

      • align-content

        • 在 wrap 之後，會多很多行 flex lines

        • flex lines 如何對齊在 cross axis

        • 有多行，就會有多條 flex lines

        • 預設值 align-content: flex-start

        • 設定值 flex-start, flex-end... 好多 ==

  • Flex items

    • Flex

      • 容易跟 display: flex 搞混

      • 預設值 flex: 0 1 auto

      • flex: flex-grow flex-shrink flex-basis;

      • flex-grow

        • flex container 還有多的空間時，要不要自動成長，閒置空間要怎麼分

      • flex-shrink

        • 當 flex-items overflow 時，item 要不要縮

        • 預設值 flex-shrink: 1，會縮

      • Flex-basis

        • 類似寬度的設定

        • 預設值 flex-basis: auto，可用 px 設定寬度

    • Order

      • 在 RWD 操作方便，可以控制呈現順序

      • 假設畫面上有 .sidebar.A .content .sidebar.B 區塊

      • 在手機上想先呈現 .content，再呈現 .sidebar.A .sidebar.B

      • .main {
            display: flex;    /* 把自己變成 flex container */
            flex-wrap: wrap;  /* flex item 寬度超過 container 的話，就硬塞 */
        }
        
        .content {
            order: 1;
        }
        
        .sidebar.A {
            order: 2;
        }
        
        .sidebar.B {
            order: 3;
        }
        
        @media screen and (min-width: 600px) {
        
            .sidebar {
                flex: 0 0 200px;
            }
        
            .content {
                flex: 1;
                order: 2;
            }
        
            .sidebar.A {
                order: 1;
            }
        
            .sidebar.B {
                order: 3;
            }
        }

    • Margin

      • 在 flex 裡更 powerful，上下的 margin 可以 auto，可以實現垂直置中

    • align-self

      • 單獨一個 flex item 對齊 cross axis

      • 如果有機車設計師要單獨一個 item 位置不一樣，就用這個

      • .product:nth-child(3) {
            align-self: flex-end;
        }

• Playground

  • Visual Guide to CSS3 Flexbox: Flexbox Playground |

  • Flexy Boxes — CSS flexbox playground and code generation tool

  • CodePen - Flexbox playground

  • Flexbox Playground

• Practice

  • Grid

    • 像 bootstrape 把 column 12 等分

    • * {
          box-sizing: border-box; /* 不知道什麼用途 */
      }
      
      .container {
          width: 800px;
          margin 0 auto;
      }
      
      .product-list{
          display: flex;    /* 只用這個排版就好了，好棒棒 XD */
          /* flex-wrap: wrap;  想換行的話 */
          width: 800px;
      }
      
      .product {
          /* flex: 0 1 auto; */
          margin-bottom: 30px;
          padding: 0 15px;
      }
      
      .product img {
          width: 100px;
          height: auto;
      }

    • 發現好用的示意圖工具，placehold.it

      • http://placehold.it/400x300

  • Sticky footer

    • 剛做網站，內容很少，footer 沒被擠下去，就跑上來了

    • #main {
          display: flex;
          fles-direction: column;    /* 排版由上至下，#header, #content, #footer */
          height: 100vh;
      }
      
      #header {
          background-color: #ccc;
          line-height: 2;
      }
      
      #content {
          flex: 1; /* 跟 #content 要自動 flex grow，把多的空間拿來使用 */
      }
      
      #footer {
          padding: 30px;
          background-color: #333;
          text-align: center;
          color: white;
      }

  • More

    • webflow

    • https://flexbox.webflow.com/#examples

• Can I use?

  • 2012 年後規範穩定

  • https://caniuse.com/#search=flexbox

[練習] 版面置中

試作的 Codepen

• https://codepen.io/pen/?editors=1100

html

<div class="container">
  <h1>Lorem ipsum dolor sit amet.</h1>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit repudiandae beatae, optio enim non distinctio perspiciatis a modi fugiat saepe!
  </p>
  <img src="http://placehold.it/400x300" alt="px示意圖">
</div>

css

.container1 {
  width: 60%;
  margin: 0 auto; /*版面置中*/
  padding: 20px;

  background-color: pink;
  text-align: center; /*把文字置中*/
  color: white;
}

[練習] 3 欄式架構

試作的 Codepen

• https://codepen.io/ayugioh2003/pen/PRJrBJ

• emmet 展開功能

• Can VS Code Do Emmet? | CSS-Tricks

• Cheat Sheet

• (29) Using Emmet in Visual Studio Code - YouTube

• Emmet Documentation

html

<h1>3 欄式架構</h1>
<div class="container2">
  <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
    <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
    <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
    <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
    <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
    <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
    <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
    <div class="work">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
  </div>
  <div class="clearfix"></div>
</div>
<p>記得要 clearfix 避免版面壞掉</p>

css

.container2 {
  position: relative; /*讓 float 有依據*/
  width: 660px;
  margin: 0 auto; /*置中*/
}

.work {
  float: left; /*讓內容浮動*/
  background-color: pink;
  margin: 5px;
  padding: 5px;
  width: 200px;
  height: 220px; /*如果內容不一樣高，可能會塌陷*/
}

.clearfix {
  clear: both;
}

控制寬度的魔法：box-sizing

試作的 Codepen

• https://codepen.io/pen/?editors=1100

width 只會計算 content 的寬度，padding, content 要另外加總；於是就有了 box-sizing 魔法

box-sizing 有兩個值

• content box (default)

• border box

html

<h1>用box-sizing控制寬度</h1>
<div class="container3">
  <div class="work1">
    <div>
      width 很單純 <br>
      只設定內容的 width 而已
      其他另算

    </div>
  </div>
    <div class="work1">
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
    </div>
  </div>  
    <div class="work1">
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
    </div>
  </div>  
    <div class="work1">
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
    </div>
  </div>  
    <div class="work1">
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
    </div>
  </div>  
    <div class="work1">
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
    </div>
  </div>  
    <div class="work1">
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
    </div>
  </div>  
    <div class="work1">
    <div>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
    </div>
  </div>
  <div class="clearfix"></div>
  <p>要記得 clearfix</p>
</div>

css

.clearfix {
  clear: both;
}

.container3 {
  width: 600px;
  margin: 0 auto;
  position: relative;
}

.work1 {
  box-sizing: border-box;
  padding: 0 5px;
  width: 33.3%;
  height: 220px;
  float: left;
}

.work1 > div {
  background-color: pink;
}