CSS (Cascading Style Sheets) 階層式樣式表
和 HTML 混在一起寫
<!DOCTYPE html>
<html>
<head>
<h1>這是標題一</h1>
<h2>這是次標題</h2>
</head>
<body>
<div style="background:red;">
Hey What's up
</div>
</body>
打在標題裡面
- selector { attribute: value; }:用來選擇頁面上的哪一個元素需要加樣式
<!DOCTYPE html>
<html>
<head>
<h1>這是標題一</h1>
<h2>這是次標題</h2>
<style>
div {
background: yellow;
}
</style>
</head>
<body>
<div>
Hey What's up
</div>
</body>
當 CSS 規則變多時,將 CSS 獨立為一個檔案
利用
<link>
連結新開的檔案裡面的內容,舉例,若新檔案名稱叫「style.css」:div { background: purple; }
在去 HTML 的檔案,加入
<link>
rel
代表 relation 的意思
<!DOCTYPE html>
<html>
<head>
<h1>這是標題一</h1>
<h2>這是次標題</h2>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div>
Hey What's up
</div>
</body>
介紹 CSS selector
*
universal selector
- 全部的背景都會變成紫色
* {
background: purple;
}
標籤
selector
- 舉例:
div
body
h1
- 會選到所有標籤
- 範例,檔案裡的兩個
<div>
的背景都會是黃色的
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div>
Hey What's up
</div>
<div>
How do you do
</div>
</body>
div {
background: yellow;
}
body {
color: green;
}
h1 {
color: red;
}
id
與 class
- id 不會重複
- 範例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div id="div1">
Hey What's up
</div>
<div>
How do you do
</div>
</body>
- 在 CSS 檔案裡,用
#
呼叫
#div1 {
background: yellow;
}
- class 可以有很多個
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div id="div1">
Hey What's up
</div>
<div class="change-background">
How do you do
</div>
<div class="change-background">
There's one thing
</div>
<div>
that I would like you to know
</div>
</body>
- 在 CSS 檔案裡,用
.
來呼叫
#div1 {
background: yellow;
}
.change-background {
background: olive;
}
同時符合
- 當兩個不同標籤的 class 相同時,可以指定要 select 哪一個標籤,或當 class 有兩個條件,而需要兩個條件都有,才能修改樣式時
- 將標籤名稱加在
.class名稱
的前面
div.change-background {
background: olive;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div id="div1">
Hey What's up
</div>
<div class="change-background">
How do you do
</div>
<div class="change-background">
There's one thing
</div>
<span class="change-background">
Row row row your boat
</span>
<div>
that I would like you to know
</div>
</body>
.class名稱.class名稱
div.change-background.textry {
background: olive;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div id="div1">
Hey What's up
</div>
<div class="change-background textry">
How do you do
</div>
<div class="change-background">
There's one thing
</div>
<span class="change-background">
Row row row your boat
</span>
<div>
that I would like you to know
</div>
</body>
selector:底下的元素
- 可以指定哪一個 class 或 標籤的元素
- 範例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div id="div1">
Hey What's up
</div>
<div class="lv1">
lv1
<div class="lv2">
lv2
<div class="lv3">
lv3
</div>
</div>
</div>
<span class="lv1">
Row row row your boat
</span>
</body>
>
select 下一層,會找不到元素,因為 lv3 不在下一層
.lv1 > .lv3 {
background: olive;
}
- select lv1 底下的所有 lv3
.lv1 .lv3 {
background: olive;
}
+
.bg-pink + .bg-yellow
,代表要選 bg-pink 旁邊(同一層,由左到右來看)的 bg-yellowdiv + span
,代表要選 div 旁邊的 span- 範例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div class="bg-black">Hello</div>
<div class="bg-black">this</div>
<div>is</div>
<div class="bg-black">testing</div>
</body>
.bg-black + .bg-black {
background: black;
}
~
.bg-pink ~ .bg-yellow
,代表要選 bg-pink 旁邊(同一層,由左到右來看)的所有 .bg-yellow
hover
- 屬於 Pseudo-classes
- 滑鼠停在該元素上時,才會套用該規則
.bg-pink:hover {
background: pink;
}
- 使用 dev tool 時,因為滑鼠移開便不會套用規則,所以可以從 span -> Styles -> Force element state -> 勾選 hover
nth-child
- 屬於 Pseudo-classes
- 可以指定選第幾個元素
- nth-child(),括號中放指定元素,像是第
n
個、odd
、even
、3n
、3n+1
- 範例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div class="wrapper">
<div class="bg-black">Hello</div>
<div class="bg-black">this</div>
<div>is</div>
<div class="bgㄦblack">testing</div>
</div>
</body>
- 指定第一個 & 最後一個 div
.wrapper div:first-child {
background: pink;
}
.wrapper div:last-child {
background: pink;
}
.wrapper div:nth-child(1) {
background: pink;
}
- 如果想要選第三個 .bg-black,括號內不能直接放 3,這邊的 3 是 wrapper 底下的第三個元素,而第三個元素沒有 .bg-black
.wrapper .bg-black:nth-child(3) {
background: pink;
}
before
& after
- 屬於 Pseuso-element 偽元素
- 用 CSS 產出內容,優點:要改內容時,可以直接到 CSS 改
- 範例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css"
</head>
<body>
<div class="price">
<div class="bg-black">1000</div>
<div class="bg-black">90</div>
<div>10</div>
<div class="bg-black">800</div>
</div>
</body>
- before 為在元素前加內容
- after 為在元素加內容
.price div::before {
content:'$';
}
- content 可以放屬性 attr(),括號內如果放 class,就會抓出 class 的內容,另外 content 一定要放東西,after 或 before 才會出現,放空的東西(” “)也可以
CSS Selector 的權重
id > class > tag
- 越詳細的贏
- class 包含 Pseudo Class & attribute
- inline style -> 1, 0, 0, 0
!important
-> 1, 0, 0, 0, 0