---
# System prepended metadata

title: 5xRuby網頁前端設計 CSS 課堂筆記
tags: [5xRuby, css]

---


5xRuby網頁前端設計 CSS 課堂筆記
===
###### tags: `5xRuby` `css`
(上課時間：20191201)

:::info
:bulb: **課後線上學習資源：** 
- [學習路徑懶人包 - CSS 選取器學習地圖](https://ithelp.ithome.com.tw/articles/10228196?sc=hot)
  - 新手必學的 CSS 選取器
  - 入門進階者必學的 CSS 選取器(~子代選取器)
:::


CSS 基本觀念
---
CSS (Cascading Style Sheets) 階層式樣式表(主要功能用來串接、層疊)： 

- 用來結構化文件(HTML or XML)添加樣式(字型、間距和顏色等)的電腦語言(非程式語言)。 
- 用來描述物件的外觀。 

※ 主要功能：
- 串接([CSS 組合式宣告](https://ithelp.ithome.com.tw/articles/10218497))：tag+id+class Ex: `p.events#text{}` 明確性高 
*tag請放在最前面，class和id可隨意放置 

- 層疊([CSS 層疊式宣告](https://ithelp.ithome.com.tw/articles/10218978))：
Ex: `div strong{}` → 在`<div>`裡面的`<strong>`更改樣式
Ex: `div.info strong{}` → 在`<div>`裡面有含info class的`<strong>`更改樣式

CSS語法規則
---
-  第一種寫法：inline style `<p style="(樣式內容 css)"> `
☹ 缺點：一個頁面有N個段落就得貼N次 → 不方便維護及修改 

-  第二種寫法：`選取器{css屬性:值;} `
→ 寫的位置：html內的`<title>`後`<head>`內以`<style>`管理 
☹ 缺點：每一個頁面都要寫

範例：
    - 對p做樣式的設定 → `p{color:red;}`
    - 對class做樣式的設定 → 要在選取器前加一個. 
Ex: html：`<p class="p">` css：`.p{color:red;} `
※ [class]：把網頁的資訊做分類 
    - 對id做樣式的設定 → 要在選取器前加一個# 
Ex: html：`<p id="p">` css：`#p{color:red;} `
※ [id]：id值只會有一個不會重複 
-  第三種寫法： 👍獨立css檔案👍：相同的物件(共用)寫在同一個CSS中 
→ 在html的`<head>`內寫一個link以加入CSS樣式 
`<link rel="stylesheet" href="(CSS檔名：style.css)">`


 CSS Reset v.s CSS normalize
---
>[color=#E8457F] **補充資料**：[小艾-前端路上那些重要與不重要的小事系列 第21篇](https://ithelp.ithome.com.tw/articles/10196528)
→ CSS Reset 的需求主要落在 IE 各版本之間的調整，後來 Firefox、safari、Chrome 陸續出現，網頁設計師必須要針對每個瀏覽器去做調整，因此 CSS Reset 的需求漸漸增加。

>[color=#E8457F][CSS 通用選取器](https://ithelp.ithome.com.tw/articles/10219650)
>→ 使用「`*`」，只要是網頁中的物件就都能通通選到。
※ [CSS Tool-Reset CSS ─ Eric Meyer 的版本](https://meyerweb.com/eric/tools/css/reset/)
```CSS=
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	line-height: 1;
}
```

※ CSS Reset = CSS歸零 → 將所有預設的樣式強制清除
(網頁瀏覽器會有自己內建的CSS樣式，用來呈現網頁的外觀，以避免沒有自訂樣式而無法分辨網頁的差異性。)
☹ 缺點：把全部的預設值都拿掉時，必須全部重新做設定，會造成後台編輯時的麻煩。 

※ CSS normalize：不需要reset的地方就保留，有瀏覽器差異的地方再做處理。 (建議適合已熟悉CSS Reset的人再使用)

CSS 命名規範
---
▸ 大駝峰：所有英文字的字首都大寫。EX: LastName
▸ 小駝峰：第一個英文字字首小寫其餘字首大寫。EX: lastName
▸ 骨式： 在英文字之間加入減肥號。EX: new-group
▸ 蛇式： 在英文字之間加入下底線。EX: new_group