[FE101] CSS part 2


Posted by yymarlerr on 2021-05-22

裝飾

background

  • 直接用英文的顏色表示:
#first {
    background: red
}
  • 用 RGB 表示的話有兩種:rgb() * rgba()a 為透明度的意思,值介於 0 ~ 1 中間
#first {
    background: rgb(244, 4, 10)
}
  • 接圖片,當圖片小於寬度或高度時,會自動重複,可使用 no-repeat,只顯示一張圖片
  • center center 代表圖片要放 x 和 y 軸的中間,也可用 topbottomleftright 來改變圖片位置
  • background-size 可調整背景的大小
    • 可以在 x 和 y 裡放 px%
    • contain,將圖片按照比例放在背景裡
    • cover,圖片會隨著縮放調整大小,永遠會填滿背景
#first {
    background: url(./glacier.JPG) no re-peat center center;
    width: 2000px
}

border & outline 邊框

outline

  • 不會影響原有元素的寬度跟高度,外框往元素外面長
  • 實際開發很少用到 outline

border

  • 會影響原有元素,寬度跟高度的值,會是原有數值再加上邊框的值
#first {
    background: url(./glacier.JPG) center center no-repeat;
    background-size: cover;
    width: 1000px;
    height: 1000px;
    border: 20px blue solid;
}
  • 去 dev tool 可以查看 border-style 有哪些
  • border-radius 可以調整邊框弧度,沒有加 border 時也可以使用,設 50px 或 50% 時會變成圓形
  • border-topborder-bottomborder-rightborder-bottom 可以分別調成不同顏色
  • 可以畫三角形:
    #first {
      background: transparent;
      width: 0px;
      height: 0px;
      border-top: 1000px blue solid;
      border-bottom: 1000px transparent solid;
      border-right: 1000px transparent solid;
      border-left: 1000px transparent solid;
    }
    

padding & margin

margin

  • 整個元素離外面的距離,不會影嚮到原本元素的寬與高
  • 也可以用指定上下左右:margin-topmargin-bottommargin-rightmargin-left

padding

  • 內容離邊邊的距離
  • 也可指定上下左右

文字相關

color

  • 文字顏色

font-size

  • 文字大小
  • 瀏覽器最小只能調成 12px

font-weight

  • 文字粗細
  • 介於 300 ~ 700 間

font-family

  • 字體要用什麼
  • 如果電腦沒有該字體,就會換成預設值

letter-spacing

  • 調整字句

line-height

  • 調整行距
  • 通常會用 1.5em,代表行高為 1.5 倍的 font size,會隨字體的大小去調整,所以比例不變

text-align

  • 水平對齊
  • text-align: center 代表水平對齊中間
  • 在只有一行字的情況下,可利用 line-height 來達成垂直置中
  • 或使用 padding 將文字放在垂直中間,文字多行還是可使用

word-break

  • 決定如何將連在一起的字分開
  • word-break: break-all 可能會讓同個單字被切成開
  • word-break: break-word 按照字來切

white-space

  • white-space: nowrap 不要把字包起來,字會在同一行

overflow

  • 什麼都可以用
  • overflow: hidden 超出的會被隱藏
  • auto 超出時,會自動使用捲軸(超出寬度,就產生水平捲軸)
  • scroll 超出時,會產生水平和垂直捲軸

text-overflow

  • 針對文字使用
  • ellipsis 超出的文字會自動顯示「....」,使用這個屬性的前提是 overflow: hiddenwhite-space: nowrap

transition

  • 在屬性有變的時候會有漸變的效果
  • 可能會有效能問題,因為可能會影響到旁邊元素的排列
  • transition: <對哪一部分> <幾秒>
  • cursor: pointer 改變游標的樣式
#first {
    background: pink;
    width: 100px;
    height: 100px;
    transition: all 1s ease-in;
}

#first:hover {
    background: beige;
    color: navy;
    cursor: pointer
}

