Life is Possible - Web Apps workshop 生命教育手機程式工作坊

Lecture 03 - CSS和Bulma入門

什麼是CSS和為什麼要用

在您之前的Lab 02 HTML任務中，網站看起來漂亮嗎？

這些網站是如何呈現的？

演示：

https://81-web.com/

https://1guu.jp/

CSS（層疊樣式表）

也稱為：CSS可用於非常基本的文檔文本樣式

HTML和CSS的不同？

HTML

所有內容和文本

例如：人體骨骼和肌肉 💀

CSS

所有樣式和UI的外觀

例如：人體皮膚和頭髮 🎅

如何快速展示（內部方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #apple {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 id="apple">I am an apple.</h1>
</body>
</html>

如何快速展示（外部方法）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Skipped -->
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="apple">I am an apple.</h1>
</body>
</html>

index.css

.apple {
    color: red;
    text-align: center;
}

快速示範如何（內嵌方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <h1 style="color: red; text-align: center;">
        I am an apple.
    </h1>
</body>
</html>

我們偏好哪種 CSS 方法？

內部 CSS

半推薦 👍

外部 CSS

最推薦 👍👍

行內 CSS

不推薦 🤚

練習課程（5 分鐘）

試著在一個文件夾中創建一個 index.html 和 index.css，然後將這些內容複製到每個文件夾中。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta 
      name="viewport" 
      content="width=device-width, initial-scale=1.0"
    >
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="school">Hello schools.</h1>
</body>
</html>

index.css

.school {
    color: #FF00FF;
    text-align: right;
}

介紹 `id` 和 `class`

像上面的例子，您可能會看到以下代碼：

<h1 class="school">Hello schools.</h1>
<h1 id="apple">I am an apple.</h1>

那麼，什麼是 id 和 class？

`id` 和 `class`

在一般的介紹中，它說：

id 屬性為 HTML 元素指定唯一的 id。id 屬性的值在 HTML 文檔中必須是唯一的。

class 屬性通常用於指向樣式表中的 class 名稱。它也可以被 JavaScript 用來訪問和操作具有特定 class 名稱的元素。

即：我們使用 id 和 class 來指向我們想要對其應用某些內容的元素。（例如：應用一些樣式、事件、控制相關元素等等）

`id` 和 `class` 的不同之處

id 是唯一的標籤，它只能引用一個元素。 class 可以同時應用於許多元素。

正確 ⭕

<h1 id="apple">I am an apple.</h1>
<h3 class="school">Hello schools 3.</h3>
<h2 class="school">Hello schools 2.</h2>

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

<h1 id="apple">I am an apple.</h1>
<h1 id="apple">Hello schools 1.</h1>

<h3 class="school">Hello schools 3.</h3>
<h2 class="school">Hello schools 2.</h2>

如何使用 `id` 和 `class`？

`id`

要連結一個 id，我們使用 # 來表示以下的標籤是一個 id 的參考。

index.css

#apple {
    color: red;
    text-align: center;
}

#orange {
    color: yellow;
}

index.html

<h1 id="apple">I am an apple.</h1>
<h1 id="orange">I am an orange?</h1>

`class`

要連結一個 class，我們在 CSS 中使用 . 來表示接下來的標籤是一個 class 的引用。

index.css

.apple-class {
    color: red;
    text-align: center;
}

.box {
    font-size: 30px
}

index.html

<div class="box">
  I am an apple.
</div>

<h1 class="apple-class box">
  I am an apple also
</h1>

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 使用注意事項

有些標籤可能不常用、已廢棄或是相對較新，因此我們無法在短時間內介紹所有標籤。
根據需求，您應該根據自己的需求進行谷歌搜索/查找文檔。即使是高級程序員也無法記住所有的語法和代碼。不要試圖記住所有的語法，而是概念上理解 CSS 可以應用的格式。

常用文本相關

.some-class {
  color: blue;
  text-align: center;
  font-size: 100px;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
}

更多: https://developer.mozilla.org/en-US/docs/Web/CSS/font https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

通用的背景顏色和其他樣式

.some-class {
  background-color: #123F02;
  text-shadow: 2px 2px;
  box-shadow: 10px 10px;
}

介紹 Bulma

Bulma 是一個免費、開源的框架，提供了現成的前端元件，可以輕鬆地組合來建構響應式網頁介面。

https://bulma.io/documentation/overview/start/

為什麼要用 Bulma

提供良好的元件可供使用
有好看的介面
容易建構響應式網站 (responsive website)
寫少量的 CSS

在 HTML 中安裝 Bulma

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Columns (列)

https://bulma.io/documentation/columns/basics/

Elements (元素)

Button (按鈕): https://bulma.io/documentation/elements/button/
Box (盒子): https://bulma.io/documentation/elements/box/
Title (標題): https://bulma.io/documentation/elements/title/

