--- tags: 學習筆記 --- # HTML & CSS Full Course - Beginner to Pro (2022) 上課資源： - [影片](https://youtu.be/G3e-cpL7ofc) - [練習](https://github.com/SuperSimpleDev/html-css-course-2022/tree/main/1-exercise-solutions) - 上課範例 - [buttons](https://supersimple.dev/exercises/buttons ) - [text](https://supersimple.dev/exercises/text ) - [final project](https://supersimple.dev/exercises/youtube) 課程列表： [toc] ## Lesson2 CSS Basics SUBSCRIBE - 背景顏色 `background-color` - 文字顏色 `color` - 邊 (沒有邊) `border` - 高 `height` - 寬 `width` - 圓角 `broder-radius` - 滑鼠指標 `cursor` ## Lesson3. Hovers, Transitions, Shadows - :hover - :active - opacity - transition - box-shadow - rgba ## Lesson4. Chrome DevTools & CSS Box Model - chrome 檢查 - box model - using padding is a better alternative to height and width - `vertical-align: top` ## Lesson5. Text Styles ![](https://i.imgur.com/EGlyhDO.png) - font-family - font-size - font-weight - font-style - text-align - `<p>` 預設格式有 margin-top、margin-bottom - clean code up。所有段落都有 `font-family: Arial;`，就用到 p 去；另外 `margin-top`、`margin-bottom`，也可以整理一下。 - CSS specificity: class name selector > element name selector - text-decoration - text element: `<strong>`、`<u>`、`<span>`等等 - General Technique: 1. Create element with HTML 2. Style with CSS one by one ## Lesson6. The HTML Structure - <!DOCTYPE html>..... - CSS改用 `<link>` 引入 - href 路徑說明 ## Lesson7. Images and Text Boxes - ``<img>` - 將圖片放入 thumbnails 目錄下 - 圖片的一些樣式控制 - `width`, `height` 長寬比問題 - `object-fit` - contain 整張圖按比例縮放，整張圖顯示出來 - cover 整張圖按比例縮放到最大，多的會裁掉 - `object-position` 　 ## Lesson8. CSS Display Property 3 types of elements: - block element (takes up the entire line) - inline-block element (only takes up as much space as needed) - inline element (appears within a line of text ) `display` 屬性 ## Lesson9. The div Element - `<div>` just a box, can contain other elements, is a **container** - ## Lesson10. Nested Layouts Technique Nested layouts technique - vertical - horizontal google draw ## Lesson11. CSS Grid inline-block 和 inline-block 中間會有空白 - `display: grid` - `grid-template-columns`, `1fr 2fr` ratio of free space - `column-gap` - `row-gap` ## Lesson12. Flexbox - `display: flex` - `flex-direction` - `flex: 1` 用在 flexbox 內的項目屬性和 gird 的 1fr 類似 - `justify-content` - `align-items` ## Lesson13. Nested Flexbox ## Lesson14. CSS Position - `position: static` 是預設值 - `position: fixed`，`top`、`bottom`、`left`、`right` 搭配 `width`、`height` - `fixed` 東西是 float 在上面 ## Lesson15. Position Absolute and Relative ## Lesson16. Finish the Project ## Lesson17. More CSS Features