CSS 專家密技筆記

• 自我筆記用
• CSS 專家密技
• CSS Coke講解

CSS 取得 data-* 內容 (實用)

  .test { 
    &:after {
      content: attr(data-tip) "可以塞多個字串";
    }
  }

加入 body 作 reset

  body {
    line-height: 1.5;
    // font-family: ;
  }

Input 設置 focus 樣式

CSS 專家密技第一集 40:40

• 可以作到 focus 換背景色
• 按下 放大鏡按鈕 / Label 才顯示 Input

  input {
    width: 0;
    transition: 1s;
    &:focus {
      width: 100px;
      background-color: #eee;
    }
  }

a 連結

• 有順序差異 必須注意! (CSS覆蓋)

  a {
    &:link{}
    &:visited{}
    &:focus{}
    &:hover{}
    &:active{}
  }

flex & auto 玩法

• 原理是: auto 會將剩於空間拿來分配，誰有auto即拿一份

  // .parent > .child
  .parent {
    displaY:flex;
    .child {
      margin: auto; // 水平垂直居中
      margin: 0 auto; // 水平居中
      // 原本就靠左，Top 佔一份將該 child 推至底
      margin-top: auto; // 子移至左下角
    }
  }

  // .parent > .childA + .childB
  .parent {
    displaY:flex;
    .childB {
      // 會將 childB 推至最右邊
      margin-left: auto;
    }
  }

負數的 nth-child()

• 用來選擇 1 至 n 個元素
• csscoke

  li { display: none; }
  /* 選擇第 1 至第 3 個元素並顯示出來 */
  // n=0 得3, n=1 得2, n=2 得1
  li:nth-child(-n+3) {
    display: block;
  }

表格Cell 等寬

  .table { table-layout: fixed; } 

為破圖定義樣式

• 純 CSS 範例如下
• 亦可用 onerror 寫在 HTML

  <!-- onerror 解法 -->
  <img src="https://fakeimg.pl/100x100/" onerror="this.onerror=null;this.src='default.jpg'" alt="">

  img {
    display: block;
    height: auto;
    position: relative;
    width: 100%;
    &:before {
      content: "抱歉找無此圖片";
      display: block;
      margin-bottom: 10px;
    }
    // 告知圖片路徑而已
    &:after {
      // "字串" attr(src) "字串"
      content: "(url: " attr(src) ")";
      display: block;
      font-size: 12px;
    }
  }

用 rem 來調整全域字體大小 & pxToRem()

• 在 HTML 設定基礎字體大小
• 用 em 來調整區域字體大小
• 或用 pxToRem 一律採用 rem

  $base-font-size: 16px;
  html {
    font-size: $base-font-size;
  }

  .title {
    font-size: pxToRem(25px);
  }

  // 統一轉換成 rem
  @function pxToRem($px) {
    @if ($px == 0) { @return 0; }
    @else {
      @return $px / $base-font-size * 1rem;
    }
  }

用 rem 來調整全域字體大小 & pxToRem()

• 在 HTML 設定基礎字體大小
• 用 em 來調整區域字體大小
• 或用 pxToRem 一律採用 rem

  $base-font-size: 16px;
  html {
    font-size: $base-font-size;
  }

  .title {
    font-size: pxToRem(25px);
  }

  // 統一轉換成 rem
  @function pxToRem($px) {
    @if ($px == 0) { @return 0; }
    @else {
      @return $px / $base-font-size * 1rem;
    }
  }

使用 :root 設定彈性的字體大小

• vmin 抓視窗較小的那側
• 根據 ViewPort 改變字體大小

  :root { font-size: calc(1vw + 1vh + 0.5vmin); }