Tweet
Tweet

Slide 1

Slide 1 text

CSS – Cascading Style Sheets 階層式樣式表 補充教材

Slide 2

Slide 2 text

Box Model 箱子模型 ⚫ Margin –邊界 ⚫ Border – 邊框 ⚫ Padding – 框距 ⚫ Content - 內容、文字/影像

Slide 3

Slide 3 text

⚫ margin-xxxx 分開標示 ⚫ margin-bottom ⚫ margin-left ⚫ margin-right ⚫ margin-top 邊界 Margin ⚫ margin 一次標示 ⚫ 10px − 上：10px、右：10px、下：10px、左：10px ⚫ 10px 5px − 上：10px、右：5px、下：10px、左：5px ⚫ 10px 5px 15px − 上：10px、右：5px、下：15px、左：5px ⚫ 10px 5px 15px 20px − 上：10px、右：5px、下：15px、左：20px

Slide 4

Slide 4 text

邊框 Border 1/2 ⚫ border-style 設定邊框樣式 (可每一邊不同) ⚫ 樣式 − none, dotted, dashed, solid, double, groove 溝槽 − ridge 隆起, inset, outset, hidden ⚫ 四邊分開設 − border-top-style − border-right-style − border-bottom-style − border-left-style ⚫ 一次一起設 − border-style:dotted solid double dashed 上,右,下,左 − border-style:dotted solid double 上,左右,下 − border-style:dotted solid 上下,左右 − border-style:dotted 四邊相同

Slide 5

Slide 5 text

邊框 Border 2/2 ⚫ border-width 設定邊框寬度(框的粗細) ⚫ 四邊分開設 − border-top-width − border-right-width − border-bottom-width − border-left-width ⚫ 一次一起設 − border-width:10px 5px 15px 20px 上,右,下,左 − border-width:10px 15px 5px 上,左右,下 − border-width:10px 5px 上下,左右 − border-width:10px 四邊相同 ⚫ border-color 顏色 ⚫ border 一次設定四邊的樣式、寬度與顏色 ⚫ border:5px solid red

Slide 6

Slide 6 text

框距 Padding ⚫ 設定內容與邊框的距離大小 ⚫ 各別設定 ⚫ padding-bottom ⚫ padding-left ⚫ padding-right ⚫ padding-top ⚫ 一次設定 ⚫ padding

Slide 7

Slide 7 text

練習：用CSS繪製 Box Model

Slide 8

Slide 8 text

練習：用CSS繪製 Box Model

Slide 9

Slide 9 text

對話泡泡

Slide 10

Slide 10 text

對話泡泡拆解 圓角邊框 顏色邊框 圓角邊框 背景顏色

Slide 11

Slide 11 text

用CSS產生三角形  每一邊先設定成不同的顏色

Slide 12

Slide 12 text

用CSS產生三角形  把div的大小縮成0px

Slide 13

Slide 13 text

用CSS產生三角形  其中一邊顏色保留，另外三邊設成透明色

Slide 14

Slide 14 text

index.html

Slide 15

Slide 15 text

index.html

Slide 16

Slide 16 text

style.css

Slide 17

Slide 17 text

CSS3 變形特效 – 旋轉  transform:rotate(30deg);  控制旋轉的度數

Slide 18

Slide 18 text

CSS3 動畫  @-webkit-keyframes name 定義動畫影格  name名稱 與 animation-name 對應  time可設定from、to或x% 決定每個時間點要呈現什麼效果  -webkit-animation 定義動畫屬性  animation-name：名稱，與keyframes對應  animation-duration：動畫播放時間長度(秒)  animation-iteration-count：播放次數( n or infinite)  animation-timing-function：ease、linear、ease-in、ease-out、ease-in-out  animation-play-state：running、paused  animation-delay：隔多久再開始

Slide 19

Slide 19 text

CSS3練習：旋轉 + 動畫  請讓車子的輪胎轉動

Slide 20

Slide 20 text

index.html

Slide 21

Slide 21 text

style.css

Slide 22

Slide 22 text

CSS Cascading & Inheritance 概念分析：層迭與繼承

Slide 23

Slide 23 text

Cascading • 相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時， 最後一個屬性值才會被使用。 • 表頭樣式與行內樣式衝突

Slide 24

Slide 24 text

Cascading • 相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時， 最後一個屬性值才會被使用。 • 表頭樣式前後衝突

Slide 25

Slide 25 text

Inheritance 繼承 • 有些CSS屬性會自動繼承給指定物件的子元件。 • 段落組件p下的粗體組件b

Slide 26

Slide 26 text

Inheritance 繼承 • 有些CSS屬性會自動繼承給指定物件的子元件。 • div --> p --> b

Slide 27

Slide 27 text

Inheritance 繼承 • 極少數CSS屬性繼承時會產生多重效果。 • div --> p --> b

Slide 28

Slide 28 text

Inheritance 繼承 • 有些CSS屬性會自動繼承給指定物件的子元件。 • 以比例方式設定會產生繼承值之後的比例

Slide 29

Slide 29 text

Inheritance 繼承 • 如果沒有自動繼承至子元件，可使用inherit強制繼承。 • 段落組件p下的粗體組件b

Slide 30

Slide 30 text

Inheritance 繼承 • 如果沒有自動繼承至子元件，可使用inherit強制繼承。 • 段落組件p下的粗體組件b

Slide 31

Slide 31 text

CSS規則套用的優先權 Specificity • 直接寫在HTML組件的style屬性 • 優先權值：1000 • CSS選擇器使用ID的方式 • 優先權值：100 • CSS選擇器使用class, pseudo-class或限定屬性 • 優先權值：10 • CSS選擇器使用HTML組件、偽組件(pseudo-element) • 優先權值：1

Slide 32

Slide 32 text

計算 Specificity • #container ul#menu li.active ul li:hover {} • #container：100 • ul：1 • #menu：100 • li：1 • .active：10 • ul：1 • li：1 • :hover：10 Specificity：224 https://www.codecaptain.io/tools/css-specificity-calculator

Slide 33

Slide 33 text

聖旨駕到 !important • 淩駕所有優先權與位置

Slide 34

Slide 34 text

一個HTML元件可以套用多個類別 • rule1 + rule2

Slide 35

Slide 35 text

id 與 class 可以同時存在 • id的優先權值比較高

Slide 36

Slide 36 text

選擇器也可以巢狀使用 • 用空格隔開

Slide 37

Slide 37 text

選擇器也可一次指定多個  逗號隔開