# [FE101] 前端基礎：HTML 與 CSS
###### tags: `Lidemy`,`week6`,`FE101`,`HTML`,`CSS`
[課程連結](https://lidemy.com/courses/enrolled/390445)

[TOC]

## HTML 基礎
### 顯示圖片就靠它：img

<img title="滑鼠 hover 到圖片上所顯示的文字" alt="圖片不能顯示時的替代文字" src="連結" />

<br>

### 保留完整格式：pre

* **br**：line break
* **pre**：preformatted text

<pre>
    function hello(){
        console.log('hi');
    }
</pre>

<pre>
function hello(){
console.log('hi');
}
</pre>

<br>

### 語意化的 UI 標籤：main、nav、footer

> 參考資料：
> * MDN Semantics： https://developer.mozilla.org/en-US/docs/Glossary/Semantics
> * New Semantic Elements in HTML5：https://www.w3schools.com/html/html5_semantic_elements.asp

<br>

### 表單相關標籤：form、input、textarea

> 參考資料：
> * 更多 input 種類：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<br>

### SEO 與相關標籤：meta tag

* **meta**：<meta name="">：keyword、description
* **Open Graph Protocol**：<meta property="og:">
* **JSON-ld**：JSON for Linking Data
* **robots.txt**
* **sitemap.xml**

<br>

### Escape：該怎麼顯示標籤？
* `&amp;` 用來代替 `&`
* `&lt;` 用來代替 `<`
* `&gt;` 用來代替 `>`

<div></div>

// 若想在畫面上顯示上面的程式碼，可改寫成下方：
    &lt;div&gt;&lt;/div&gt;

<br>
<br>

## CSS 基礎 Part1：Selector

### Pseudo-classes（偽樣式），以 hover 為例

* Dev-tool 遇到 Pseudo-classes 時，如何 debug？

<br>


<br>

> 參考資料
> * [虛擬類別- CSS | MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes)

<br>

### nth-child

* `:first-child`：選取子階層**第 1 個**元素
* `:last-child`：選取子階層**最後 1 個**元素
* `:nth-child(n)`：選取子階層**第 n 個**元素
* `:nth-child(odd)`：選取子階層**奇數**元素
* `:nth-child(even)`：選取子階層**偶數**元素
* `:nth-child(3n)`：選取子階層 **3 的倍數**元素

<br>

### Pseudo-element（偽元素），before 與 after

* `::before`：加在元素之前
例如：在所有 `.price` 樣式的元素之前加 `$`

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

* `::after`：加在元素之後

* **補充：**`attr()` 抓出該 html 元素的屬性標籤
在 html 元素上加標籤，再用 `attr()` 抓，更簡潔

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

<br>

> 參考資料
> * 偽元素一覽表：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

<br>

### CSS Selector 的權重

#### **原則：** !important **＞** inline style **＞** id **＞** class 或 attribute **＞** 標籤

權重分數若相等，程式碼在下方的會蓋掉在上方的。

<br>

> 參考資料
> * [強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)](http://muki.tw/tech/css-specificity-document/)
> * [你對 CSS 權重真的足夠了解嗎？](https://juejin.im/post/5afa98bf51882542c832e5ec)

<br>

## CSS 基礎 Part2：各種裝飾

### background

* no-repeat 不重複
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

* center center 上下左右置中
background-position-x: center;
background-position-y: center;

* background-size: contain; 依比例把圖片縮到能放進元素內的大小

* background-size: cover; 把圖片放大到能填滿元素的大小，會隨元素放大縮小改變比例

<br>

### border、outline 與 border-radius
* **border：** 由 content 往外加，會撐大和移動原本元素的寬高位置

* **outline：** 不影響原本元素的寬高位置

* **border-radius：** 圓角

* **利用 border-radius: 50% 繪出圓形**

* **利用 border 繪出三角形**

  box{
    background: transparent;
    width: 0px;
    height: 0px;
    
    border-top: 100px solid transparent;
    border-bottom: 100px solid blue;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
  }

<br>

### line-height 行高
* **讓文字垂直置中對齊法（1）：** 把行高調整成與元素同高
* **讓文字垂直置中對齊法（2）：** padding 上下撐開元素高度

<br>

### word-break 與 white-space
* **word-break: break-all;** 依元素寬度切斷字句
* **word-break: break-word;** 依元素寬度及完整單字換行
* **white-space: nowrap;** 字句放同一行，不依元素寬度換行
*

<br>

### overflow 與 text-overflow
* **overflow: hidden;** 超出元素寬度的部分隱藏
* **overflow: auto;** 超出元素寬度的部分有卷軸可滾動
* **overflow: scroll;** 顯示卷軸可滾動
* **text-overflow: ellipsis;** 字句以 ... 結尾，超出元素寬度的部分隱藏
要使用此功能必須另外同時符合兩個條件 ---> white-space: nowrap; 且 overflow: hidden;

<br>

### transition 漸變效果

`transition: all 1s ease-in;` 此元素身上的所有屬性以 1秒 的速度、ease-in 的動畫模式漸變

* 此屬性要設在主要元素身上，而非 :hover 上面
* 要注意進行漸變時，是否同時動到周圍其他元素，可能會有效能問題

<br>

### transform 的妙用

* **transform: scale( )**
scale(2) 變大兩倍

* **transform: rotate( )**
rotate(180deg) 轉 180 度

* **transform: translateX( )**
和調整 top、left 的差別在於 transform 不會影響到其他元素
translateX(50px) 往右移動 50px
translate(50px, -20px) 往右移動 50px，往上移 20px

**應用：讓物件垂直水平置中**
先設 top、left，再用 transform: translate(-50%, -50%); 做偏移

  box{
    position: absolute;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

* **transform: rotate( )**
rotate(180deg) 轉 180 度

<br>

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

### 什麼是盒模型？

> https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

<br>

* box-sizing: **content-box;**
--> 把 padding 和 border 往外加
寬高是 content 的寬高

<br>

* box-sizing: **border-box;**
--> 把 padding 和 border 包進來
寬高是的 box 寬高

<br>


<br>

### display 的三種形式：block、inline 與 inline-block

* **block**：區塊元素
- 通常自身佔滿一整行
- div、h1、p......都屬於 display: block;

* **inline**：行內元素
- 無法調寬高和上下 margin 邊距。
（margin 只能調左右兩邊。padding 雖可調上下，但不會動到元素位置）
- a、span......都屬於 display: inline;

* **inline-block**
- 可併排（像 inline）；可調各種屬性（像 block）。
- button、input、select......都屬於 display: inline-block;

<br>

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

### static
position: static; 預設值

<br>

### relative 相對定位
position: relative;
相對原本的定位點，加上下左右偏移的距離。不會改變其他元素，只會改變自身。

<br>

### absolute 絕對定位
position: absolute
依據某個參考點（往父層找不是 static 的元素）做定位，若找不到，就以 body 來定位。

<br>

### fixed 固定定位
position: fixed
相對於瀏覽器（viewport）做定位。

<br>

### z-index 決定圖層順序
數字越大排越前面。

<br>

### sticky
position: sticky

當元素到達（滑鼠滾動）某個位置時，定位就會固定住。從 static 變成 fixed 的狀態。

<br>

## 其他

### BEM 命名法

BEM 是一種 CSS class 命名的設計模式，由 Yandex 團隊提出來的設計模式。

BEM 的名稱源於其三個組成部分的英文字首，以區塊（Block）、元素（Element）和修飾子（Modifier）來命名，優點是以元件觀念進行開發，具有重用性。

<br>

> **規則：** Element 使用雙底線做分隔，Modifier 使用雙 dash 做分隔。
> * Block 名稱需能清晰的表達出，其用途、功能或意義，具有唯一性。
> * Element 名稱需能簡單的描述出，其結構、佈局或意義，並且在語義上與 Block 相關聯。
> * Modifier 是定義 Block 和 Element 的外觀、狀態或類型。

<br>

<ul class="menu">
  <li class="menu__item">首頁</li>
  <li class="menu__item menu__item--active">關於我</li>
  <li class="menu__item">分類</li>
</ul>

<br>

> 參考資料：
> * [BEM | Summer。桑莫。夏天](https://cythilya.github.io/2018/05/22/bem/)
> * [BEM，CSS 設計模式 | 竹白記事本](https://chupainotebook.blogspot.com/2019/05/bemcss.html)

<br>
<br>

### CSS 重置與正規化
瀏覽器會有自己的使用者代理樣式表（User Agent Stylesheet）。
設計網頁之前，可先重置瀏覽器預設樣式。
* reset.css
* normalize.css

<br>

### 補充教學網站

* [學習 CSS 版面配置](https://zh-tw.learnlayout.com/)