CSS樣式 Syntax 構成語法

selector { property: value;}

selector: Who you want to chage?
property: What do you want to change?

value: How do you want to change?

ex. body {background: white;}
ex. hi {color: blue}

CSS樣式 Styles 設定位置

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

CSS樣式 Syntax 構成語法

CSS樣式 Styles 設定位置

CSS Selector 選擇器

CSS Selector 選擇器組合

Media Queries

pei_______

Related Posts

Comments

CSS樣式 Syntax 構成語法

CSS樣式 Styles 設定位置

CSS Selector 選擇器

CSS Selector 選擇器組合

Media Queries

pei_______

Related Posts

DAY33：What's a Perfect Power anyway?

學習 Git (6) - 修改 commit 紀錄 part 2: Reset

[MTR04] W1 D4 搞懂 Git 交作業流程

Comments