---
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==
---
## 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
* 外距 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>
```
:::
Sign in with Wallet
Connect another wallet