CSS Practices

Transcript

1. CSS – Cascading Style Sheets 階層式樣式表 補充教材
2. Box Model 箱子模型 ⚫ Margin –邊界 ⚫ Border – 邊框 ⚫ Padding – 框距 ⚫ Content - 內容、文字/影像
3. ⚫ 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
4. 邊框 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 四邊相同
5. 邊框 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
6. 框距 Padding ⚫ 設定內容與邊框的距離大小 ⚫ 各別設定 ⚫ padding-bottom ⚫ padding-left ⚫ padding-right ⚫ padding-top ⚫ 一次設定 ⚫ padding
7. 練習：用CSS繪製 Box Model
8. 練習：用CSS繪製 Box Model
9. 對話泡泡
10. 對話泡泡拆解 圓角邊框 顏色邊框 圓角邊框 背景顏色
11. 用CSS產生三角形  每一邊先設定成不同的顏色
12. 用CSS產生三角形  把div的大小縮成0px
13. 用CSS產生三角形  其中一邊顏色保留，另外三邊設成透明色
14. index.html
15. index.html
16. style.css
17. CSS3 變形特效 – 旋轉  transform:rotate(30deg);  控制旋轉的度數
18. 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：隔多久再開始
19. CSS3練習：旋轉 + 動畫  請讓車子的輪胎轉動
20. index.html
21. style.css
22. CSS Cascading & Inheritance 概念分析：層迭與繼承
23. Cascading • 相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時， 最後一個屬性值才會被使用。 • 表頭樣式與行內樣式衝突
24. Cascading • 相同的CSS屬性被賦予多次不同的屬性值，但卻套用在同一個元件時， 最後一個屬性值才會被使用。 • 表頭樣式前後衝突
25. Inheritance 繼承 • 有些CSS屬性會自動繼承給指定物件的子元件。 • 段落組件p下的粗體組件b
26. Inheritance 繼承 • 有些CSS屬性會自動繼承給指定物件的子元件。 • div --> p --> b
27. Inheritance 繼承 • 極少數CSS屬性繼承時會產生多重效果。 • div --> p --> b
28. Inheritance 繼承 • 有些CSS屬性會自動繼承給指定物件的子元件。 • 以比例方式設定會產生繼承值之後的比例
29. Inheritance 繼承 • 如果沒有自動繼承至子元件，可使用inherit強制繼承。 • 段落組件p下的粗體組件b
30. Inheritance 繼承 • 如果沒有自動繼承至子元件，可使用inherit強制繼承。 • 段落組件p下的粗體組件b
31. CSS規則套用的優先權 Specificity • 直接寫在HTML組件的style屬性 • 優先權值：1000 • CSS選擇器使用ID的方式 • 優先權值：100 • CSS選擇器使用class, pseudo-class或限定屬性 • 優先權值：10 • CSS選擇器使用HTML組件、偽組件(pseudo-element) • 優先權值：1
32. 計算 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
33. 聖旨駕到 !important • 淩駕所有優先權與位置
34. 一個HTML元件可以套用多個類別 • rule1 + rule2
35. id 與 class 可以同時存在 • id的優先權值比較高
36. 選擇器也可以巢狀使用 • 用空格隔開
37. 選擇器也可一次指定多個  逗號隔開