marp	theme	class	paginate	backgroundColor	backgroundImage
true	gaia	lead	true		url("img/hero-background.svg")

基本CSS

西苑高中網頁設計營隊

講師：魏均翰、洪子晉

css簡介

主要功能:美觀網站

範例

h1{
    color: red;
}

寫在哪裡?

在HTML建立<style>裡面(通常放在<head>裡面)
創一個css檔案，並連結到HTML(link)

<link rel="stylesheet" type="text/css" href="style.css">

一個CSS包含

selector:選擇器 (對象)
declaration:宣告
property:屬性 (要改的東西)
value:屬性值

選取器

.選擇class
#選擇id
所有後代:*

文字

color:顏色 font-size:字體大小 letter-spacing:字和字之間的距離 line-height:行高 font-weight:字體粗細 text-decoration: 文字裝飾 font-style:字型 opacity:透明度 text-align:文字位置 font-family:字體

`color`: #FFF;
`font-size`: 10px;
`letter-spacing`: 2;
`line-height`: 20px;
`font-weight`: 500;
`text-decoration`: none;
`font-style`: italic;
`opacity`: 0.5;
`text-align`: left;
`font-family`:微軟正黑體;

文字粗度 font-weight

關鍵字

font-weight: normal; /* 正常 */
font-weight: bold; /* 粗 */
font-weight: lighter; /* 細一點 */
font-weight: bolder; /* 粗一點 */

絕對的數值

font-weight: 100;
font-weight: 400; /* 正常 */
font-weight: 700; /* 粗體 */
font-weight: 900;

text-decoration

常用於消除超連結的藍色底線

text-decoration: underline; /* 底線 */
text-decoration: overline red; /* 劃過的線 */
text-decoration: none; /* 不要 */
text-decoration-color: #ff00ff; /* 線顏色 */

背景圖片

background-image: url(./image/cloud.png); /* 背景圖片 */
background-repeat: no-repeat; /* 背景重複 */
background-size: cover; /* 高填滿 */ 
background-size: contain; /* 寬填滿 */

background-position: top left;
background-position: 20% 40%;   /*從左上開始算*/

顏色表示法

RGB/RGBA
HEX
HSL

RGB/RGBA

R : Red
G : Green
B : Blue
A : Alpha(透明度)

R,G,B參數範圍為0~~255，表示在此顏色的不透明度為何。介於0~~1之間

範例:半透明紫色
rgba(160,32,240,0.5)

HEX

其實他和RGB有關係

(十六進位（hexadecimal）)

0 代表最低（如同 RGB 中的 0）
8 代表中間
9 之後是 A
F 代表最高（如同 RGB 中的 255）

黑色:#000000
白色:#ffffff

HSL

H : hue 色相 (0是紅色120是綠色240是藍色)
S : saturation 彩度、飽和度(以白色缺乏程度表示，100%表示沒有白色)
L : lightness 明度

單位

px

em

rem

vw/vh

%

px :相對顯示器的解析度，為絕對單位(pixel)

em : 相對父元素的m寬度(預設16px)

rem : 相對根元素的m寬度(預設16px)

vw/vh : viewport（視口）寬/長度

%

1. width跟height的%基準是父層

2. line-height以本身文字行高為基準

box

漸層
Padding
Grandient

box是什麼?

html的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整。

box-sizing

box-sizing 是設定物件尺寸的計算方式。

box-sizing:content-box (content area)
box-sizing:border-box （content area+padding+border）

所以在 block 元素中只要設定 box-sizing:border-box; 就不用另外再計算padding、border 的寬度。
假設 width:300px, padding 就算加了 20px, border 加了4px，寬度依舊是300px。

Padding

padding 的用途是設定物件邊框(border) 內與資料之間的留白空間，常見的翻譯是稱之為「內距」，讓你的資料不致於貼著邊框線。

注意! Padding 預設會增加物件的可見尺寸!
若你對該物件設定了 padding 之後，padding 的空間則是會添加到 width 之外，所以物件的尺寸就變成了「width + padding 」

/*四個值，個別指定*/
padding: 上  右  下   左;

/*三個值，左右採用同一個值，上下則分開指定*/
padding: 上   [右左]    下;

/*二個值，【上下】採用同一值，【左右】採用同一值*/
padding: [上下]   [右左];

/*一個值，【上下左右】都使用相同的值*/
padding: [上右下左];

漸層

1.漸層需要顏色跟角度 2. 可分為線性漸層跟放射漸層 3. 可以指定每個顏色的比例 4. 可以決定漸層位置跟大小

線性漸層linear-gradient

background:linear-gradient(方向, 顏色1 位置, 顏色2 位置);

角度
- 如果沒有設定角度，預設從上往下進行漸層。
位置
- 0% 表示起始邊界，100% 表示結束邊界 ( 邊界為填色的區外邊界 )。
- 如果沒有指定參數，則會自動等比例分配。
- 如果沒有指定第一個參數，預設 0%。
- 如果沒有指定最後一個參數，預設 100%。

顏色位置重疊
- 如果兩種顏色位置重疊，結果將會直接呈現兩種顏色交界，若前後邊界沒有設定顏色，則會以最靠近該邊界的顏色補滿。
```
background:linear-gradient(45deg, red 50%, black 50%); 
```

放射漸層Radial Gradient

background: radial-gradient( 形狀 範圍  at 中心位置, 顏色 色彩位置, 顏色 色彩位置,...);

圓形

 background:radial-gradient(circle at center,顏色1,顏色2);

橢圓形

background:radial-gradient(ellipse at center,顏色1,顏色2);

背景background

background-color: 背景顏色

background-color:FF0000
background-color:red; /* 背景為紅色 */

float語法

float:浮動方向;

none

float:none;

right

float:right;

left

float:left;

參考資料

https://csscoke.com/2015/01/01/rgb-hsl-hex/
https://dev.to/aniket_chauhan/generate-a-css-selector-path-of-a-dom-element-4aim
https://tool.oschina.net/commons?type=3
https://5xruby.tw/posts/understand-hex-color-codes
https://www.oxxostudio.tw/articles/201809/css-font-size.html
https://ithelp.ithome.com.tw/articles/10252624
https://ithelp.ithome.com.tw/articles/10252827
https://www.1keydata.com/css-tutorial/tw/background.php#attachment

Files

5.基本CSS.md

Latest commit

History