2024年8月29日星期四

CSS 是什麼呢？與 HTML 有什麼關係?

 

在現代網頁設計中，CSS（Cascading Style Sheets）扮演著至關重要的角色。它不僅是用來美化網頁的工具，還能使網頁變得更加靈活和適應不同設備。本文將從基本到進階，提供詳細的 CSS 實例教學，讓大家有初步了解。

CSS 有什麼用?

CSS 是用來設計和控制網頁外觀的樣式表語言。它通過設置元素的顏色、字體、邊距等，讓網頁變得更具吸引力。CSS 的副檔名是 .css，通常與 HTML 文件一起使用。

基本範例： 假設你有一篇文章，並希望修改主標題的顏色。以下是如何使用 CSS 來達成這個目的：

HTML：


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 基本範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>這是一個主標題</h1>
</body>

styles.css：

/* styles.css */
h1 {
  color: blue; /* 將主標題顏色設為藍色 */
}

在這個例子中，我們將 h1 標籤的顏色設置為藍色。這樣，所有使用 h1 標籤的文本都會以藍色顯示。

CSS 與 HTML 的搭配方式

有兩種主要方式將 CSS 應用到 HTML 文件中：

  1. 內聯樣式（Inline Styles）直接在 HTML 標籤中使用 style 屬性設置樣式。這種方法適合簡單的樣式修改，但不適合大規模應用。範例：html複製程式碼<h1 style="color: blue;">這是藍色的主標題</h1>
  2. 外部樣式表（External Stylesheets）將 CSS 代碼寫入單獨的 .css 檔案中，然後在 HTML 文件中使用 <link> 標籤引入。這種方法更為整潔且易於維護，適合大規模的樣式管理。HTML：html複製程式碼<link rel="stylesheet" href="styles.css"> styles.css：css複製程式碼h1 { color: blue; /* 將主標題顏色設為藍色 */ }

CSS 的實際應用

1. 基本文字樣式

目標： 修改段落文字的顏色、字體和大小。

HTML：


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字樣式範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="intro">這是一個介紹 CSS 的段落。</p>
</body>

styles.css：

/* styles.css */
.intro {
  color: #333; /* 深灰色 */
  font-family: 'Arial', sans-serif; /* 字體 */
  font-size: 16px; /* 字體大小 */
  line-height: 1.5; /* 行高 */
}

我們定義了一個 .intro 類別來設置段落文字的顏色、字體、字體大小和行高。這樣，<p> 元素的文字會以深灰色顯示，字體為 Arial，字體大小為 16 像素，行高為 1.5。

2. 背景和邊框

目標： 設置一個區塊元素的背景顏色、邊框和內邊距。

HTML：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景和邊框範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">
        <h2>標題</h2>
        <p>這是一個有背景顏色和邊框的區塊。</p>
    </div>
</body>

styles.css：

/* styles.css */
.box {
  background-color: #f4f4f4; /* 背景顏色 */
  border: 2px solid #ccc; /* 邊框 */
  padding: 20px; /* 內邊距 */
  margin: 20px; /* 外邊距 */
}

.box 類別用來設置 div 元素的背景顏色、邊框、內邊距和外邊距。background-color 設置了背景顏色，border 設置了邊框的樣式，padding 和 margin 分別設置了內邊距和外邊距。

3. 布局和對齊

目標： 使用 Flexbox 來水平和垂直居中對齊內容。

HTML：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">居中對齊</div>
    </div>
</body>

styles.css：

/* styles.css */
.container {
  display: flex;
  justify-content: center; /* 水平居中對齊 */
  align-items: center; /* 垂直居中對齊 */
  height: 100vh; /* 使容器佔滿整個視口高度 */
}

.item {
  background-color: #007BFF; /* 背景顏色 */
  color: #fff; /* 文字顏色 */
  padding: 20px; /* 內邊距 */
  border-radius: 8px; /* 邊角圓角 */
}

我們使用 Flexbox 來對 div 元素進行水平和垂直居中對齊。display: flex 啟用 Flexbox 佈局，justify-content: center 和 align-items: center 分別使容器內的項目在水平方向和垂直方向上居中對齊。

4. 響應式設計

目標： 創建一個響應式的網頁佈局，使其在不同設備上自適應顯示。

HTML：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>響應式設計範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>響應式網站</h1>
    </header>
    <main>
        <div class="grid">
            <div class="card">卡片 1</div>
            <div class="card">卡片 2</div>
            <div class="card">卡片 3</div>
        </div>
    </main>
</body>

styles.css：

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #007BFF;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 響應式網格布局 */
  gap: 10px; /* 卡片之間的間距 */
  padding: 20px;
}