Components (部件)

Navbar (導航欄): https://bulma.io/documentation/components/navbar/
Card (卡片): https://bulma.io/documentation/components/card/

更多: https://bulma.io/documentation/components/

Lab 01 - 裝飾自我介紹頁面

還記得之前在 lecture 02 的自我介紹頁面嗎？現在，讓我們使用更多的 CSS 和 bulma 來美化它！

以下是您的頁面應該添加的一些內容：

👩‍🎨 文本顏色和背景顏色 (Text Color and background color)
🎴 字體大小，文本對齊 (Font size, text align)
🎛 邊框 (Border)
📣 至少兩個來自 bulma 的元素 (bulma)

以下是您可以添加到您的頁面的一些內容：

📦 更多的 bulma 組件和佈局
🛒 任何您能想到的更多內容...

PreviousLecture 02 - HTML 入門 NextLecture 04 - JavaScript 簡介

Last updated 1 year ago

什麼是CSS和為什麼要用

在您之前的Lab 02 HTML任務中，網站看起來漂亮嗎？

這些網站是如何呈現的？

演示：

https://81-web.com/

https://1guu.jp/

CSS（層疊樣式表）

也稱為：CSS可用於非常基本的文檔文本樣式

HTML和CSS的不同？

HTML

所有內容和文本

例如：人體骨骼和肌肉 💀

CSS

所有樣式和UI的外觀

例如：人體皮膚和頭髮 🎅

如何快速展示（內部方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #apple {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 id="apple">I am an apple.</h1>
</body>
</html>

如何快速展示（外部方法）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Skipped -->
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="apple">I am an apple.</h1>
</body>
</html>

index.css

.apple {
    color: red;
    text-align: center;
}

快速示範如何（內嵌方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <h1 style="color: red; text-align: center;">
        I am an apple.
    </h1>
</body>
</html>

我們偏好哪種 CSS 方法？

內部 CSS

半推薦 👍

外部 CSS

最推薦 👍👍

行內 CSS

不推薦 🤚

練習課程（5 分鐘）

試著在一個文件夾中創建一個 index.html 和 index.css，然後將這些內容複製到每個文件夾中。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta 
      name="viewport" 
      content="width=device-width, initial-scale=1.0"
    >
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="school">Hello schools.</h1>
</body>
</html>

index.css

.school {
    color: #FF00FF;
    text-align: right;
}

介紹 `id` 和 `class`

像上面的例子，您可能會看到以下代碼：

<h1 class="school">Hello schools.</h1>
<h1 id="apple">I am an apple.</h1>

那麼，什麼是 id 和 class？

`id` 和 `class`

在一般的介紹中，它說：

id 屬性為 HTML 元素指定唯一的 id。id 屬性的值在 HTML 文檔中必須是唯一的。

class 屬性通常用於指向樣式表中的 class 名稱。它也可以被 JavaScript 用來訪問和操作具有特定 class 名稱的元素。

即：我們使用 id 和 class 來指向我們想要對其應用某些內容的元素。（例如：應用一些樣式、事件、控制相關元素等等）

`id` 和 `class` 的不同之處

id 是唯一的標籤，它只能引用一個元素。 class 可以同時應用於許多元素。

正確 ⭕

<h1 id="apple">I am an apple.</h1>
<h3 class="school">Hello schools 3.</h3>
<h2 class="school">Hello schools 2.</h2>

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

<h1 id="apple">I am an apple.</h1>
<h1 id="apple">Hello schools 1.</h1>

<h3 class="school">Hello schools 3.</h3>
<h2 class="school">Hello schools 2.</h2>

如何使用 `id` 和 `class`？

`id`

要連結一個 id，我們使用 # 來表示以下的標籤是一個 id 的參考。

index.css

#apple {
    color: red;
    text-align: center;
}

#orange {
    color: yellow;
}

index.html

<h1 id="apple">I am an apple.</h1>
<h1 id="orange">I am an orange?</h1>

`class`

要連結一個 class，我們在 CSS 中使用 . 來表示接下來的標籤是一個 class 的引用。

index.css

.apple-class {
    color: red;
    text-align: center;
}

.box {
    font-size: 30px
}

index.html

<div class="box">
  I am an apple.
</div>

<h1 class="apple-class box">
  I am an apple also
</h1>

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 使用注意事項

有些標籤可能不常用、已廢棄或是相對較新，因此我們無法在短時間內介紹所有標籤。
根據需求，您應該根據自己的需求進行谷歌搜索/查找文檔。即使是高級程序員也無法記住所有的語法和代碼。不要試圖記住所有的語法，而是概念上理解 CSS 可以應用的格式。

常用文本相關

.some-class {
  color: blue;
  text-align: center;
  font-size: 100px;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
}

更多: https://developer.mozilla.org/en-US/docs/Web/CSS/font https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

通用的背景顏色和其他樣式

