四、[前端] 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

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

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

Previous三、[前端] HTML Next五、[前端] Javascript

Last updated 4 years ago