CSS 基礎 Part1：Selector

CSS的三種寫法：

直接加 <style = "">

<html>
<head>
    <meta charset= "utf-8"/>
    <title>I am title</title>
</head>
<body>
      <div stytle="background: red;">
        hello
    </div>
</body>
</html>

背景變紅色，但不常用，因為難維護。

在 <head> 裡面加上 style 標籤

<html>
<head>
    <meta charset= "utf-8"/>
    <title>I am title</title>
    <style>
        div {
            background: blue;
        }
    </style>
</head>
<body>
    <div> 
        hello
    </div>
</body>
</html>

背景變藍色

最好的方法為新增到另外一個檔案去。 a. 新增 style.css 檔案 b. 貼上 div {background: green;} c. 加一列 <link rel= "stylesheet" href="./style.css"> 在 html 檔的 <head>裡。（因為存在同一個資料夾底下，可以用 ./）（用法很像 .a 一樣）
```
<html>
<head>
    <meta charset= "utf-8"/>
    <title>I am titled</title>
    <link rel="stylesheet" herf="./style.css">
   </head>
   <body>
       <div> 
        hello
       </div>
   </body>
</html>
```
背景變成綠色

前面兩種用法較不常用，因為不好維護。第三種用法最常用是因為兩個檔案獨立不干擾！

CSS selector

Universal Selectors

//在 style.css 資料夾內

* {
    color: blue; 
}

用星號可以選到所有的東西！

標籤 selectors

//在 style.css 檔案內

div{
    background: black;
}

body{
    background: green;
}

id 與 class Selector

這兩個最常用的。

#YYY
.XXX 在一個 <div>內，可以設多個 class

<div class="bg-yellow text-white">
    hello world!
</div>

.bg-yellow{
    background: yellow; 
}

.text-white{
    background: red;    
}

＊兩者之間差別： id 只能有一個，但是 class 可以有很多個！

同時符合條件

div.bg-yellow{  

}

又是 div 又是 bg-yellow

底下的元素

// 第一例題，檔案： index.html

<html>
    <head>
        <meta charset= "utf-8"/>
        <title>I am title</title>
        <link rel="stylesheet" herf="./style.css">
    </head>
    <body>
        <div class="Lv1">Lv1
            <div>Lv2
                <div>L3</div>
            </div>
        </div>
    </body>
</html>

.Lv1 選到全部的 div

<div class="Lv1">Lv1
<div>Lv2
    <div>L3</div>
</div>
</div>

.Lv1 > div 選到 Lv1 下一層的 div => 選到 Lv2
```
<div>Lv2
<div>L3</div>
</div>
```
.Lv1 > div > div 選到 Lv3
```
<div>L3</div>
```
.Lv1 div 中間空格＝選 Lv1 底下所有的 div

// 第二個例題

<body>
    <div class="Lv1">Lv1
        <div>Lv2
            <div class="bg-red">L3</div>
        </div>
        <div class="bg-red">
            hello
        </div>
    </div>
</body>

.Lv1 .bg-red 注意中間有空格，和選下面所有的 .bg-red 選到的是 level one 底下所有的 class="bg-red"
```
<div class="bg-red">L3</div>
<div class="bg-red">hello</div>
```
.Lv1 > .bg-red Lv1 底下那一層的 .bg-red 選到的是 hello <div class="bg-red">hello</div>

旁邊的元素：＋（旁邊）與～（右邊所有的）

如何定義為"旁邊"？雖然程式碼看起來是由上到下，但是真正呈現的時候，為由左到右～得同一個層級底下才行！

大綱：

<body>
    <div class="bg-red">div1</div>
    <div>div2</div>
    <div class="bg-red">div3</div>
    <div class="bg-red">div4</div>

    <div>123</div>
    <span>456</span>
    <span>789</span>
</body>

例一

.bg-red + .bg-red{
    background: red;
}

選 class="bg-red" 旁邊的東西 => div4背景為紅色。（因為要同時為 class="bg-red" 和旁邊有另一個叫做 ''bg-red" 才可以選，所以答案是 div4）

例二

div + span {
    background: blue;
}

選 div 旁邊的 span => 456背景為藍色（因為<span>789</span> 不是在<div>旁邊所以不會被選到）

例三

div ~ span {
    background: blue;
}

選到 456 and 789

例四

bg-red ~ .bg-red{
    background: red;
}

選到 div3 and div4

例五

bg-red + .bg-red{
    background: red;
}

選 class="bg-red" 旁邊的東西 (.bg-red) => div4 背景為紅色。