.some-class {
  background-color: #123F02;
  text-shadow: 2px 2px;
  box-shadow: 10px 10px;
}

通用佈局實用程序

margin (外邊框): https://www.w3schools.com/css/css_margin.asp
padding (内邊框): https://www.w3schools.com/css/css_padding.asp
Height, Width (高度、寬度): https://www.w3schools.com/css/css_dimension.asp
border (邊框): https://www.w3schools.com/css/css_border.asp
float (位置): https://www.w3schools.com/css/css_float.asp

通用佈局實用程序(更多)

position (位置) : https://www.w3schools.com/css/css_positioning.asp
display (現出) : https://www.w3schools.com/css/css_display_visibility.asp
z-index (層): https://www.w3schools.com/css/css_z-index.asp

通用佈局實用程序(更多)

https://www.casper.tw/css/2017/07/21/css-flex/

`display flex` 演示

https://grid.malven.co/

`display flex` 練習遊戲

https://flexboxfroggy.com/

介紹 Bulma

Bulma 是一個免費、開源的框架，提供了現成的前端元件，可以輕鬆地組合來建構響應式網頁介面。

https://bulma.io/documentation/overview/start/

為什麼要用 Bulma

提供良好的元件可供使用
有好看的介面
容易建構響應式網站 (responsive website)
寫少量的 CSS

在 HTML 中安裝 Bulma

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Columns (列)

https://bulma.io/documentation/columns/basics/

Elements (元素)

Button (按鈕): https://bulma.io/documentation/elements/button/
Box (盒子): https://bulma.io/documentation/elements/box/
Title (標題): https://bulma.io/documentation/elements/title/

Components (部件)

Navbar (導航欄): https://bulma.io/documentation/components/navbar/
Card (卡片): https://bulma.io/documentation/components/card/

更多: https://bulma.io/documentation/components/

Lab 01 - 裝飾自我介紹頁面

還記得之前在 lecture 02 的自我介紹頁面嗎？現在，讓我們使用更多的 CSS 和 bulma 來美化它！

以下是您的頁面應該添加的一些內容：

👩‍🎨 文本顏色和背景顏色 (Text Color and background color)
🎴 字體大小，文本對齊 (Font size, text align)
🎛 邊框 (Border)
📣 至少兩個來自 bulma 的元素 (bulma)

以下是您可以添加到您的頁面的一些內容：

📦 更多的 bulma 組件和佈局
🛒 任何您能想到的更多內容...

什麼是CSS和為什麼要用

這些網站是如何呈現的？

CSS（層疊樣式表）

也稱為：CSS可用於非常基本的文檔文本樣式

HTML和CSS的不同？

HTML

CSS

如何快速展示（內部方法）

如何快速展示（外部方法）

快速示範如何（內嵌方法）

我們偏好哪種 CSS 方法？

練習課程（5 分鐘）

介紹 id 和 class

id 和 class

id 和 class 的不同之處

更多正確例子

如何使用 id 和 class？

id

class

CSS 檔案

CSS 可以做什麼？

CSS 無法做什麼？

CSS 使用注意事項

通用佈局實用程序

通用佈局實用程序(更多)

通用佈局實用程序(更多)

display flex 演示

display flex 練習遊戲

介紹 Bulma

為什麼要用 Bulma

在 HTML 中安裝 Bulma

Columns (列)

Elements (元素)

Components (部件)

Lab 01 - 裝飾自我介紹頁面

什麼是CSS和為什麼要用

這些網站是如何呈現的？

CSS（層疊樣式表）

也稱為：CSS可用於非常基本的文檔文本樣式

HTML和CSS的不同？

HTML

CSS

如何快速展示（內部方法）

如何快速展示（外部方法）

快速示範如何（內嵌方法）

我們偏好哪種 CSS 方法？

練習課程（5 分鐘）

介紹 id 和 class

id 和 class

id 和 class 的不同之處

更多正確例子

如何使用 id 和 class？

id

class

CSS 檔案

CSS 可以做什麼？

CSS 無法做什麼？

CSS 使用注意事項

通用佈局實用程序

通用佈局實用程序(更多)

通用佈局實用程序(更多)

display flex 演示

display flex 練習遊戲

介紹 Bulma

為什麼要用 Bulma

在 HTML 中安裝 Bulma

Columns (列)

Elements (元素)

Components (部件)

Lab 01 - 裝飾自我介紹頁面

介紹 `id` 和 `class`

`id` 和 `class`

`id` 和 `class` 的不同之處

如何使用 `id` 和 `class`？

`id`

`class`

`display flex` 演示

`display flex` 練習遊戲

介紹 `id` 和 `class`

`id` 和 `class`

`id` 和 `class` 的不同之處

如何使用 `id` 和 `class`？

`id`

`class`

`display flex` 演示

`display flex` 練習遊戲