iT邦幫忙

0

CSS 專家密技筆記

css

CSS 專家密技筆記

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); }

尚未有邦友留言

立即登入留言