CSS-1: 樣式基礎設定、盒子模型與class選擇器全解析
CSS 是用於設計 HTML 文件樣式的語言。它描述了 HTML 元素應如何在螢幕上顯示。其負責 「樣式呈現」 的部分：字體、顏色、排版、動態效果等。
CSS 的三種引入方式:
1.行內樣式 (Inline Styles)
直接在元素的 style 屬性中編寫：
<h1 style="color: blue; font-size: 24px;">Document</h1>
- 會破壞結構與樣式分離的原則，維護性極差。
color: blue;意思為字體顏色變更為藍色。font-size: 24px;意思為將字體調整大小為24px。
2.內部樣式 (Internal Stylesheet):
在 <head> 中使用 <style>：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: "Microsoft JhengHei", sans-serif;
line-height: 1.5;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>CSS course</h1>
<p>Write code to learn.</p>
</body>
</html>
- 樣式分散在各個網頁檔案，維護較麻煩。
font-family：變更字形，可列出多個備用字型，用逗號分隔，最後常寫sans-serif或serif。line-height：行高。行高決定行與行之間的距離，通常用於提高文字的可讀性。1.5表示 1.5 倍字體高度。
3.外部連結 (External Stylesheet)
在 <head> 中使用：
<link rel="stylesheet" href="styles.css">
- 樣式集中，可重複使用，維護方便。
一般使用外部連結的方式，HTML負責網頁的架構，而 CSS 負責網頁的樣式。
基本設定
背景和顏色
好，現在考慮以下網頁:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
</head>
<body>
<h1>CSS course</h1>
<p>Write code to learn.</p>
</body>
</html>
呈現效果:
此時我們在 style.css 中添加一些代碼，使 <h1> 標題的背景顏色改變
h1 {
background-color: yellow;
}
- 元素選擇器針對所有
<h1>進行樣式設定。
呈現效果:
好，此時我想改變背景的顏色，可以透過在 CSS 中對 <body>套用設定，以下示範:
body {
background-color: gray;
}
呈現效果:
另外，我也想讓 <p>段落的背景顏色也變更為黃色，我們可以這樣設定:
h1, p {
background-color: yellow;
}
呈現效果:
此時，我們想讓字體的顏色變為藍色，可以這樣設定:
此時，若你繼續新增<p>標籤來增加段落文字，段落文字都會繼承設定，文字顏色無一例外都會變成藍色，背景則為黃色:
<body>
<h1>CSS course</h1>
<p>Write code to learn.</p>
<p>I like this course</p>
</body>
呈現效果:
若現在我不想要字體全為藍色，只考慮對<h1>標題文字段落設定為藍色，我們將程式碼改為:
h1, p {
background-color: yellow;
}
body {
background-color: gray;
color: blue;
}
/* 這是註解 */
/* 默認字體顏色為黑色，而這邊改變<p>顏色為藍色 */
p {
color: black;
}
呈現效果:
好，目前我們設定顏色的方式都是直接通過輸入顏色的單字來設定，其實我們可以使用其他種方法來設定(不限於字體顏色):
- 16進制表示
p {
color: #000000; /* 將原先的 black 改成現在這種表示方式 */
}
#ffffff為白色。#ff0000為紅色。#00ff00為綠色。#0000ff為藍色。- 可以自行調整，改變顏色的表現程度。
- 如果十六進位的數字兩兩相同，例如
#ff2200，其等校於#f20。
- RGB值，通過調整紅色 (R)、綠色 (G)、藍色 (B) 的強度來生成不同的顏色。
p {
color: rgb(0,0,0); /* 將原先的 #000000 改成現在這種表示方式 */
}
rgb(255, 0, 0)為純紅色
- RGBA (Red, Green, Blue, Alpha)，與 RGB 相似，但多了一個透明度 (Alpha) 參數，數值範圍是 0 到 1。
p {
color: rgba(0,0,0,0.5); /* 將原先的 rgb(0,0,0) 改成現在這種表示方式 */
}
呈現效果:
- HSL (Hue, Saturation, Lightness)，用色相、飽和度和亮度來設定顏色。
p {
color: hsl(0, 100%, 50%); /* 將原先的 rgba(0,0,0,0.5) 改成現在這種表示方式 */
}
- 色相 (Hue)：0° 到 360° 的圓環，0° 是紅色，120° 是綠色，240° 是藍色。
- 飽和度 (Saturation)：0% 到 100%，0% 是灰色，100% 是全彩。
- 亮度 (Lightness)：0% 是黑色，50% 是正常亮度，100% 是白色。
呈現效果:
文字樣式
開始前請將style.css的程式碼全數刪除。
現在我們使用font-size屬性更改字體的大小。
p {
font-size: 24px;
}
- 段落和清單的預設字體大小均為16像素。
呈現效果:
好，我們接著使用font-weight 控制字體的粗細程度:
p {
font-size: 24px;
font-weight: 600;
}
font-weight: bold;同樣也能達成加粗的效果。
呈現效果:
好，再進一步，使用font-style屬性使文字以斜體顯示。
p {
font-size: 24px;
font-weight: 600;
font-style: italic;
}
好，再來還想改變字體的形式，使用font-family :
p {
font-size: 24px;
font-weight: 600;
font-style: italic;
font-family: "DM Serif Text";
}
好，你會發現沒有任何改變，這是因為您要顯示的字體必須已安裝在您的電腦上才能正常運作。由於 CSS 是在使用者的瀏覽器中呈現的，因此您不能假設使用者已安裝該字體。
所以要透過使用外部字體服務來解決。你可以在底下找到你喜歡的字形並嵌入。
假設我要使用一種 Roboto 字形，我們需要在網頁的 <head> 中加入 Google Fonts 提供的 <link> 標籤。以本例子來說：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap" rel="stylesheet">
p {
font-size: 24px;
font-weight: 600;
font-style: italic;
font-family: "DM Serif Text", serif;
}
如此就可以變換字形了。
文字樣式
開始前請將style.css的程式碼全數刪除。
從文字裝飾開始，用於為文字添加劃線、刪除線等效果。
範例:
p {
text-decoration: line-through;
}
- 讀者可以自行更換測試。
- 值:
none：無裝飾（預設值）。underline：添加下劃線。overline：添加上劃線。line-through：添加刪除線（橫穿文字）。
呈現效果:
而若想改變裝飾線的顏色，我們額外添加以下程式碼:
p {
text-decoration: line-through;
text-decoration-color: red;
}
呈現效果:
若想要進一步設置裝飾線的樣式，請添加以下程式碼:
p {
text-decoration: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
- 讀者可以自行更換測試。
- 值
solid：實線（預設）。double：雙線。dotted：點線。dashed：虛線。wavy：波浪線。
呈現效果:
好，我們接著講文字對齊，使用text-align 屬性設置文字的水平對齊方式。
範例:
h1, p {
text-align: center;
}
- 讀者可以自行更換測試。
- 值:
left：左對齊（預設值）。right：右對齊。center：置中對齊。justify：兩端對齊（文字會調整間距，使每行的左右對齊），非常美觀。
呈現效果:
好，接著講文字轉換，使用text-transform 改變文字的大小寫格式。
範例:
h1, p {
text-transform: capitalize;
}
- 讀者可以自行更換測試。
- 值:
none：保持原文字格式（預設值）。uppercase：將文字轉換為全大寫。lowercase：將文字轉換為全小寫。capitalize：將每個單詞的首字母大寫。
呈現效果:
好，接著談間距問題:
行高決定行與行之間的距離，使用line-height提高文字的可讀性。先前提過了。我們現在談談字母和單字間的間距。
字母間距用於調整每個字母之間的距離。使用letter-spacing。
範例:
h1 {
letter-spacing: 2px;
}
呈現效果:
而字間距用於調整單詞之間的距離。使用word-spacing。
範例:
p {
word-spacing: -2px;
}
呈現效果:
背景屬性
先前，我們使用background-color設置了背景的顏色，但若是我想要將背景設置為圖像呢。需要使用background-image
在此之前，我想先介紹兩個 HTML 標籤，以方便我們之後的測試：
<div>：是區塊元素 (block-level element)，沒有特定的語意，通常用來當作容器或排版的區塊。- 如果需要一個沒有特定意義的區塊容器來排版（例如要做「畫框」的佈局），可以用
<div>包起來，再搭配 CSS 做排版。 <span>：是行內元素 (inline element)，也沒有特定語意，常用於小範圍文字的樣式調整、標註或排版。- 若要在文字中突顯或套用某種 CSS，但不適合用
<strong>或<em>等語義標籤，就可以用<span>。例如價格前方要加上符號、或是文字上色，可以在<p>中用<span>包住價格文字。 - 好的做法是盡可能使用語意化標籤，只有在無法找到適用的語意標籤時，再使用
<div>或<span>來加以包裹與控制樣式。
現在考慮以下 HTML 程式碼:
<body>
<div>
<h1>CSS course</h1>
<p>Write code to learn.</p>
<p>I like this course</p>
</div>
</body>
我們要將容器背景改為以下圖片
CSS 內容如下:
div {
width: 80vw;
height: 80vh;
background-image: url(images/image.png);
}
- 其中
80vw是指視窗寬度的80%，用處是當視窗因為不同裝置呈現不同大小時，也能保持相對的比例。 height的設置概念與width相同。
呈現效果:
現在，背景為圖像顯示，但它是重複的，因為當背景圖像小於容器的寬度或高度時，就會發生這種情況。接下來讓我們修復它。
我們使用background-repeat: no-repeat 來改善情況。
div {
width: 80vw;
height: 80vh;
background-image: url(images/image.png);
background-repeat: no-repeat
}
呈現效果:
現在，背景不再重複。不過，現在圖片是小於容器的
可以透過添加背景顏色確認:
div {
width: 80vw;
height: 80vh;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-color: cyan;
}
呈現效果:
在這種情況下，您需要拉伸背景以確保其覆蓋整個螢幕。使用background-size屬性來解決此問題。
div {
width: 80vw;
height: 80vh;
background-image: url(images/image.png);
background-size: cover;
}
- 不再需要
background-repeat: no-repeat; cover的特性是讓背景圖整個「不變形」、「寬高等比例」、「在必要時局部裁切」的鋪滿整個容器空間。
呈現效果:
接下來我們討論背景位置background-position 。
以下是幾個呈現例子:
div {
width: 80vw;
height: 80vh;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: right center;
background-color: cyan;
}
- 讀者可以自行測試其他種效果
background-position: left bottom;圖像位於左下**。**background-position: center;圖像位於中心。
呈現效果:
區塊與行內元素
基本設定的最後一節，我想談談區塊與行內元素
在 HTML 那一章節中，我們已經有過基本的認知了，現在，我們再更認識他們一點。
考慮以下 HTML 程示碼:
<p>Write code to learn.</p>
<span>I like this course</span>
現在我們在 CSS 中添加以下程式碼:
p, span {
background: black;
color: white;
width: 300px;
height: 100px;
}
呈現效果:
- 從圖片中我們可以了解，內聯元素不能在沒有特殊處理的情況下進行寬度和高度的調整。
我們可以藉由使用display屬性來變更原素為block或inline-block。
p {background: black;
color: white;
width: 300px;
height: 100px;
}
span {
display: block; /* 改成區塊元素 */
background: black;
color: white;
width: 300px;
height: 100px;
}
呈現效果:
盒子模型與class選擇器
基本概念
在瀏覽器中，每個元素都被看作一個 矩形盒子，包含：
- content：內容區域，如文字、圖片。
- padding：內間距，圍繞在 content 之外。
- border：邊框。
- margin：外距，與其他元素之間的距離。
請參考下圖:
現在考慮以下 HTML 程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
</head>
<!-- 主要內容 -->
<body>
<header class="header">
<h1>CSS demo gallery</h1>
<p>est. 1986</p>
</header>
</body>
</html>
- 注意，我們在
<header>標籤內加上class的屬性，方便我們針對特定的 class 做樣式設定，而不是一次影響全部的相同標籤。(試想你有很多<div>標籤，若不設定class，就會一次影響全部的<div>標籤。) - 若我們要對類別做 CSS 設定，記得在class名稱前加一個點。
- 通常，您會希望將相同的樣式套用到頁面上的多個元素。這時類別選擇器就有很大的幫助了，因為類別選擇器將相同的 CSS 應用於具有指定類別的所有元素。
好，不知道你有沒有察覺到，明明還沒開始撰寫 CSS ，元素間卻保有間距，你可以清楚看出<h1>區塊間和<p>區塊間有空隙，這是因為瀏覽器有內建一個 CSS 樣式，保持最低限度的可讀性。
可以透過以下方式將所有元素的內邊距和外邊距設為0:
* {
padding: 0;
margin: 0;
}
好，如此避免了預設值帶來的一些設計上的干擾。那我們現在著手進行一些樣式設定。
若我們要對類別header做 CSS 設定，記得在class名稱前加一個點。
* {
padding: 0;
margin: 0;
}
.header {
background-color: #0a0a23;
color: #ffffff;
}
呈現效果:
- 我們可以清楚看出
<header>標籤的分布範圍。
這時，我想要對其做進一步的設定，以下示範:
* {
padding: 0;
margin: 0;
}
.header {
background-color: #0a0a23;
color: #ffffff;
text-align: center;
text-transform: uppercase;
padding: 32px;
}
/* 選擇 <header> 標籤下的 <p> 標籤進行設定，將字體改為斜體*/
.header p {
font-style: italic;
}
- 內邊距有好幾種表達方式:
- 只輸入1個值的話，這個值會同時套用到元素的四周。
- 輸入2個值的話，順序為上下、左右依序做設定。
- 輸入3個值的話，順序為上、左右、下依序做設定。
- 輸入4個值的話，順序為上、右、下、左依序做設定。
呈現效果:
- 我們可以明顯感受到內邊距的效果。
現在我想要設定border不過，我只想要讓底邊顯示出border的效果，我們可以使用border-bottom 屬性來設定，以下示範:
.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #ffffff;
border-bottom: 4px solid #fdb347;
}
/* 選擇 <header> 標籤下的 <p> 標籤進行設定*/
.header p {
font-style: italic;
}
- 其中
border-bottom的參數依序為間距大小，樣式、顏色。 solid代表一般的直線。- 設成
dashed的話會變成虛線。 - 設成
dotted的話會變成圓點。
呈現效果:
- 我們可以明顯感受到底部邊界的變化。
版型效果設置:
transform: rotate：旋轉元素。box-shadow：添加陰影。border-radius：圓角效果。filter: blur();模糊效果。
考慮以下程式碼:
<div></div>
div {
width: 200px;
height: 200px;
border: 10px solid green;
background-color: #ffa500;
}
呈現效果:
此時我們使用border-radius為其添加圓角效果:
div {
width: 200px;
height: 200px;
border: 10px solid green;
background-color: #ffa500;
border-radius: 20px;
}
- 如果設置成
border-radius: 50%;，會變成一個圓形。 - 你也可以輸入4個參數，依序對左上、右上、右下、左下進行邊角設定。
呈現效果:
接著，我要為其添加陰影的效果，使用box-shadow
div {
height: 200px;
width: 200px;
border: 10px solid green;
background-color: #ffa500;
border-radius: 20px;
box-shadow: 0 0 5px 5px #b20403; /* 可以替換成 box-shadow: inset 0 0 20px 5px gray; 看看 */
}
box-shadow參數依序是: 內外側(預設為外側)｜ x 軸-位移 | y 軸-位移 | 模糊值 blur-radius ｜ 擴散值 spread-radius ｜ 顏色- 若設置六個參數就是設定: inset | x 軸-位移 | y 軸-位移 | 模糊值 blur-radius ｜ 擴散值 spread-radius ｜ 顏色
- 若設置五個參數就是設定: 外側 | x 軸-位移 | y 軸-位移 | 模糊值 blur-radius ｜ 擴散值 spread-radius ｜ 顏色
六個參數呈現效果:
五個參數呈現效果:
現在我希望整體區域能再有一些模糊的效果，使用filter: blur() :
div {
height: 200px;
width: 200px;
border: 10px solid green;
background-color: #ffa500;
border-radius: 20px;
box-shadow: 0 0 5px 5px #b20403;
filter: blur(2px);
}
呈現效果:
最後我們再添加一個效果，讓容器有傾斜的角度，使用transform: rotate :
div {
height: 200px;
width: 200px;
border: 10px solid green;
background-color: #ffa500;
border-radius: 20px;
box-shadow: 0 0 5px 5px #b20403;
filter: blur(2px);
margin: 20px; /* 添加外邊距，以利圖形全貌 */
transform: rotate(5deg); /* 你也可以輸入負號改變旋轉方向 */
}
呈現效果:
重要的盒子模型概念
預設情況下，內邊距和邊框不包含在元素的寬度和高度中。這表示如果您設定寬度與高度為300px並新增內邊距與邊框，實際大小將大於300px的正方形。
現在考慮以下程式碼:
<div class="gallery">
<img src="images/image.png">
</div>
.gallery {
border: 5px solid red;
width: 50%;
height: auto; /* 相應地增加和縮小盒子的尺寸以適應裡面的內容。 */
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
呈現效果:
如你所見，藍色邊框延伸到了紅色邊框外，這是由於瀏覽器計算容器元素大小的方式所造成的。也就和我們上面提到的一樣，內邊距和邊框不包含在元素的寬度和高度中。
box-sizing 屬性用於設定此行為。預設情況下，是使用content-box。此時我們嘗試使用全域 * 選擇器明確將 box-sizing 設定為 border-box，可確保內邊距和邊框包含在元素的寬度和高度中。
* {
box-sizing: border-box;
}
.gallery {
border: 5px solid red;
width: 50%;
height: auto; /* 相應地增加和縮小盒子的尺寸以適應裡面的內容。 */
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
呈現效果:
好，最後我們進一步探討最後一個屬性overflow
考慮以下程式碼:
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<p>This is paragraph 5.</p>
<p>This is paragraph 6.</p>
</div>
div {
height: 140px;
background-color: #0cd1ba;
border: 2px solid black;
}
呈現效果:
我們使用overflow 把溢出的內容隱藏且讓其無法被存取。
div {
height: 140px;
background-color: #0cd1ba;
border: 2px solid black;
overflow: hidden;
}
- 讀者可以自行測試
overflow: auto;，這會隱藏溢出的內容，但可以透過滾動網頁來存取內容。
呈現效果:
