[FE101] CSS part 1


Posted by yymarlerr on 2021-05-20

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;
}

idclass

  • 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-yellow
  • div + 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 個、oddeven3n3n+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









Related Posts

MTR04_0803

MTR04_0803

Angular17 部屬完成,在瀏覽器中使用 F5 重新整理跳轉 404 異常解決

Angular17 部屬完成,在瀏覽器中使用 F5 重新整理跳轉 404 異常解決

Vite 怎麼能那麼快?從 ES modules 開始談起

Vite 怎麼能那麼快?從 ES modules 開始談起


Comments