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