.card {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

在這個例子中，我們使用 CSS Grid 來創建一個響應式的網格佈局。grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 使得網格內的卡片元素在不同螢幕寬度下自動調整列數，確保內容能夠適應不同的設備屏幕。

使用 Web Tools Console 進行渲染檢測

使用 Web 開發工具（通常稱為 Web Tools Console）來進行 CSS 和 HTML 渲染檢測是現代前端開發的一個關鍵技能。這些工具可以幫助你即時查看和調整 HTML 和 CSS，並在開發過程中進行即時的樣式和佈局調整。以下是如何使用 Web Tools Console 來進行 CSS 和 HTML 渲染檢測的詳細指南：

1. 開啟 Web Tools Console

Web Tools Console 通常是瀏覽器內建的開發工具，支持的瀏覽器包括 Google Chrome、Mozilla Firefox、Microsoft Edge 和 Safari。你可以通過以下方式打開這些工具：

  • Google Chrome：按 F12 鍵或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）。
  • Mozilla Firefox：按 F12 鍵或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）。
  • Microsoft Edge：按 F12 鍵或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）。
  • Safari：先啟用開發者模式（前往 Safari > 偏好設置 > 高級 > 顯示開發者菜單），然後按 Cmd+Option+I。

2. 使用 Elements 面板進行 HTML 和 CSS 檢測

2.1 查看和編輯 HTML

  1. 選擇 Elements 面板： 打開 Web Tools Console，選擇 "Elements"（或 "檢查"）面板。在這個面板中，你可以看到頁面的 HTML 結構和其對應的 CSS 樣式。
  2. 查看 HTML 結構： 在 Elements 面板中，你可以展開和收起 HTML 標籤，查看頁面的 DOM 結構。這樣可以檢查和分析頁面元素的結構和層級。
  3. 編輯 HTML： 右鍵單擊要編輯的 HTML 元素，選擇 "Edit as HTML"（或 "編輯 HTML"），你可以直接在這裡修改 HTML 代碼。這些更改是即時的，並會反映在頁面上。

2.2 查看和編輯 CSS

  1. 選擇 CSS 規則： 當你選中某個 HTML 元素時，右側的 "Styles"（或 "樣式"）面板會顯示該元素的 CSS 規則。在這裡，你可以看到所有應用於該元素的 CSS 樣式，包括來自外部樣式表的樣式。
  2. 編輯 CSS： 在 "Styles" 面板中，你可以點擊並編輯現有的 CSS 規則。修改後，頁面上的變化會即時顯示。你還可以添加新的 CSS 規則來試驗樣式變化。
  3. 檢查樣式來源： 在 "Styles" 面板中，你可以查看 CSS 規則的來源文件及行號。這有助於追蹤樣式的來源，方便進一步調整。

3. 使用 Console 面板進行即時調試

3.1 查看和修改變數

  1. 選擇 Console 面板： 選擇 "Console" 面板，你可以在這裡執行 JavaScript 代碼來查看和修改頁面元素的樣式和屬性。
  2. 使用 JavaScript 操作樣式： 例如，你可以使用以下代碼即時修改某個元素的樣式：javascript複製程式碼document.querySelector('h1').style.color = 'red'; 這段代碼會將頁面上第一個 <h1> 標籤的文字顏色改為紅色。

4. 使用 Network 面板檢查樣式文件

4.1 查看樣式文件的加載情況

  1. 選擇 Network 面板： 在 Web Tools Console 中選擇 "Network" 面板。
  2. 加載和檢查樣式文件： 刷新頁面後，你可以看到所有加載的資源，包括 CSS 文件。點擊 CSS 文件，你可以查看其內容，確保正確加載並應用樣式。

5. 使用 Device Mode 進行響應式測試

5.1 切換到響應式模式

  1. 啟用 Device Mode： 在 Elements 面板的頂部，點擊 "Toggle Device Toolbar"（或類似的設備圖示），可以切換到響應式模式。
  2. 測試不同設備和屏幕尺寸： 使用設備工具條上的選擇框來模擬不同的設備和屏幕尺寸。這有助於檢查頁面在各種設備上的顯示效果，確保響應式設計的效果良好。
使用 Web Tools Console 進行 CSS 和 HTML 渲染檢測可以顯著提升前端開發的效率。你可以即時查看和編輯 HTML 和 CSS，調試樣式問題，檢查網絡資源，以及進行響應式測試。掌握這些工具的使用方法，不僅可以幫助你快速發現和修正問題，還能讓你更好地理解網頁的渲染過程和樣式應用。

總結

CSS 是網頁設計中的核心技術，能夠將靜態的 HTML 內容轉變為美觀且功能強大的網頁。從基礎的文字樣式到複雜的布局和響應式設計，掌握 CSS 能夠顯著提升你的網頁設計技能。希望這篇文章通過詳細的實例和解釋，能夠幫助你更好地理解和應用 CSS，讓你的網頁設計更加出色和專業。


Ref: samkung-webdesign.com


於
標籤：

沒有留言:

發佈留言

訂閱： 發佈留言 (Atom)

【一日完成報告】屋宇署應用無人機分析樓宇外牆，提升工作效率

無人機技術正快速融入香港的樓宇檢測與執法工作，尤其是在樓高七層或以上的建築物外牆分析方面。屋宇署近年來運用了無人機來進行檢測工作，無人機能拍攝高解像度的影像，並將其傳送至雲端平台，然後由人工智能分析外牆的破損情況，根據損壞程度進行分類與評估。這種技術革新大幅提高了檢測速度，以往需...

  • Figma — 設計界的 Google Drive 協作神器
      15 8 月 隨著設計思維和 UX 設計的興起，設計工具也在不斷演變。傳統的設計工具各有其專長，例如 Sketch 在線框圖和 UI 設計方面表現出色，InVision 則擅長展示簡易原型（clickthroughs），而 Zeplin 則能夠將設計規格精準地傳達給開發人員。...