CSS 語法架構 (Cascading Style Sheets)


Posted by pei_______ on 2022-05-20

CSS 虛擬類別(pseudo-class)

property一覽

emoji pedia


CSS樣式 Syntax 構成語法

selector { property: value;}

  1. selector: Who you want to chage?
  2. property: What do you want to change?
  3. value: How do you want to change?
    ex. body {background: white;}
    ex. hi {color: blue}
    



CSS樣式 Styles 設定位置

  1. 總共分成三種
    (1) Inline styles: 在HTML標籤內插入style屬性
    (2) Internal style sheet: 在<Head>中插入<style>標籤
    (3) External style sheet: 在<Head>中插入<link>標籤連結至外部css檔案
  2. 顯示優先序級為: 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. 主要分成三種
    (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只能包含一個項目(一對一)
  2. 顯示優先序級為: 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;
    }

}

#css #課堂筆記 #web系列







Related Posts

Introduction to Sequential Testing

Introduction to Sequential Testing

[Note] JS - OOP: Static Members

[Note] JS - OOP: Static Members

[day-12]AJAX - 網路請求

[day-12]AJAX - 網路請求


Comments