Lecture 03 - CSS和Bulma入門
什麼是CSS和為什麼要用
在您之前的Lab 02 HTML任務中,網站看起來漂亮嗎?
這些網站是如何呈現的?
演示:
CSS(層疊樣式表)
也稱為:CSS可用於非常基本的文檔文本樣式
HTML和CSS的不同?
HTML
所有內容和文本
例如:人體骨骼和肌肉 💀
CSS
所有樣式和UI的外觀
例如:人體皮膚和頭髮 🎅
如何快速展示(內部方法)
如何快速展示(外部方法)
index.html
index.css
快速示範如何(內嵌方法)
我們偏好哪種 CSS 方法?
內部 CSS
半推薦 👍
外部 CSS
最推薦 👍👍
行內 CSS
不推薦 🤚
練習課程(5 分鐘)
試著在一個文件夾中創建一個 index.html
和 index.css
,然後將這些內容複製到每個文件夾中。
index.html
index.css
介紹 id
和 class
id
和 class
像上面的例子,您可能會看到以下代碼:
那麼,什麼是 id
和 class
?
id
和 class
id
和 class
在一般的介紹中,它說:
id
屬性為 HTML 元素指定唯一的id
。id
屬性的值在HTML
文檔中必須是唯一的。
class
屬性通常用於指向樣式表中的class
名稱。它也可以被 JavaScript 用來訪問和操作具有特定class
名稱的元素。
即:我們使用 id 和 class 來指向我們想要對其應用某些內容的元素。 (例如:應用一些樣式、事件、控制相關元素等等)
id
和 class
的不同之處
id
和 class
的不同之處id
是唯一的標籤,它只能引用一個元素。class
可以同時應用於許多元素。
正確 ⭕
錯誤 ❌(不能重複使用相同的 id
)
更多正確例子
正確 ⭕
正確 ⭕
class
可以同時套用到多個元素上,而id
僅能套用到一個元素。
正確 ⭕
在上面的範例中,"Hello tom" 元素可以使用 school
和 boxes
兩個 class
的樣式。
錯誤 ❌ (id
不可以重複使用)
如何使用 id
和 class
?
id
和 class
?id
id
要連結一個 id
,我們使用 #
來表示以下的標籤是一個 id
的參考。
index.css
index.html
class
class
要連結一個 class
,我們在 CSS 中使用 .
來表示接下來的標籤是一個 class
的引用。
index.css
index.html
CSS 檔案
所有的 CSS 樣式都會被放在一起。
CSS 可以做什麼?
📚 顏色樣式
🖼 佈局樣式
✒ 文字樣式
🎠 動畫
🧰 大小和高度
📅 顯示方式
📊 還有更多...
CSS 無法做什麼?
邏輯控制
處理互動事件
控制當某些事情發生時的顯示方式
這些是 JavaScript
的功能,我們將在下一課學習 JavaScript
。
CSS 使用注意事項
有些標籤可能不常用、已廢棄或是相對較新,因此我們無法在短時間內介紹所有標籤。
根據需求,您應該根據自己的需求進行谷歌搜索/查找文檔。即使是高級程序員也無法記住所有的語法和代碼。不要試圖記住所有的語法,而是概念上理解 CSS 可以應用的格式。
常用文本相關
更多: https://developer.mozilla.org/en-US/docs/Web/CSS/font https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
通用的背景顏色和其他樣式
通用佈局實用程序
margin
(外邊框): https://www.w3schools.com/css/css_margin.asppadding
(内邊框): https://www.w3schools.com/css/css_padding.aspHeight, Width
(高度、寬度): https://www.w3schools.com/css/css_dimension.aspborder
(邊框): https://www.w3schools.com/css/css_border.aspfloat
(位置): https://www.w3schools.com/css/css_float.asp
通用佈局實用程序(更多)
position
(位置) : https://www.w3schools.com/css/css_positioning.aspdisplay
(現出) : https://www.w3schools.com/css/css_display_visibility.aspz-index
(層): https://www.w3schools.com/css/css_z-index.asp
通用佈局實用程序(更多)
display: flex
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
https://www.casper.tw/css/2017/07/21/css-flex/
display flex
演示
display flex
演示display flex
練習遊戲
display flex
練習遊戲介紹 Bulma
Bulma 是一個免費、開源的框架,提供了現成的前端元件,可以輕鬆地組合來建構響應式網頁介面。
https://bulma.io/documentation/overview/start/
為什麼要用 Bulma
提供良好的元件可供使用
有好看的介面
容易建構響應式網站 (responsive website)
寫少量的 CSS
在 HTML 中安裝 Bulma
Columns (列)
Elements (元素)
Button (按鈕): https://bulma.io/documentation/elements/button/
Title (標題): https://bulma.io/documentation/elements/title/
更多: https://bulma.io/documentation/elements/
Components (部件)
Navbar (導航欄): https://bulma.io/documentation/components/navbar/
更多: https://bulma.io/documentation/components/
Lab 01 - 裝飾自我介紹頁面
還記得之前在 lecture 02 的 自我介紹 頁面嗎? 現在,讓我們使用更多的 CSS
和 bulma
來美化它 !
以下是您的頁面應該添加的一些內容:
👩🎨 文本顏色 和 背景顏色 (
Text Color
andbackground color
)🎴 字體大小,文本對齊 (
Font size
,text align
)🎛 邊框 (
Border
)📣 至少兩個來自 bulma 的元素 (
bulma
)
以下是您可以添加到您的頁面的一些內容:
📦 更多的 bulma 組件和佈局
🛒 任何您能想到的更多內容...
Last updated