iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

從HTML到Python爬蟲的30天之旅系列 第 4

Day 04:專案01 - 超簡單個人履歷03 | CSS簡介

CSS是什麼?

CSS,全名為Cascading Style Sheets,中文為階層式樣式表。跟HTML一樣,CSS既非標準程式語言,也不是標記語言,而是一種風格頁面語言,它能為你的HTML文件中的元素套用不同的樣式(ex: 顏色、字體...等)。CSS也分為好幾代,目前主流使用的是CSS3,而CSS3可以相容於多數的瀏覽器。

就像前面提到的,CSS就像HTML的衣服,決定了網頁的顏色以及圖案。

CSS基本語法

  • Selector:選擇器,用於定位HTML元素,通常為標籤名稱、class名稱或id名稱。
  • Declaration:宣告區域,用於宣告元素的屬性,包含了 屬性(Property)屬性值(Value) 兩個區塊。用兩個大括號包圍,宣告間用分號分隔。
  • Property:屬性,搭配屬性值使用,屬性和屬性值間用冒號區隔。
  • Value:屬性值,設定前方屬性的值。

簡單講,上面那段範例所代表的意思就是:

HTML文件中所有的h1元素,將文字顏色設為藍色,字體大小設為12px,

CSS套用方式

CSS有三種套用的方法,分別是行內載入、內部載入和外部載入。

行內載入

直接寫在元素標籤的後面,優點是相當直覺,缺點則是較不易更改和維護。

<p style="color: red; font-size: 20px;">Hello, CSS!</p>

你可能已經發現了,這不是我們學HTML時就已經用過了嗎?

沒錯! 其實你早就已經偷學到一點點CSS的語法了,只不過我會講其他更好的載入方式。

內部載入

將CSS寫在<head><style>中,語法如同上面的CSS語法。優點是可以大量套用格式,而且方便管理和維護,但缺點是如果CSS數量一多,整個HTML文件會顯得很冗長。

<head>
    <style>
        p {
            color: red; 
            font-size: 20px;
        }
    </style>
</head>

外部載入

將CSS格式獨立寫成.css檔,並從HTML中載入.css檔。寫法是在<head>中加上<link>

除了好維護外,HTML和CSS也可以清楚的分開,甚至可以多的HTML共用一個CSS檔,因此我比較推薦使用這個方法,範例程式我也都是用這個方法。

/* demo.css */
p {
    color: red; 
    font-size: 20px;
}
// demo.html
<head>
    <link rel="stylesheet" href="demo.css">
</head>

三種寫法的顯示結果都為:

CSS選擇器

選擇器用於定位元素,決定哪些元素要被設定格式。

CSS有很多種選擇器,常見的有標籤選擇器、class選擇器或id選擇器...等等。

標籤選擇器

使用標籤名稱來定位,所有該標籤的元素都會設定格式。

像上面範例就是將所有<p>設定格式。

p {
    color: red; 
    font-size: 20px;
}

class選擇器

還記得第一天提過的class屬性嗎? class選擇器可以將所有符合class屬性值的元素設定格式。語法為.+class屬性值

將所有class="title"的元素設定樣式。

.title {
    color: red; 
    font-size: 20px;
}

id選擇器

這麼說來,我好像還沒說過id屬性。其實id屬性和class屬性類似,也是用於定位HTML元素,但差別在於id屬性值是唯一的,只能定位在一個元素上,不同於class屬性可以同時設定好幾個元素。

雖然id用於定位單一特定元素很好用,但我不建議你使用id來設定CSS格式。原因有兩個,第一個是因為id屬性值是唯一的,所以你可能在沒注意到的情況下設定兩個相同的id,結果可能導致非預期的錯誤。第二個是因為JavaScript或JQuery經常使用id當作定位點,稱之為錨點,如果使用和他們相同的id也可能導致非預期的錯誤。總之就是盡量多使用class,少使用id就對了!

id選擇器的語法是 #+id屬性值

#title {
    color: red; 
    font-size: 20px;
}

群組選擇器

也可以一次選擇多的選擇器,選擇器之間使用逗號隔開。

h1, p {
    color: red;
}

後代選擇器

我們在Day02講過DOM tree的概念,CSS也可以使用樹狀結構來定位。

後代選擇器可以選擇特定節點下所有子節點(包含子節點的子節點...),語法為父節點+空格+子節點

// demo.html
<div class="container">
    <p>子節點</p>
    <div>
        <p>子節點的子節點</p>
    </div>
</div>
// demo.css
.container p {
    color: red;
}

顯示結果為:

子選擇器

和後代選擇器類似,差別在於子選擇器只影響該節點下一層的子節點,語法為父節點+>+子節點

.container>p {
    color: red;
}

顯示結果為:

優先度

事實上,CSS在決定樣式時,是依照優先度去決定的,優先度大的樣式會強制蓋過優先度小的樣式。

優先度的配置大致如下:

套用方式:行內載入 > 內部載入 > 外部載入

CSS選擇器:id > class > 標籤

CSS選擇器:id > class > 標籤

另外,在屬性宣告後方加上 !important 後,直接晉升為最大優先度,蓋過其他所有的樣式。

例如範例中,我們使用標籤、class和id選擇器設定同一個元素的顏色,猜猜看,文字會是什麼顏色呢?。

// demo.html
<h1 class="h1" id="h1">What's color?</h1>
h1 {
    color: red;
}
.h1 {
    color: blue;
}
#h1 {
    color: purple;
}

結果為紫色,因為id選擇器的優先度最大。

但是如果改成這樣:

h1 {
    color:red !important;
}
.h1 {
    color:blue;
}
#h1 {
    color: purple;
}

因為我在紅色格式後方加上 !important 的關係,結果就變成紅色了。

小結

今天我們開始接觸了CSS,知道CSS的基本語法以及套用方式,並學習了好幾個CSS選擇器的用法,最後,還了解了CSS如何決定格式優先度。

明天我會介紹幾個常見的屬性值,讓你的網頁變得更加繽紛! 別忘了按下訂閱開啟小鈴鐺,我們明天準時見面~


如果喜歡這系列文章麻煩幫我按Like加訂閱,你的支持是我創作最大的動力~

本系列文章以及範例程式碼都同步更新在GitHub上,後續會持續的更新,如果喜歡也麻煩幫我按個星星吧~

有任何問題或建議,都歡迎在底下留言區提出,還請大家多多指教。


上一篇
Day 03:專案01 - 超簡單個人履歷02 | HTML基本元素
下一篇
Day 05:專案01 - 超簡單個人履歷04 | CSS文字、區塊屬性
系列文
從HTML到Python爬蟲的30天之旅30

尚未有邦友留言

立即登入留言