Day24-HTML(二十二)：設定CSS樣式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 24

0

自我挑戰組

網頁前端設計系列第 24 篇

Day24-HTML(二十二)：設定CSS樣式

14th鐵人賽

2022-09-24 23:02:52

454 瀏覽

分享至

今天我們來介紹CSS樣式表。CSS的屬性非常多樣，我們先以常用的與實用的為主，如有其他特殊需求再查詢相關資訊即可。
那麼就直接開始吧～
(๑•̀ㅂ•́)و✧

CSS(Cascading Style Sheets) 階層式樣式表

是一種用來為結構化文件(如HTML)添加外觀樣式(顏色、大小、間距、字型、布局等)的語言，並且不能單獨使用。在CSS出現之前，顯示樣式只能被包含在HTML裡，以至於變得很亂、難以管理。CSS可以將內容結構的資訊與樣式的資訊分開來，以簡化HTML檔案。

在HTML裡的<head></head>標籤裡放<style></style>標籤，可以直接設定樣式。
如果只有少許的樣式需要設定時，會直接寫在HTML裡方便而已，通常有多種樣式時，都會改成寫在CSS檔案裡了。

1. `<link href="" rel="stylesheet">` 載入CSS樣式表

寫在CSS檔案裡的樣式表，需要在HTML的head裡用link標籤指定CSS檔案的來源，以把HTML與CSS連接在一起。

例如：

-> 在專案資料夾裡新增一個style.css的檔案

-> 然後在HTML的head裡加上<link rel="stylesheet" href="style.css" />標籤，將兩個檔案連接在一起，就可以開始設計啦～

2. 針對想要設定樣式的標籤種類用`{}`包起來

例如：
(可以直接選擇顏色名稱、或用RGB數值、也可以用HEX數值來選擇)

-> 結果：

3. id用「`#`」、class用「`.`」、多個標籤要相同樣式用「`,`」

例如：

-> 結果：
id只能有一個
class可以有很多個

4. `font-size` 文字大小

例如：
結果：

5. `text-align` 文字對齊

例如：
結果：

6. `background-color` 背景顏色

例如：
結果：

7. `padding` 邊距

例如：
結果：

Day23-HTML(二十一)：補充其他不錯的元件

Day25-開始設計一個自己的網站-選單欄

系列文

網頁前端設計共 30 篇

目錄

RSS系列文訂閱系列文

4 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

125 組

團體組數

1 組

累計文章數

160 篇

最後報名日

9/15

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