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

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-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 個、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


yymarlerr




Related Posts

軟體開發的未來，是大斗內時代？

軟體開發的未來，是大斗內時代？

 TechBridge 技術週刊
一起來讀 CRAM - A Cognitive Robot Abstract Machine for Everyday Manipulation in Human Environments

一起來讀 CRAM - A Cognitive Robot Abstract Machine for Everyday Manipulation in Human Environments

 Po-Jen
24. Visitor

24. Visitor

 WayneCheng

Comments