【Day 04】開始裝箱前～html & CSS簡易練習・續

2025 iThome 鐵人賽

DAY 4

Modern Web

欸，貓咪你不能去那裡！CSS新手學習之路系列第 4 篇

17th鐵人賽

jeankuo1510

團隊好想工作室 v 9.0

2025-09-18 15:36:45

73 瀏覽

分享至

前言

昨天的練習講解僅解說了Html部分，今天我來說明CSS這端做了哪些事。

解說

@charset "UTF-8";

body{
    background-color: linen;
}
h1 {
    color: peru;
}
p{
    font-size: 20px;
    color: firebrick;
}
div{
    font-size: 50px;
}
.box{
    background-color: peru;
    padding: 20px ;
    border: 10px solid saddlebrown;
    margin: 100px ;
    width: 250px;
    height: 50px;
}
.box2{
    background-color: burlywood;
    padding: 10px ;
    border: 10px solid chocolate;
    margin: 100px ;
    width: 100px;
    height: 25px;
}

接下來逐項細說，

@charset "UTF-8"

指定樣式表中使用的字元編碼，這裡使用常見的網頁編碼"UTF-8"。

群組選擇器

可以注意到底下有一系列相似格式組成的群組選擇器。

群組選擇器{
    屬性: 值;
}

以練習的CSS程式碼為例，

body{
    background-color: linen;
}

表示指定html元素<body>套用background-color屬性，使背景顏色變更為linen顏色（值）。
所以呈現就是整個內容背景都變更為linen。

因為html只能有一個<body>元素，無法展現群組選擇器方便之處，試想一下這次有好幾十個h1標籤的標題內容要改字型大小，一個一個在html裡添加修改肯定是最麻煩的吧，所以CSS能讓編寫者建立可以套用進標籤元素的樣式規則。
（補充：上面舉例好幾十個h1標籤，但實際上最好避免這樣使用。以
語意來說一篇文章通常只有一個title，同理h1標籤也是一樣道理。）

h1 {
    font-size: 20px;
}

這樣就可以統一指定所有<h1>標題文字大小為20px了！

進階用法

若想要指定僅<h1>後面<p>標籤套入樣式，有三種方式--
方法一：
群組選擇器直接添加<h1><p>。

h1, p{
    font-size: 20px;
}
/*所有<h1>以及所有<p>的文字大小指定為20px*/

方法二：
h1+p代表<h1>後一個<p>。

h1, h1+p{
    font-size: 20px;
}
/*所有<h1>以及所有<h1>後一個<p>的文字大小指定為20px*/

註：以上可延伸參考選擇器「父子/同輩關聯」

方法三：
html使用<section>區隔不同的<h1><p>。

<section class="style1">
        <h1>欸！貓咪你不能...</h1>
        <p>不行！那個箱子不行！</p>
</section>
<!-- 用<section>分成不同部分，並用class為其添加名稱為"style1"類別-->

.style1 h1, .style1 p{
    font-size: 20px;
}
/*指定類別style1中的<h1>, <p>的文字大小指定為20px*/

<div>

<div class="box">꜀(^. .^꜀ )੭</div>
昨天有提到<div>是區塊元素的一種，且可以視爲一個包裹其他具有語意含義的標籤元素的容器。

為什麼我不能簡單用<h1>跟<p>來設計基本方框？

原因是<h1>、<p> 是語意化標籤（semantic tags），本身是拿來代表標題與段落內容，語意化標籤可以幫助搜尋引擎重視在「標題」、「連結」裡的關鍵字；另一個原因是方便其他開發者閱讀，<h1>、<p>直接聯想會是跟標題相關而非版面設計。

而<div>來自division，是區分的意思。
<div>作為沒有語意的「純」容器，用於對內容進行分組，以便後續使用 class 或 id 屬性設定樣式。

.box class選擇器

.box{
    background-color: peru;
    padding: 20px ;
    border: 10px solid saddlebrown;
    margin: 100px ;
    width: 250px;
    height: 50px;
}

.box2 {
    .background-color: burlywood;
    padding: 10px ;
    border: 10px solid chocolate;
    margin: 100px ;
    width: 100px;
    height: 25px;
}

裡面屬性我留到之後box model主題在來詳談，
.box是一種class選擇器，代表class類型名稱為box的元素都選取起來做後面樣式更動。
這裡主要是呈現一個基本方框（box）以及當兩個相似的樣式設定套用至同一個元素會發生什麼事？

前面有提過樣式規則的套用順序取決於CSS規則的權重（specificity）和定義的順序，在這裡因為box和box2都是class選擇器，彼此權重一樣。
因此按照html讀取順序--放在後面的box2會比較晚讀取，造成後定義的樣式規則覆蓋box。