[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

HTML tag

HTML tag

 mijouhsieh
What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

 KevinLi
MTR04_0706

MTR04_0706

 cwc329

Comments