transform

  • 變形、轉換
  • scale(2) 變大兩倍
  • rotate(180degree) 旋轉 180 度
  • translateX(50px) 往右移 50 px
  • translate(50 px, -20px) 往右移 50 px,往上移 20 px,如果是 % 的話,代表位移元素本身寬度或高度的幾倍
    • 動畫裡面移動位置用這個居多
    • 從目前所在的位置移動

Box model 盒模型

  • 打開 chrome dev tool,會看到右下角有一個像盒子的東西,那就是 box model。每一個 HTML 的元素,都可以想像成一個盒子,盒子由寬、高、padding、border、margin 所組成
    • 沒加 box-sizing
      ![] (https://static.coderbridge.com/img/yymarlerr/fdddbdaf331c488488d350478e7ac77e.png)
    • 可以使用 box-sizing 來決定要用什麼樣子的模式來顯示寬高
    • content-box:寬高為內容的寬高,為預設值
    • border-box:會將 border 和 padding 的寬高考慮進來,所以內容的寬高會改變
    • padding、margin、border 的撰寫語法:
      • 四個值:上、右、下、左
      • 三個值:上、左右、下
      • 兩個值:上下、左右
      • 一個值:上下左右

(參考資料)[https://www.oxxostudio.tw/articles/202008/css-box-model.html]

Display

block

  • HTML 中的 divh1p 的預設為 block
  • display: block 的特色是自己會佔滿一整行

inline

  • HTML 中的 spana 的預設為 inline
  • 寬高會根據內容顯示,故調寬高沒有用
  • 左右邊距(margin、padding)可以調;上下邊距無法調整
  • padding 不會影響元素的位置,但會影響背景

inline-block

  • HTML 中的 buttoninputselect 的預設為 inline-block
  • 對外,像 inline 可以併排;對內,像 block 可調各種屬性
  • 當 margin 是 0 的時候,如果 </div> <div> 有空格,元素之間會有間距,要刪掉空格,才不會有間距

flex

  • 根據屬性作用的區域,可分為
    • flex container:影響全部的 flex item
      • flex-direction:預設值 row
      • justify-content:預設值 flex-start,延 main axis 排列
      • align-items:預設值 flex-start,延 cross axis 排列
      • flex-wrap
    • flex item
      • flex-shrink
      • flex-grow
      • order

參考資料:
卡斯伯

可以在 CSS 改變標籤的 display

Position 定位

static

  • 網頁預設定位方式、不跳脫排版流(static)、不以特殊位置來排列

relative

  • 不跳脫排版流(static),並根據原本的位置,去作位移

absolute

  • 絕對定位
  • 跳脫排版流,並根據某個參考點(元素)去作定位,參考點為往上找不是 static 的元素
  • 用絕對定位後,該元素會被從正常排版原則裡面抽掉,所以下一個元素會遞補到該元素原本的位置

fixed

  • 固定定位,跳脫排版流,並相對於 viewport (視窗)作定位
  • 會定位在固定位置,不管怎麼滾動視窗,內容都會在一樣的位置

W3schools


z-index

  • 決定圖層順序

sticky

  • 指定內容滑到哪時,定格在那邊
  • 範例:
#first {
    background: pink;
    width: 100px;
    height: 100px;
    border: 20px yellowgreen solid;
    padding: 10px;
    transition: all 1s ease-in;
    box-sizing: border-box;
    top: 0px;
    position: sticky;
}

#first:hover {
    background: beige;
    color: navy;
    cursor: pointer;
}

#second {
    background: yellow;
    width: 100px;
    height: 100px;
}

#third {
    background: springgreen;
    width: 100px;
    height: 100px;
}









Related Posts

Day07 Life Cycle

Day07 Life Cycle

Golang-Advance- GO routine

Golang-Advance- GO routine

將陣列裡面物件的一樣屬性整理一起

將陣列裡面物件的一樣屬性整理一起


Comments