選擇器把 HTML 和 CSS 結合在同一頻率上, 可互相溝通。HTML 的 tag 知道要從 CSS 哪邊套取樣式, 而 CSS 可以和 HTML 溝通要去哪邊的 tag 套取樣式。
id selector(id選擇器): #id 選擇符合 id 屬性的元素來命名此選擇器
id 只有一個, 在一個HTML 檔中是獨一無二的, 不可同時出現多個相同的 id
#id {
css declarations;
}
example:
#design {
opacity: .75;
transition: opacity .5s ease-in-out;
}
class selector(class選擇器): .class 選擇符合 class 屬性的元素來命名此選擇器
.class {
css declarations;
}
example:
.dark-theme {
background-color: #2c2c2c;
color: #e0e0e0;
}
example:
h1 {
background-color: #2c2c2c;
}
以上介紹的三項選擇器是 簡易選擇器 (Basic Selectors) : id, class, element 都是選擇單一的 id, 單一的 class, 單一的元素標籤
multiple selectors(複合選擇器): 將多個選擇器結合
多個選擇器之間不得有空格
.class1.class2 {
css declarations;
}
grouping selectors(群組選擇器): 將多個選擇器用 逗號 結合起來, 將多處需套用相同樣式處集中管理
element1, element2 {
css declarations;
}
example:
<!DOCTYPE html>
<html>
<head>
<style>
article, p, img {
display: block;
margin: auto;
text-align: center;
border-bottom: double blue;
}
</style>
</head>
<body>
<article>Demo Text</article>
<p>This is demo text.</p>
<br/>
<img src="C:\Users\User\Pictures\cute-pig-cartoon.jpg">
</body>
</html>
p, .pink, #pig {
color:#FF69B4;
}
CSS 樣式規則在此將套用於:
Why Group Selectors?
將 CSS 選擇器分組有助於最小化樣式表的大小，從而加快加載速度。
儘管 CSS 文件空間很小, 但能盡量減少 CSS 大小就可以更快加載出頁面對大家都是好事。
對網頁維護也有好處, 當需要修改某個樣式時, 編輯單一個 CSS 樣式規則即可, 而不是這邊修改完又想到還有別的地方沒有更改到相同的規則, 聰明的適當的使用群組選擇器可節省大家的時間和減少不必要的麻煩。
學會 CSS 簡寫 (CSS Shorthand)
Example:
Without shorthand:
background-color: #2c2c2c;
background-image: url(../media/examples/image.gif);
background-repeat: no-repeat;
background-position: top left;
With shorthand:
background: #2c2c2c url(../media/examples/image.gif) no-repeat top left;
CSS 引入:
<link href="/css/darkTheme.css" rel="stylesheet">
JavaScript 引入:
<script th:src="@{/js/darkTheme/dark.js}"><script>
iThome鐵人賽
看影片追技術