2023 iThome 鐵人賽

DAY 14

Modern Web

從UI/UX到實作：和我一起運用Bootstrap和jQuery打造互動式RWD網頁!系列第 14 篇

[CSS和Bootstrap篇]CSS簡介及CSS選擇器

15th鐵人賽

2023-09-29 19:11:15

224 瀏覽

分享至

CSS簡介

CSS（Cascading Style Sheet），又稱為階層式樣式表，是一種用於設計和美化網頁的語言。還記得我們在介紹HTML的第一篇文章中的這張圖:

觀察每個語言下的小人物，可以發現CSS是有穿衣服的HTML，也就是說HTML是用來構建網頁的結構，則CSS則是用來美化網頁。除此之外，CSS的名稱中的「階層式」表示CSS規則可以層層疊加，影響網頁元素的外觀。

CSS放置位置

CSS可以放置在不同的位置，並且具有不同的優先級：

1. 優先層級最高－直接在HTML元素中（但通常不建議使用，因為程式碼一多的話會很很難維護!）：

<h1 style="color: green">文字變綠色</h1>

2. 優先層級第二高－在HTML的`<head>`元素中使用`<style>`標籤：

<head>
	<style>
		h1{
			color: green;
    }
	</style>
</head>

3. 優先層級最低－將CSS獨立放置在一個外部文件（檔名為ＸＸ.css）中，然後使用`<link>`標籤引入HTML：

index.html:

<head>
    <link rel="stylesheet" href="./style.css"/>
</head>

style.css:

h1{
	color: green;
   }

這邊建議大家，在撰寫CSS時選擇上面的第三種方式，也就是將CSS獨立放置在一個外部文件（檔名為ＸＸ.css）中，然後使用<link>標籤引入HTML，這麼做有助於提高程式碼的可維護性和可讀性，特別是在開發大型網頁時。

CSS選擇器

CSS選擇器就是用來選擇要應用樣式的HTML元素的方式！當你把CSS寫在HTML的<head>元素中的<style>標籤裡，或將CSS獨立放置在一個外部文件時會使用到，以下是一些常見的CSS選擇器：

1. 「*」－通用選擇器，用於設定所有元素的樣式：

/* 設定網頁全部元素的樣式 */
* {
  
}

2. 選擇指定的HTML標籤名：

/* 設定網頁所有的<h2>樣式 */
h2 {
  
}

3. ID選擇器－用於選擇具有特定ID的HTML元素（一個ID只能設定給一個HTML元素，就像一組身分證字號只能給一個人）：

HTML:

<p id="first">ID選擇器:「#」+「HTML id名」</p>

CSS:

/* 設定id="first"的HTML元素樣式 */
#first {

}

4. Class選擇器－用於選擇具有特定class的HTML元素（一個HTML元素可以擁有多個class，一個class可以設定給很多HTML元素）：

HTML:

<!-- Class選擇器:「.」+「HTML class名」 -->
<h1 class="first second">套用first、second的樣式</h1>
<p class="first">套用first的樣式</p>

CSS:

/* 設定class="first"的HTML元素樣式 */
.first {
  
}
/* 設定class="second"的HTML元素樣式 */
.second {
  
}

5. 結合元素名稱和class：

HTML:

<p>不會套用到樣式</p>
<p class="first">會套用樣式</p>

CSS:

/* 設定class="first"的<p>樣式 */
p.first {
  
}

6. 群組化選擇器－同時選擇多個不同類型的元素：

/* 設定網頁所有的<h1>、<h2>為同樣的樣式 */
h1,
h2 {
  
}

7. 由父元素選擇子元素：

HTML:

<div class="red">
	<a href="https://www.google.com"></a>
</div>

CSS:

/* 設定class="red"的HTML標籤元素裡的<a>的樣式 */
.red a{
	
}

8. 屬性選擇器－用於選擇具有特定屬性值的元素：

HTML:

<input
	type="text"
/>

CSS:

/* 設定type屬性值為text的<input>的樣式 */
input[type="text"]{
	
}

9. 指定所屬的元素為特殊狀態:

/* 「:hover」:滑鼠懸時更改樣式 */
input[type="text"]:hover {

}

/* 「:active」:滑鼠點擊時更改樣式 */
input[type="text"]:active {
	
}

/* 「:focus」:專注在特定區域時更改樣式 */
input[type="text"]:focus {
	
}

/* 「::before」:在元素前加入內容，像這裡是在<p>前加入藍色的「>>」 */
p::before {
	content: ">>";
	color: blue;
}

/* 「::first-line」:更改元素的第一行文字樣式 */
p::first-line {
	font-size: 32px;
}

/* 「::selection」:更改預設選取文字的背景顏色 */
*::selection {
	background-color: lightgreen;
}