Day8_CSS-1

第 12 屆 iThome 鐵人賽

DAY 8

Modern Web

前端網頁設計學習旅程系列第 8 篇

12th鐵人賽

髮量稀疏的中年大叔

2020-09-20 20:34:19

507 瀏覽

跟HTML一樣，CSS並非是一種程式語言，而是一種風格語言。
HTML定義網頁的內容以及骨架，而CSS則是告訴瀏覽器這些資料應該要如何顯現出來。
CSS 的全名是 Cascading Style Sheets，，他專注在外貌的設定上，讓 HTML 專注於文件的結構，因此讓網頁原始碼回歸成乾淨俐落的文件

基本語法

CSS的基本語法如下

selector {
    property: value;
    anotherProperty: value;
}

selector是要套用樣式的標籤，property 則是以 key-value 的形式定義，並且在後面加上分號，例如

/* Make all h1's purple and 56px font */
h1 {
    color: purple;
    font-size: 56px;
}

/* Give all img's a 3px red border */
img {
    border-color: red;
}

CSS範例

以下先建立一個範例網頁

<!DOCTYPE html>
<html>
<head>
	<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<h4>My Books:</h4>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>

</body>
</html>

網頁的呈現如下

如果想要換HTML文字的顏色為紫色，有以下幾種選擇

inLine

直接在HTML加上屬性 style，並且指定顏色為紫色

<li style="color: purple">HTML</li>

Style Tag

但如果要把所有個清單都換為紫色，除了在每個清單指定顏色以外
CSS提供另外一種選擇如下，在head內加上CSS語法
指定全文的清單文字顏色為紫色

<!DOCTYPE html>
<html>
<head>
	<title>About Me</title>
	<style type="text/css">
		li {
			color: purple;
		}
	</style>
</head>
<body>
<h1>About Me</h1>
<h4>My Books:</h4>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>

</body>
</html>

結果如下，順利地改變清單文字的顏色

Link Tag

延伸上題，如果要定義更多樣式，比如把h1換為紅色，h4換為黃色，清單為綠色，如此會讓HTML檔案的head區塊越來越長。
因此，CSS提供Link標籤，允許CSS定義在另外一個檔案，並使用Link Tag將HTML與CSS關聯起來，作法如下

新增一個app.css，放在跟HTML相同目錄底下，檔案內容如下

h1 {
	color: red;
}

li {
	color: green;
}

h4 {
	color: yellow;
}

HTML檔案內，用link標籤關聯到app.css

<!DOCTYPE html>
<html>
<head>
	<title>About Me</title>
	<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<h1>About Me</h1>
<h4>My Books:</h4>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>

</body>
</html>

如此，CSS內定義的樣式，就會套用到整份HTML文件