# Front End -- CSS ###### tags: `web develope` 在 CSS 問世前(~1996)，網頁開發者偏好使用 HTML 標籤的屬性來指派樣式，例如： ```htmlembedded= <p><font size="+3" color="red"><b>一段文字</b></font></p> ``` 這樣的作為衍生不少問題，例如讓網頁內容包覆過多的標籤，讓程式碼變得不好閱讀——對人與搜尋引擎都是。其中最重要的，是讓網站維護變得非常困難。例如：我們的網頁裡有十個 \<h4> 大小的副標題。\</h4> ```htmlembedded= <h4><font size="+3" color="blue"><b>副標題一</b></font></h4> …<h4><font size="+3" color="blue"><b>副標題二</b></font></h4> … … …<h4><font size="+3" color="blue"><b>副標題十</b></font></h4> ``` 如果有天覺得副標題用藍色 (blue) 不夠搶眼，要改成橘色，那我們就的把那十個副標題一個一個找出來修改。這種反覆的修改工作，嚴重影響到工作效率。 另外，在大型專案裡，一般有專屬的設計師 (designer) 去設計網站的呈現，而工程師會專注在內容與結構。因此 **「內容 與 呈現」的分工可以讓設計師與工程師的分工跟清楚**，不用擔心干擾到對方。 CSS, Cascading Style Sheets，譯為「階層式樣式表」，專注在外貌的設定上，讓 HTML 專注於文件的結構，因此讓網頁原始碼回歸成乾淨俐落的文件。 想像一下 HTML、CSS 和瀏覽器之間的對話: ```HTML 會說：「這是一個標題。」而 CSS 會和瀏覽器補充：「這個標題很大，請放在正中間。」``` ![](https://i.imgur.com/4UQO1Yj.png) ## CSS 語法規則 ![](https://i.imgur.com/p2abbZV.png) - 選擇器 (selector) 定義你的樣式對誰有作用，它對應的可能是 HTML 標籤名稱或者是 class 和 id 屬性，我們在後面會再介紹選擇器。 - { }：大括號包圍了一個宣告區域，任何寫在這個區域裡的設定，會對文件裡所有的 \<h1> 標籤起作用。\</h1> - 屬性與值：在圖例中，我們宣告選擇器，也就是 \<h1> 的「文字顏色」(color) 屬性的值是 #ff6600。請注意 CSS 是用冒號 ( : ) 而非等號 (=) 來設定。\</h1> - 每條宣告用分號 ( ; ) 隔開 ### 套用方式 那這段 CSS 宣告要放在哪裡呢？ - 內嵌於 style 屬性 ```htmlembedded= <p style="color: red; font-size: 10pt;">一段文字</p> ``` 這種宣告方式只會影響到這一個標籤，而不是所有的 \<p>。這是一個很簡便的作法，但 CSS 宣告混合在 HTML 結構中，無法進行管理。你可能會在寫 blog 時偶爾不得不這麼做(因為你無法在別人家的平台上開新檔案)。\</p> ![](https://i.imgur.com/Tq4siYb.png) - 外部檔案 (建議方法) ![](https://i.imgur.com/1HIl25C.png) 讓我們來認識一下引入外部檔案的 HTML 標籤： - \<link> 是一種「後設元素」(meta element)只能放在標頭裡，他可以載入外部檔案。所以瀏覽器讀取到這一行時，就會自動載入 CSS 文件的全部內容。 - rel='stylesheet' 告訴文件載入的資源是樣式表，所以瀏覽器就知道要用讀 CSS 的方式去處理載入的內容。 - href='style.css' href 屬性和 \<a> 標籤時的用法一樣，描述路徑，讓瀏覽器找得到檔案。\</a> ### 認識 box 及其排列方式 每個網頁元素都是一個「盒子」，HTML 宣告出來的網頁元素都是一個矩形的「盒子」。如下圖我們試著用色塊和虛線把「盒子」描繪出來： ![](https://i.imgur.com/2kUZocg.png) 以下和你說明這張圖的標示： - 做為主要內容的圖示、標題、文字簡介，以淺藍底色的「盒子」標示。 ![](https://i.imgur.com/hVvWvER.png) - 三個淺藍色盒子，又被放進一個由黃色虛線標示的「盒子」裡。 ![](https://i.imgur.com/BN4JkTm.png) - 三個黃色虛線的容器，又被放到一個綠色虛線的「盒子」裡。 ![](https://i.imgur.com/IObZuvV.png) 網頁的組成，其實就是一個又一個「盒子」的堆疊，只要你把內容用同一個「盒子」封裝起來，你就可以利用 CSS 去選擇一整個容器，一口氣改變整個盒子的樣式、定位或排列方式，因而呈現千萬變化的版面配置。 到目前為止，你用到的 HTML 都會有預設樣式，例如\<h1>已經帶有字體大小的設定、\<a>標籤已經帶有字體顏色與底線，但如果我不想要改變任何樣式，我只是想把網頁內容打造成一個 box，要怎麼做呢？\</a>\</h1> 你需要一個「容器」(container)，這個容器能打包內容，方便你加上 CSS 設定，這就是\<div>和\<span>的功能。\</span>\</div> ![](https://i.imgur.com/cv4MWmn.png) 用\<div>來宣告出一塊區域，並且使用 id 或 class 來為每個\<div>命名 ```htmlembedded= <div id="about">I am Myra Chen</div> <div id="my-work">This is my works</div> <div id="contact-me">Contact me</div> ``` 有些時候，只是想局部改變樣式可以是用\<span>，例如： ```htmlembedded= <p>我想要對「<span>被 span 標籤包圍的文字</span>」追加樣式</p> ``` 這種情況很常在修改 blog 文章時用到（因為去找 Blog 平台的 CSS 文件很麻煩），你有可能會使用內嵌 style 屬性的方式，直接把樣式寫在/<span>標籤裡 ### inline v.s. block **block 盒子特性** - Block 盒子佔滿一整個橫列，也就是說 block 盒子的寬度和瀏覽器視窗一樣寬。 - Block 盒子後面的元素，將另起新的一行。 - Block 盒子的高度預設和內容一樣，如果你把視窗拉小，由於 \<h1> 的內容被擠到下一行，盒子的高度也隨之調整。\</h1> - Block 盒子的高度和寬度都可以用 CSS 控制。 **Inline 盒子特性** - Inline 盒子的尺寸取決於內容，不可隨意改變。 - Inline 盒子緊鄰前一個物件，不會另起新行。 ![](https://i.imgur.com/epbPbzG.png) 常見的 block 元素：\<h1>, \<p>, \<div>\</div>\</p>\</h1> 常見的 inline 元素：\<span>, \<em>, \<strong>, \<img>, \<a>\</a>\</strong>\</em>\</span> ![](https://i.imgur.com/vbHQi6w.png) ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset='UTF-8'/> <title>認識盒子模型</title> <style> h1, p, div { background-color: #eee; } em, a { background-color: pink; } </style> </head> <body> <h1>這是 h1 元素，佔滿一整個橫列，所以是 block 排列方式</h1> <div>這是 div 元素，也佔滿一整個橫列。</div> <p>這是段落 (p) 元素，也是 block。但在段落裡的 <em>inline 元素</em>，則順應 block 元素的排列，不會影響到網頁整體的排版。</p> <a href="#">網頁連結（a 元素）也是 inline。</a> <p>在 inline 後面的 block 元素還是會另起一行。</p> </body> </html> ``` ![](https://uploads-ssl.webflow.com/5d3a7aed4e11720246d46f49/5ec7bcbb5f7d315913460759_block_inline.gif) ### Source & Material https://tw.alphacamp.co/blog/css-guide-box-model