影片 5:06 處，講解 ～ 時常遇到的狀況：當要設定邊距時，每個元素中間是有距離的

Pseudo-classes：偽類，某個狀態底下的樣子

hover Pseudo-classe想成假的class :hover 滑鼠移上後變成的模樣

如何 debug hover有沒有設定好？ go to devtool => styles => force element state => 打勾 :hover 會維持著 hover 的狀態

nth-child

<body>
<div class="wrapper">
    <div>row1</div>
    <div>row2</div>
    <div>row3</div>
    <div>row4</div>
    <div>row5</div>
</div>   
</body>

.wrapper div {background: red;} 全選背景變紅色
.wrapper div:first-child{} 選到 row1
.wrapper div:last-child{} 選到 row5
.wrapper div:nth-child(3){} 選到 row3
.wrapper div:nth-child(even){} 選到偶數; odd則是奇數

nth-child()用法需要注意：他是先看排序為第幾個，才會再回頭看你所想要選的元素，例子如下：

<body>
    <div class="wrapper">
        <div class="bg-red">row1</div>
        <div>row2</div>
        <div class="bg-red">row3</div>
        <div>row4</div>
        <div>row5</div>
    </div>   
</body>

wrapper div:nth-child(2) {
    background: red;
}

沒選到東西，因為 nth-child(2) => 從第二個 div 回頭看，並沒有 bg-red 可選。

.wrapper div:nth-child(3n){} 選到三的倍數
.wrapper div:nth-child(2n+1){} 選到 row2 row4

pseudo-elements 偽元素

偽元素與 pseudo-classes 差別是，偽類的操作對象是 DOM tree 裡面已經有的元素。而委元素則是創建了一個 DOM tree 以外的元素。總體而言，主要差別在：有没有創立一個 DOM tree 以外的元素。

偽元素的屬性值：inline/ inline-block (? 網頁上看見這兩種，目前不確定。)

<body>
    <div class="price">
        1000
    </div>
</body>

.price::before {
    content: "$";
    color: yellow;
}

通常用於標價格時！

.price::after {
    content: "$";
    color: yellow;
}

變成 $ 標在後面

content 裡面可以放一個 attr()

attr() 設定屬性新名稱，它會自己去抓這個屬性的內容，然後放到 content 內。
自己設定的屬性，在前面加 data，與原生的屬性做個區別。

<body>
    <div class="price" data-id="moneybaby">
        1000
    </div>
</body>

.price::after{
    content: attr(data-id)
}

顯示出 1000 moneybaby

影片 5:30 講解 attr() + ::after 特出用法的好處 PS : content 是必備的，若要有東西出現，content 裡面一定要設東西！

可參考：偽元素一覽表 CSS 偽元素 ( before 與 after )

CSS Selector 的權重計算方式

<body>
    <div class="wrapper">
        <div class="list">
            <div id="pickme" class="item">
                pick me
            </div>
        </div>
    </div>
</body>

.wrapper {
    color: red;
}

會繼承規則

.item {
    color: blue;
}

變成藍色，把之前紅色蓋掉了

當兩個是一樣的東西，會以後面的為優先！
```
.item {
color: blue;
}
.item {
color: green;
}
```
變成綠色

#pickme {
    color: pink;
}

變粉色

大原則： id > class > 標籤越詳細的贏！

影片 4:24 講怎麼計算？

id      class/pseduo class/attribute   tag
0 ,                 0 ,                 0

按照順序比下來

// id=0, class=3 , tag=3
div.wrapper > div.list > div.item {
    color: yellow;
}

// id=1, class=0, tag=0
#pickme {
    color: pink;
}

=> 所以粉色蓋過黃色

但如果優先順序一樣的話，以後面的為準。

But，人生就是有個 BUT，上面的說法都抵不過 inline- style => 權重變成 1, 0 , 0, 0

<body>
<div class="wrapper">
    <div class="list">
        <div id="pickme" class="item" style="color: orange;">
            pick me
        </div>
    </div>
</div>
</body>

奧義：！important => 權重：1, 0, 1, 0, 0

