# CSS
*cascading style sheets* 階層式樣式表

_

#### CSS selector 選擇器

1.針對全網站 universal selectors

*{
 color : red ;
}

2.針對標籤

div{
 background : black ;
}

3.使用 id 和 class

id 前使用 # 
class 前使用 .

#### 如何選擇底下的元素：

1. 使用 > 選擇下一層單層的元素
2. 兩個.class 寫在一起(中間有空個格) 就是下一層的全部元素

#### 如何選擇旁邊的元素：

1. .class1 + .class2 （選只有在 class1 旁邊的 class2 ）
2. .class1 ~ .class2 （選在 class1 旁邊所有的 class2 ）

>最常使用在並排排列的物件，中間有需要間距但最旁邊的不需要的情況

_

### Pseudo-classes 假的class

參考連結 https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
虛擬類別 - CSS | MDN

**hover 滑鼠在物件之上時**

span:hover {
	margin-left: 20px;
	backgraound: red;
}

**nth-child 選到第幾個元素**

.class :first-child {
	background: red;
}

.class :last-child {
	background: red;
}

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

選奇數的

class :nth-child(odd) {
	background: red;
} 

選偶數的

class :nth-child(even) {
	background: red;
} 

選3的倍數

class :nth-child(3n) {
	background: red;
} 

_

#### Pseudo-element 偽元素，通常用:: 來表示

偽元素一覽表：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

**before 與 after，通常都會有 content**

.price ::before {
	content: “$”;
	color: red;
}

用 content 抓出 css 的值
.price ::before {
	content: arrt(class);
}

_

#### CSS Selector 的權重

1. 後面的會蓋掉前面的
2. id > class > 標籤，指定的越精確的越明確
3. 以上三個都贏不過 inline style (寫在 html 標籤內的 style )
4. 但最強的王者是 — !important (通常不太會使用到)

_

#### CSS 各種裝飾

**background 背景**

- 可以用指定的文字顏色
- hex #色碼
- rgb(x,x,x) , 含透明度的 rgba (x,x,x,x)
- 插入圖片 url(位置)

圖片的話可以另外寫是否要 repet，以及上下左右要對齊哪裡
也可以調整圖片尺寸，使用 background-size
可以指定 px ，也可以使用百分比 %，或使用 contain 高或寬填滿，或是 cover 填滿 (填滿並也會縮放)

**border 框**

border-style
border-radius 導角度
outline 外框線 (比較少用到)

>可以用border 的特性畫圓形跟三角形喔

**margin 與 padding**

有些瀏覽器會預設一點點 margin ，可以在 body 前面加 margin:0

_

#### 文字相關 CSS

- color
- font-size
- font-weight
- font-family
- letter-spacing 字距
- line-height 行高
- text-align 對齊

**空格相關**

word-break: break-word 依照單字段行
white-space: no wrap

**有東西超出去時如何處理**

**overflow** ：hidden 藏進去範圍內
**overflow** ：scroll h藏進去並有內捲軸

**text-overflow**: ellipsis 針對文字，超出去的省略變成...
(跟 overflow:hidden 和 white-space: no wrap 要同時使用才有效)

_

**漸變相關 transition**

範例：幽靈按鈕

#box1 {
  width: 200px;
  height: 50px;
  border-radius: 30px
  border: 1px solid orange
  text-align: center
  transition: all(第一個屬性要對什麼作用) 1s(第二個屬性秒數)
  color: black
}

#box1:hover {
   background: orange;
  color: white;
  cursor: pointer (滑鼠游標);
}

>transition 有很多可以調整的，可以開 DevTools 檢查來調整動畫時間曲線，再複製下來

_

**變形相關 transform**

transform : scale (2) ; 變大兩倍，類似在css 呼叫一個 function

>有很多條件可以調整，可以開 DevTools 看
>例如 rotate(180deg) 轉180度，teanslateX(50px) 移動位置(不會影響到其他物件)

transform 有一個很特殊的妙用，置中：

position: absolute
top: 50% 父層的50%
left: 50% 父層的50%

以上這樣設的話，會以物件左上角的點置中在中心點，畫面看起來是偏移的
所以要加入使用 transform

`transform: translate(-50%,-50%)`

移動物件的50%，左邊跟上面的一半過去

_

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

1. 物件本身的寬高尺寸 + padding + border + margin = 最終尺寸
2. 可以設定 box-sizing: border-box，直接將設定的寬高就是=最終尺寸，電腦自動調整盒模型內容物的尺寸

**display 的三種形式**

1. **block** 佔滿一整行
2. **inline** ( span 和 a 就是預設 inline ) 調寬高和上下邊距沒用， 只有左右邊距有用，尺寸=內容
3. **inline-block** (對外如 inline 可並排，但如 block 調整各種屬性)

_

#### CSS 基礎：定位（position）

1. **static** 預設
2. **relative** 相對定位，用上下左右來推位置，投影，但會留在原本的位置佔位，不會推到其他物件的位置
3. **absolute** 絕對定位; 需要先有一個參考點，沒有設的話會一直往上找，最終是以瀏覽器為定位; 如果要設參考點，要把參考物件的 position 設成 relative。不暫位。
4. **fixed** 固定定位 (相對於 viewport 做定位)
5. **sticky** 黏住，捲動的時候到要求的定位點時會變成 fixed。有時候會做在導覽功能，是比較新的屬性，大部分新的瀏覽器有支援

_

**z軸，圖層順序 ： z-index**