CSS樣式 Syntax 構成語法
selector { property: value;}
- selector: Who you want to chage?
- property: What do you want to change?
- value: How do you want to change?
ex. body {background: white;} ex. hi {color: blue}
CSS樣式 Styles 設定位置
- 總共分成三種
(1) Inline styles: 在HTML標籤內插入style屬性
(2) Internal style sheet: 在<Head>中插入<style>標籤
(3) External style sheet: 在<Head>中插入<link>標籤連結至外部css檔案 - 顯示優先序級為: Inline > Internal > External
CSS 行內樣式(Inline styles)
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: white;">
</body>
</html>
內部樣式表(Internal Style Sheet)
<head>
<style>
body {
background-color: #DAE5D0;
}
hr {
border-style: none;
border-top-style: dotted;
border-color: lightgray;
border-width: 5px;
width:5%;
}
</style>
</head>
外部樣式表(External Style Sheet)
/* in css/style.css */
h1, h2, h3 {
color: blue;
}
/* in web pages */
<head>
<link rel="stylesheet" href="css/style.css">
</head>
CSS Selector 選擇器
- 主要分成三種
(1) Tag selector: 只看標籤的屬性做調整 ex.<img>,<h1>
(2) Class selector: 設計標籤的群組，ex.<img class="photo circular">
＝> 一個項目可以歸屬很多種class，一個class可以包含很多項目
(3) Id selector: 設計標籤的專屬id，ex.<img> id="Penny_photo"
＝> 一個項目只能歸屬一個id，一個id只能包含一個項目(一對一) - 顯示優先序級為: id > class > tag
Tag selector
h1 {
color: red;
font-size: 150px;
}
img:hover {
background-color: gold;
}
Class selector
.bacon {
background-color: green;
}
.broccoli {
background-color: red;
}
.circular {
border-radius: 100%;
}
Id selector
#heading{
color: blue;
}
CSS Selector 選擇器組合
multiple selectors ：兩個selectors共用設計
- 使用逗號","連接
h1, p {
color:red;
}
hierarchical selectors ：限特定父物件內的子物件套用設計
- 使用空白鍵" "連接
.container-fluid h1 {
color:red;
}
combined selsectors ：同時擁有兩個選擇器的物件套用設計
- 兩個選擇器中間無分隔
h1#title {
color: red;
}
Media Queries
- 限定在滿足某條件下才會套用設計
@media (max-width: 1028px) {
h1 {
color: red;
}
}