div.wrapper > div.list > div.item {
color: yellow ！important;
=> 顏色就是黃色，無人能敵！

小結： !important > inline-style > id > class > tag 如果權重一樣，則程式碼在下面的優先。

CSS 基礎 Part2：各種裝飾

基本裝飾 background

// 檔案style.cc

background: red; background: rgb(244, 4,10); background: rgba(244,40,100,0.2) => a:是透明色，0~1，淺到深。

background: url("./bg.jpg") background: url(網址) no-repeat 圖片只會顯示一張，不重複。 background: url(網址) no-repeat X Y Ｘ可以寫成 cneter/ top/ buttom Ｙ可寫成 center/ right/ left

#box1 {
    height: 300px;
    weight: 2000px;
    background: url("/.bg.jpg") no-repeat center cneter; 
         //no repeat 照片不會重複，只會有一張
    //圖片放置位置：center: X 與 Ｙ 軸置中
    // 若要 Ｘ Ｙ 顯示上下 / 左右 ： buttom/top   right/left
    background-size: 100px //圖片大小：px , 50%
}

background-size用法：

100px 100px 壓縮圖片
50% 50% 壓縮圖片
content 不改變圖片比例，壓縮圖片到可以放入框框中。
cover 將圖片填滿背景，隨著視窗大小縮放。

邊框 border and outline

border 邊匡

＃box1 {
    border: 2px solid green;
    // border: 粗度 類型 顏色

    border-radius: 5px //弧度

}

border-radius: 50px or 50% 都是變圓形。

outline 外匡線

往元素外面長，加或不加，都不會影響原本元素的寬高。

小結： outline: 不影響元素，不會移動 border: 會影響元素，和移動位置

如何用 CSS 畫三角形？點 codepen 看得更清楚！

其實很多圖形都是用 border 畫的，實際開發不會用到 outline。

邊距：margin 外距與 padding 內距

margin 外距：離其他的東西有多遠，不會影響寬高。內容區域會被邊匡擠掉，因為邊匡是往裡面長得！（這邊要再檢查一下，可能筆記錯誤？？！！）

網頁上點“檢查”去看，移到 body 上面，有間距（瀏覽器預設）幫忙預留的空間。解決方法？如下：
html, body{
margin: 0px;
//這樣會與邊匡毫無距離
}
如果不想要整個盒子的寬度受 padding 和 border 影響，想要設定 width 和 height 時就是整個盒子包含 border 的大小，就多放這行程式碼box-sizing: border-box;。

CSS 文字相關屬性

color: 文字的顏色
fornt-family: 字體
font-size: 字體大小
font-weight: 字體粗細 normal bold
line-height: 行高 em (對應到字體的大小，X倍的行高)
letter-spacing: 字距 px
text-align: 水平對齊 left center right

如何讓文字垂直置中在盒子正中間？

一行字的話，可以將 line-hight g 設成跟 height 一樣

多行字的話，別用 line-height，用 padding 撐開

word-break： break-all 一個單字從中間截斷 break-word 一單字截斷
white-space nowrap : 字永遠在同一行 pre: 保留完整樣式，前有空格也會留著 pre-line: 保留換行

overflow 與 text-overflow

與超出寬度要怎麼處理有關

overflow
- hidden 超出後，把東西藏起來
- scroll 滾動（就算沒超出區域，也可滾動）
- auto 超出的話，有滾軸可以用
text-overflow: 只針對文字才能用
- ellipsis: ... 效果

想要有 abc...效果，必須先設定

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

transition 漸變效果

可以看範例，點這裡！

注意事項，初學者容易將 transition 放在 #box1:hover 裡面，這樣會造成滑鼠移入時有漸變效過，但移出時沒有！

transform 變形轉換

transform:
- scale(數字) 放大
- rotate(180deg) 旋轉
- translate(Ｘ,Y) 位移(10右,-10上) 按照原本位置做偏移

如何利用 transform 垂直又水平置中？ top: 50%; left: 50%; transform: translate(-50%, -50%);

CSS 基礎 Part3：盒模型（box model）

box model 盒模型

在 HTML 內，每個元素可以看成是一個小盒子，然後你可以用 CSS 來調整他們。基本組合由內而外有：內容(寬高)＋內距＋邊匡＋外距。

padding and border 是往外面長得！

如何固定寬度？ box-sizing: border-box 好處是不用自己算寬高

box-sizing 種類：

content-box 預設
border-box 自己調整內容的寬高

display的形式：

block: （為預設值）代表有： <div>、<h1>、 <p>

調什麼都可以特性為佔滿一整行
inline 代表有：<span>、<a>

寬高會根據內容顯示。

調 margin 只會有左右的邊距會改變，上下不變（通常在一整段文字會被 span 括起來）調 padding，左右會變，上下不會影響元素的位置，但還是會稱開元素的高度（只有在有背景或是有border的情況下）

