---
# System prepended metadata

title: CSS3 for Stat Class02
tags: [CSS3]

---

---
title: CSS3 for Stat Class02
tags: CSS3

---

> 【目次】
> [TOC]
> 
> Reference Website：
> 1. [網站技術發展史](http://jaceju.net/2012-11-21-webdev-history/)
> 2. [CSS 語法教學](https://www.1keydata.com/css-tutorial/tw/)
> 3. [CSS Diner：CSS selectors practice](http://flukeout.github.io/)

---
# **11/20 Class02 CSS3**
--- CSS is a language that describes the style of an HTML document.
--- "CSS External stylesheets" can control the layout of multiple web pages all at once.

## What is CSS?
* Cascading Style Sheets (層疊樣式表)
* CSS 基本架構 = ==selector + property + value==

![](https://i.imgur.com/h4wkIsB.png)

---

## Where to write CSS？ 3 Ways
### ==行內樣式 (Inline style)==
* 作為一種 attribute 加在tag裡面，最方便但不好改。
* 只能給 "當前的tag" 使用該樣式。
```htmlmixed=
<p style="color: blue; font-family: Microsoft JhengHei;"> Blue Text </p>
```

### ==內部樣式表 (Internal style sheet)==
* 網頁內嵌式
* 用`<style>` 寫進 `<head>` 裡。
* 比較容易改，但只能給 "當前的網頁" 使用相同樣式。
```htmlmixed=
<style>
p{
    color: blue;
    
    /* 微軟正黑體 */
    font-family: Microsoft JhengHei; 
}
</style>
```
        
### ==外部樣式表(External style sheet)==
* 外部設定式
* 可以讓多個html網頁，重複使用此樣式。
* 將 css 作為單獨的文件 ( 存成`.css` 檔案 )，使用以下語法引入到 html 裡。
    * 用`<link>` 寫進 `<head>` 裡。
        * rel：relationship，引入文件與此文件之關係
        * type：引入文件之類型
        * href：引入文件之名稱
```htmlmixed=
# .html 檔案
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```
```css=
# .css 檔案
p{
    color: blue;
    font-family: Microsoft JhengHei; 
}
```
### 優先順序
* Inline style > Internal style sheet > External style sheet
* Inline style 權限最大，會把別人蓋掉
---

## **常用 CSS Selector**
### ==CSS tag/element選擇器==
```css=
p{
    color:blue;
}
```

### ==CSS Class選擇器== (類別)
* 一個HTML文件中可以被使用多次。(不可用於JS)
* Case Sensitive
* 寫在HTML標籤中，代表該標籤的類別，同樣類別名稱視為同一類別。
* class為特定類別 ---> ==.==

```htmlmixed=
<p class="fruit">蘋果</p>
```
```css=
.fruit{
    color:red;
}
```

### ==CSS Id選擇器== (識別)
* 一個HTML文件中只能被使用一次。(可用於JS -GetElementByID函數)
* Case Sensitive
* 寫在HTML標籤中，代表該標籤的識別，不能有重複的id名稱
* id是唯一的 ---> ==#==

```htmlmixed=
<img id="my_selfie" src="pictures/chia_pic.png">
```
```css=
#my_selfie{
    width:300px;
    height:200px;
}
```
```htmlmixed=
##如何用 javascript 取 id

<script language="javascript">
    function myItem() {
        x = document.getElementById("item_name").innerHTML;
        alert(x);

        console.log(document.getElementById( "item_name" ));

        //document.getElementById("item_name").innerHTML = "我改變了~~  Hello World";
    }
</script>
    
<h1 title="ACER 筆電" id="item_name">ACER SF514-52T-85PC蜂蜜金</h1>
<button onclick="myItem()">告訴我商品名</button>
```
### 優先順序
* !important (盡量別用) > Id > Class > html tag (Elements)
* Id 權限最大，會把別人蓋掉

### 總結論： 
* ==!important (盡量別用) > Inline style > Internal style sheet (Id > Class > html tag (Elements)) > External style sheet (Id > Class > html tag (Elements))==
* ```<head></head>```內的```<style>```、```<link>```擺放順序會影響權限：
    * 若```<style>```先於```<link>```，則 External style sheet 權限大於 Internal style sheet (不要學！)
    * 若```<link>```先於```<style>```，則 Internal style sheet 權限大於 External style sheet (大家都這樣擺放)

---

## 常用CSS Proterty & Value
* 背景
    * [顏色](https://www.toodoo.com/db/color.html)
        `background-color: <#色碼> or <顏色> or <rgb()>;`
    * [圖片](https://www.injerry.com/blog-view.php?PID=5&sn=131)
        `background-image: url('url or file path');`
```css=
p{
    background-color: red;
    background-color: #ff0000;
    background-color: rgb(255, 0, 0);
}

body{
    background-image: url('./myBG.png'); /*當前*/
    background-image: url("./img/bg.jpg"); /*當前img資料夾下*/
    background-image: url("../img/bg.jpg"); /*當前的上一層之img資料夾下*/
}
```
* 文字
    * 顏色
    `color: <#色碼> or <顏色> or <rgb()>;`
    * [字型](https://fonts.google.com/)
        `font-family: <第一順位字體>, <第二順位字體>, ...;`
    * 大小：[實際展示 EM 與 REM 的差異](https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/)、[認識網頁文字單位－px、%、em、rem](https://www.webdesigns.com.tw/css-emrem.asp)、[網頁設計該用哪種字級單位：px、em或rem？](http://jas9.blogspot.com/2011/09/pxemrem.html)
        `font-size: <number>;`
    * 粗細
        lighter、normal(400)、bold、bolder
        `font-weight: <number(100 ~ 900)>`
    * 位置
        left、right、center
        `text-align: <位置>;`
```css=
p{
    color: rgb(255, 0, 0);
    font-family: Microsoft JhengHei, serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
```
* 圖片大小
    * width、height
```css=
img{
    width: 100px;
    height: 50px;
}
```
* box model
![](https://i.imgur.com/7w5QsPD.png)
    * 外距 margin: 上px 右px 下px 左px;　
        * margin: 上下px 左右px;　
        * margin: 上px 左右px 下px;　
        * margin: 四個邊同樣値px;
        * margin-top, margin-right, margin-left, margin-bottom
    * 邊框 border: 寬度px 樣式(solid, double, dotted, dashed) 顏色;
        * border-top, border-right, border-left, border-bottom
    * 內距 padding: 上px 右px 下px 左px;
        * 寫法種類 同margin
```css=
div{
    margin: 10px 20px 30px 40px;
    padding: 0px 15px 0px 15px;
    border: 1px solid red;
}
```
---
:::warning
> ==div 區塊水平置中== [color=red]
```htmlmixed=
#test {
  //border: 1px solid red;
  width: 600px;
  margin: 0px auto; //上下，左右。
}

<div id="test">
    <img src="https://i.ytimg.com/vi/fN0Gmd9FK3c/maxresdefault.jpg" style="max-width: 100%;">
</div>
```
> ==display 屬性的設定值== [color=red]
* block	區塊
    * 以區塊方式呈現(會換行)，除非設定 position 或 float。
    * float: left; + display: block; => inline-block
* inline-block
    * 以行內區塊方式呈現(不換行)。
<br>
```htmlmixed=
#test1{
    border: dashed black;
    display: block;
}
#test2{
    border: dashed red;
    display: inline-block;
}

<div id="test1">
    <img src="https://i.ytimg.com/vi/fN0Gmd9FK3c/maxresdefault.jpg" style="width: 600px;">
</div>
<div id="test2">
    <img src="https://i.ytimg.com/vi/fN0Gmd9FK3c/maxresdefault.jpg" style="width: 600px;">
</div>
```
:::