# Lecture 03 - CSS和Bulma入門 ## 什麼是CSS和為什麼要用在您之前的Lab 02 HTML任務中，網站看起來漂亮嗎？ *** ## 這些網站是如何呈現的？演示： [https://81-web.com/ ](https://81-web.com/) *** ## CSS（層疊樣式表） #### 也稱為：CSS可用於非常基本的文檔文本樣式 *** ![bg w:1250](https://www.interviewbit.com/blog/wp-content/uploads/2021/10/HTML-and-CSS.png) *** ## HTML和CSS的不同？ ### HTML 所有內容和文本例如：人體骨骼和肌肉 💀 ### CSS 所有樣式和UI的外觀例如：人體皮膚和頭髮 🎅 *** ## 如何快速展示（內部方法） ```html Document

I am an apple.

``` *** ### 如何快速展示（外部方法） `index.html` ```html

I am an apple.

``` `index.css` ```css .apple { color: red; text-align: center; } ``` *** ### 快速示範如何（內嵌方法） ```html Document

I am an apple.

``` *** ### 我們偏好哪種 CSS 方法？內部 CSS 半推薦 👍 外部 CSS 最推薦 👍👍 行內 CSS 不推薦 🤚 *** ## 練習課程（5 分鐘）試著在一個文件夾中創建一個 `index.html` 和 `index.css`，然後將這些內容複製到每個文件夾中。 `index.html` ```html

Hello schools.

``` `index.css` ```css .school { color: #FF00FF; text-align: right; } ``` *** ## 介紹 `id` 和 `class` 像上面的例子，您可能會看到以下代碼： ```html

Hello schools.

I am an apple.

``` 那麼，什麼是 `id` 和 `class`？ *** ### `id` 和 `class` 在一般的介紹中，它說： > `id` 屬性為 HTML 元素指定唯一的 `id`。`id` 屬性的值在 `HTML` 文檔中必須是唯一的。 > `class` 屬性通常用於指向樣式表中的 `class` 名稱。它也可以被 JavaScript 用來訪問和操作具有特定 `class` 名稱的元素。即：我們使用 id 和 class 來指向我們想要對其應用某些內容的元素。（例如：應用一些樣式、事件、控制相關元素等等） *** ### `id` 和 `class` 的不同之處 1. `id` 是唯一的標籤，它只能引用一個元素。 `class` 可以同時應用於許多元素。正確 ⭕ ```html

I am an apple.

Hello schools 3.

Hello schools 2.

``` 錯誤 ❌（不能重複使用相同的 `id`） ```html

I am an apple.

Hello schools 1.

Hello schools 3.

Hello schools 2.

``` *** ### 更多正確例子正確 ⭕ ```html

I am an apple.

Hello schools 3.

Hello schools 2.

``` 正確 ⭕ ```html

I am an apple.

Hello schools 3.

Hello schools 2.

``` *** 2. `class` 可以同時套用到多個元素上，而 `id` 僅能套用到一個元素。正確 ⭕ ```html

Hello schools 2.

Hello tom

``` 在上面的範例中，"Hello tom" 元素可以使用 `school` 和 `boxes` 兩個 `class` 的樣式。錯誤 ❌ （`id` 不可以重複使用） ```html

I am an apple.

``` ## 如何使用 `id` 和 `class`？ ### `id` 要連結一個 `id`，我們使用 `#` 來表示以下的標籤是一個 `id` 的參考。 `index.css` ```css #apple { color: red; text-align: center; } #orange { color: yellow; } ``` `index.html` ```html

I am an apple.

I am an orange?

``` *** ### `class` 要連結一個 `class`，我們在 CSS 中使用 `.` 來表示接下來的標籤是一個 `class` 的引用。
`index.css` ```css .apple-class { color: red; text-align: center; } .box { font-size: 30px } ``` `index.html` ```html

I am an apple.

I am an apple also

``` *** ## CSS 檔案所有的 CSS 樣式都會被放在一起。 ```css .apple-class { color: red; text-align: center; } .box { font-size: 30px } #apple { color: red; text-align: center; } #orange { color: yellow; } ``` *** ### CSS 可以做什麼？ * 📚 顏色樣式 * 🖼 佈局樣式 * ✒ 文字樣式 * 🎠 動畫 * 🧰 大小和高度 * 📅 顯示方式 * 📊 還有更多... *** ### CSS 無法做什麼？ * 邏輯控制 * 處理互動事件 * 控制當某些事情發生時的顯示方式這些是 `JavaScript` 的功能，我們將在下一課學習 `JavaScript`。 *** ## CSS 使用注意事項 1. 有些標籤可能不常用、已廢棄或是相對較新，因此我們無法在短時間內介紹所有標籤。 2. 根據需求，您應該根據自己的需求進行谷歌搜索/查找文檔。即使是高級程序員也無法記住所有的語法和代碼。不要試圖記住所有的語法，而是概念上理解 CSS 可以應用的格式。常用文本相關 ```css .some-class { color: blue; text-align: center; font-size: 100px; font-weight: 600; font-family: 'Courier New', Courier, monospace; } ``` 更多: 通用的背景顏色和其他樣式 ```css .some-class { background-color: #123F02; text-shadow: 2px 2px; box-shadow: 10px 10px; } ``` #### 通用佈局實用程序 * `margin` (外邊框): * `padding` (内邊框): * `Height, Width` (高度、寬度): * `border` (邊框): * `float` (位置): #### 通用佈局實用程序(更多) * `position` (位置) : * `display` (現出) : * `z-index` (層): #### 通用佈局實用程序(更多) `display: flex` `justify-content: flex-start | flex-end | center | space-between | space-around;` `align-items: flex-start | flex-end | center | baseline | stretch;` ### `display flex` 演示 ### `display flex` 練習遊戲 *** ## 介紹 Bulma Bulma 是一個免費、開源的框架，提供了現成的前端元件，可以輕鬆地組合來建構響應式網頁介面。 *** ## 為什麼要用 Bulma * 提供良好的元件可供使用 * 有好看的介面 * 容易建構響應式網站 (responsive website) * 寫少量的 CSS ### 在 HTML 中安裝 Bulma ```html Hello Bulma!

Hello World

My first website with Bulma!

``` ### Columns (列) * ### Elements (元素) * Button (按鈕): * Box (盒子): * Title (標題): 更多: *** ### Components (部件) * Navbar (導航欄): * Card (卡片): 更多: *** ## Lab 01 - 裝飾自我介紹頁面還記得之前在 lecture 02 的自我介紹頁面嗎？現在，讓我們使用更多的 `CSS` 和 `bulma` 來美化它！以下是您的頁面應該添加的一些內容： * 👩‍🎨 文本顏色和背景顏色 (`Text Color` and `background color`) * 🎴 字體大小，文本對齊 (`Font size`, `text align`) * 🎛 邊框 (`Border`) * 📣 至少兩個來自 bulma 的元素 (`bulma`) 以下是您可以添加到您的頁面的一些內容： * 📦 更多的 bulma 組件和佈局 * 🛒 任何您能想到的更多內容...