inline-block 等於 inline 和 block 的優點結合起來代表有：<button>、 <input>、 <select>

對外像 inline 可並排對內像 block 可以調整各種屬性
none 不顯示

inline-block 的小陷阱

如果並排卻出現小間距，可以解決的方法有：

刪去換行(</div><div>)讓他們黏在一起。
註解掉

keyword： inline-block 間隙

CSS 基礎 Part4：定位（position）

position：基本：上下左右下距增加會往上跑左距增加會往右跑

範例練習，請點這裡！還有這裡！

static: 網頁預設定位方式。按照瀏覽器的預設自動排列，無法調整偏移（不受上下左右值的影響）。
relative 相對定位。相對於原本參考點做定位，可以調整上下左右讓其偏移，但不會影響到其他元素所在的位置，只會改變自己的。
absolute 絕對定位針對某個參考點（往上找第一個不是stastic的元素）進行定位。如果前面無設定，會以 body 為主要參考點！

注意 5:25 分處講遞補上來的概念！因為絕對定位後，會脫離正常的排版流程走，有點像是被抽出去，所以下面一個元素會遞補上來被抽走的位置。

fixed: 固定定位簡單版 - 相對於瀏覽器的窗口做定位困難版 - 相對於viewport做定位捲動時，視窗固定會出現在同個位置。

z-index 決定圖層順序

決定哪個元素的順序。順序越大就在越前面～

<style>
    .box:nth-child(2) {
        background: red;
        top: 40px;
        z-index: 10;
    }
</style>

position: sticky 較新的屬性

他當離 top: 20px 的時候，就會固定在那像是導覽列會固定在上方，不隨文章移動，而看不見。

參考可看這裡！

<style>
    .box:nth-child(2) {
        background: red;
        top: 40px;
        position: sticky;  //當盒子滾到離top 40px 的時候，就會黏住不動
        z-index: 10;
    }
</style>

Flexbox

除了 float、grid 的另一種排版方式，可以分為 容器 和 項目。

容器屬性

一定要先宣告的 display: flex

flex-direction

row : 橫排，預設
column ：直排
row-reverse ：倒著橫排
column-reverse：倒著直排

flex-wrap:

當內容物超過容器大小時，是否需要換行？

nowrap : 預設，不換行
wrap ：第一行在上面
wrap-reverse：第一行在下面

flex-flow

組合技＝ flex-direction + flex-wrap 預設是 row nowrap

justify-content

主軸線（平行）對齊方式

center：置中（橫排的中間＝X 軸）
flex-start ：靠左
flex-end：靠右
space-between：物件貼齊左右兩邊均勻分散
space-around：物件不貼齊左右，且兩邊留空白均勻分散

align-items

交叉軸線對齊

Determines how the items as a whole are aligned within the container

center：置中（直排的中間＝Y 軸）

flex-start：靠上

flex-end：靠下

stretch：佔滿畫面

baseline：以基準線為準

align-content

（一大堆物件對齊方式）

其實是 align-items 的多行版本。若只有一行的話， align-content 則不起作用。 determines the space between lines when there is only one line, align-content has no effect！

flex-start：靠上
flex-end：靠下
center
stretch：佔滿
space-around：與上下邊線有空格
space-between：貼齊上下邊線

注意事項

如果使用反向排列：row-reverse or column-reverse justify-content 的 flex-start 會變成「靠右對齊」 justify-content 的 flex-end 會變成「靠左對齊」

項目屬性

flex

內部又再細分為：

flex-grow 正數為主，越大值所佔的版面越大。
flex-shrink 正數為主，越大數字所佔的版面越小。
flex-bais

寫法：.item { flex: flex-basis | flex-grow | flex-shrink; } 其預設值為： 0 1 auto

order

可重新定義元件的排列順序，依照數值大小排列。預設值為 0 可以設定為負數～正數（小到大）

align-self

可以單獨調整單項項目。但是主軸的無法調整，只有交叉軸的可以。

flex-start：靠上
flex-end：靠下
center：置中
baseline：以基準線為主
stretch：佔滿
auto ：預設

實作

參考聖杯佈局

遊戲

Flex Frogs Flex Zombies

補充資料

Flexbox Playground Flex 布局教程：语法篇 Flex 布局教程：實例篇 Flexbox 布局的最简单表单圖解：CSS Flex 屬性一點也不難 CSS Flexbox Layout 學習心得筆記 - Flex item 解釋清楚 Yakim shu - week6 note

zuppachu / Joanne-s-Learning-Blog

[FE101] - CSS #8