CSS 基礎 part1

CSS selector

html 部分，用 link 標籤來套用另外的 css 檔案

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" /> 
    <title>CSS 基礎</title>
    <link rel="stylesheet" href="./style.css" <!--另外開一個css檔案來執行，最常用。rel就是relationship-->
  </head>
  <body>
    <div id="div1">
      hello
    </div>
    <div class="bg-yellow text-purple">
      hello2
    </div>
    <div class="bg-yellow bg-real-yellow">
      hello3
    </div>
  </body>
</html>

Css部分

基本格式：selector 就是要執行 css 的地方
```
selector {
attribute: value;
}
```

選擇 html 標籤(較不常用，因為範圍太大)

div {
background: blue;
}
body {
background: brown;
}

==universal selector==：所有的 span 都會套用到這個格式
```css=
{
color: red;
}
```

==id==: 用 # 後面接 html 設定的 id
==class==: 用 . 後面接 html 設定的 class，與 id 差別就是在多個不同地方可以共用同個 class，以上兩個方式最常用。
==同時符合條件：用 . 接在一起==

#div1 {
  background: red;
}

.bg-yellow {
  background: yellow;
}

.text-pruple {
  color: purple;
}

div.bg-yellow.bg-real-yellow {
  background: yellow;
}

其中在 class 的命名可以用空白隔開代表同一類別的不同元素，或是同一個元素有兩個不同的 class 可以選取。
```
<div class="button btn-order">
  我要點餐
</div>
<div class="button btn-search">
  查詢訂單
</div>
```
此時 css 可以將兩元素分開選取。
```css=
/這邊同時處理兩個 button 元素/
.button {
padding: 60px 80px;
font-size: 36px;
color: #3e613d;
display: inline-block;
border-radius: 10px;
cursor: pointer;
}

/這邊可以選取 button 後面兩個不同的命名來分別處理/
.btn-order {
background: #a8e8e1
}

.btn-search {
background: #f9f9b5;
}

---
### ==選取階層底下的元素==

```html=
<!--html 部分-->
<body>
  <div class="lv1">lv1
    <div >lv2
      <div class="bg-yellow">lv3</div>
    </div>
    <div class="bg-yellow">
      hello2
    </div>
  </div>
</body>

.lv1 .bg-yellow: 只用==空白隔開==表示 lv1 這層底下==所有的層== bg-yellow 都變黃色。所以這邊輸出是 lv3 與 hello2 都變黃色
.lv1 > .bg-yellow: 用==大於隔開==表示 lv1 這層的 ==下一層== 的 bg-yellow 都變黃色。所以這邊輸出是只有 lv1 下一層的 hello2 變黃色，lv3 在 lv1 的下下層所以不會變色。
```css=
.lv1 .bg-yellow {
background: yellow;
}

.lv1 > .bg-yellow {
background: yellow;
}

---
### ==選取同一層旁邊的元素==

```html=
<body>
  <span class="bg-red">span1</span>
  <span>span2</span>
  <span class="bg-red">span3</span>
  <span class="bg-red">span4</span>
</body>

.bg-red + .bg-red: 用==加號隔開==表示只選取 .bg-red ==旁邊的== .bg-red 元素，也就是兩者一定要相鄰才有作用，所以輸出是 span4 變紅色。
.bg-red ~ .bg-red: 用==波浪號隔開==表示選取 .bg-red 旁邊==所有的== .bg-red 元素，所以輸出是 span3 span4 都變紅色。
以上常用於複數元素都要執行相同指令但第一個元素不用的時候，例如四排的 div 各放入四排內容，只有第 2.3.4 排的內容要加 margin-top。

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

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

==Pseudo-classes，以 hover 為例==

Pseudo: 假的、偽裝
hover: 滑鼠移到目標上這個動作。
此時滑鼠移到元素上背景就會變紅色。
==注意冒號不能空格==

span:hover {
  background: red;
}

==nth-child: 直接選第幾個元素==

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

用 nth-child() 就可以選取想要的地方，
輸出分別是 row3，基數 row，4 的倍數 row 會變紅色
==注意：需同時符合冒號兩邊的條件才會選取到==

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

==偽元素 Pseudo element: before 與 after==

偽元素一覽表

可以不需設定 html 標籤，直接從 css 來新增顯示內容。

<div class="wrap" data-id="yoyoyo">
  hello
</div>

before 就是放在元素前面，after 就是放後面。
透過 attr() 可以直接抓出 html 標籤裡面屬性的值顯示出來，所以第三段程式碼會輸出 hello yoyoyo(html 中 data-id 的元素)。
```
.wrap::before {
content: "123";
}
.wrap::after {
content: "123";
}
.wrap::after {
content: attr(data-id);
}
```