CSS-6: 進階表格、屬性選擇器與變數使用全解析
在本章節，我們將製作圖書館庫存表格，複習關於表格的觀念並學習屬性選擇器、變數的觀念。
首先，我們要確立表格的架構。在<table>標籤中，使用<thead>和<tbody>標籤。
<body>
<h1>Book Inventory</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
<th>Frequence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
接著，我們先新增一本書的資訊。分別是書名、作者、分類、狀態、評價、借閱的頻繁度(class="available-1"表示頻繁度低)
<body>
<h1>Book Inventory</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
<th>Frequence</th>
</tr>
</thead>
<tbody>
<tr class="read">
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Fiction</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span></span><span></span><span></span></span></td>
<td class="available-1"></td>
</tr>
</tbody>
</table>
</body>
好，我們再接著新增三本書。
<body>
<h1>Book Inventory</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
<th>Frequence</th>
</tr>
</thead>
<tbody>
<tr class="read">
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Fiction</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span></span><span></span><span></span></span></td>
<td class="available-1"></td>
</tr>
<tr class="to-read">
<td>1984</td>
<td>George Orwell</td>
<td>Dystopian</td>
<td><span class="status">To Read</span></td>
<td><span class="rate two"><span></span><span></span><span></span></span></td>
<td class="available-2"></td>
</tr>
<tr class="in-progress">
<td>Becoming</td>
<td>Michelle Obama</td>
<td>Biography</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate three"><span></span><span></span><span></span></span></td>
<td class="available-3"></td>
</tr>
<tr class="read">
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>Classic</td>
<td><span class="status">Read</span></td>
<td><span class="rate three"><span></span><span></span><span></span></span></td>
<td class="available-4"></td>
</tr>
</tbody>
</table>
</body>
目前版面有點亂，我們初步設定一下樣式。
h1 {
text-align: center;
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
font-family: Arial, sans-serif;
border-collapse: collapse; //記得添加
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
thead {
background-color: #f4f4f4;
}
呈現效果:
接著，我們要介紹屬性選擇器，屬性選擇器用於根據元素的屬性或屬性值來選擇HTML元素。
以下是常見的屬性選擇器:
[attribute]: 選擇帶有指定屬性的所有元素
[type] {
border: 1px solid red;
}
[attribute="value"]: 選擇具有指定屬性和值完全匹配的的元素
// 選擇所有 "type" 屬性完全等於 "text" 的元素
[type="text"] {
background-color: yellow;
}
[attribute~="value"]: 選擇屬性值中包含指定值的元素 (用空格分隔的單詞列表之一)
// 選擇
[class~="button"] {
font-weight: bold;
}
[attribute^="value"]: 選擇屬性值以指定值開頭的元素。
/* 選擇所有 "href" 屬性值以 "https" 開頭的元素 */
[href^="https"] {
color: green;
}
[attribute$="value"]: 選擇屬性值以指定值結尾的元素。
/* 選擇所有 "src" 屬性值以 ".png" 結尾的元素 */
[src$=".png"] {
border: 2px solid blue;
}
[attribute*="value"]: 選擇屬性值中包含指定字串的元素，無論該字串的位置或是否是單獨的單字。
/* 選擇所有 "alt" 屬性中包含 "cat" 的元素 */
[alt*="cat"] {
background-color: lightblue;
}
好，接著我們就可以繼續為表格添加樣式了:
tr[class="read"] {
background-image: linear-gradient(to right, #d4edda, #c3e6cb);
}
tr[class="to-read"] {
background-image: linear-gradient(to right, #fff3cd, #ffeeba);
}
tr[class="in-progress"] {
background-image: linear-gradient(to right, #d1ecf1, #bee5eb);
}
呈現效果:
好，接下來我們要為 Starus 增加邊框效果。
span {
display: inline-block;
}
/* 狀態樣式 */
span[class="status"] {
padding: 5px 10px;
border-radius: 5px;
}
tr[class="read"] span[class="status"] {
border: 1px solid #28a745;
background-image: linear-gradient(to right, #d4edda, #c3e6cb);
}
tr[class="to-read"] span[class="status"] {
border: 1px solid #ffc107;
background-image: linear-gradient(to right, #fff3cd, #ffeeba);
}
tr[class="in-progress"] span[class="status"] {
border: 1px solid #17a2b8;
background-image: linear-gradient(to right, #d1ecf1, #bee5eb);
}
呈現效果:
再接下來，我們要讓 Rate 中呈現可以評分的圓框。為此我們要 選擇所有 <span> 元素，其 class 屬性的值以 "rate" 開頭。而子選擇器 > 表示僅選擇某元素的直接子元素，也就是說: 只有 class 屬性值以 "rate" 開頭的 <span> 父元素的直接子 <span> 元素會被套用樣式。
span[class^="rate"] > span {
width: 15px;
height: 15px;
margin: 0 2px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #e0e0e0;
}
呈現效果:
好，接著我們要為每本書個別設定評分。
span[class~="one"] span:first-child {
background-image: linear-gradient(to right, #ffcccb, #f08080);
}
span[class~="two"] span:nth-child(-n+2) {
background-image: linear-gradient(to right, #ffe4b5, #f5deb3);
}
span[class~="three"] span {
background-image: linear-gradient(to right, #add8e6, #87cefa);
}
- 其中我們對顏色套用了向右漸層的效果。
- 要應用漸層，必須使用
background-image：
呈現效果:
好，最後，我們要介紹變數的觀念: CSS 變數（也稱為 自訂屬性）是一種在 CSS 中定義和使用值的方式，可以讓你更方便地重複使用、維護和管理樣式。
語法:
:root {
--main-color: #3498db;
--font-size: 16px;
--spacing: 10px;
}
:root（表示 HTML 文件的根元素）中，適用於整個頁面。
如何使用變數:
body {
color: var(--main-color);
font-size: var(--font-size);
margin: var(--spacing);
}
有了簡單的認識後，我們就可以為Frequence改變顏色來表示借閱的頻繁程度，首先，先定義好一些顏色變數。
:root {
--color1: #ffb3b3;
--color2: #ff8080;
--color3: #ff4d4d;
--color4: #e60000;
}
接著，我們再個別套用相應的設定。
.available-1 {
background-color: var(--color1);
}
.available-2 {
background-color: var(--color2);
}
.available-3 {
background-color: var(--color3);
}
.available-4 {
background-color: var(--color4);
}
呈現效果:
最後，我們再添加一個 Degree 表示顏色所代表的頻繁程度。
<div id="legend">
<span>Degree</span>
<div id="legend-gradient"></div>
</div>
</body>
#legend-gradient {
width: calc(50% + 20px);
height: 20px;
background-image: linear-gradient(
to right,
var(--color1) 0% 25%, /* 第一段：0% 到 25% */
var(--color2) 25% 50%, /* 第二段：25% 到 50% */
var(--color3) 50% 75%, /* 第三段：50% 到 75% */
var(--color4) 75% 100% /* 第四段：75% 到 100% */
);
}
呈現效果:
3會員
17內容數
在當今數位時代，電資領域人才需求爆發式成長，不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合，這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程，正是進入這個高薪、高需求產業的關鍵！
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
接著我們繼續來談「整合式大綱」、「編劇式大綱」。
❈❈❈
※整合式：
結合「表格式」、「鬆散式」兩者，依劇情片段的份量，或作者是否熟悉該段落，決定是否要寫細節。總之，相當自由！
不過這有點像把大綱當成一種工具書使用，花樣非常多，甚至可以設連結跳轉頁面啊，多半需要一點文書處理的
本文介紹瞭如何寫 HTML 標籤，製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例，讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
HTML 標籤是網頁內容的基礎，透過學習不同的標籤，你可以設計出各式各樣的內容。本文介紹了各種基本的標籤，如標題、段落、修飾樣式、超連結以及區塊等，讓你對 HTML 標籤有更深入的瞭解。
人們對於學習HTML的興趣持續增長，本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程，為讀者提供全方位的學習體驗。
排版微調 VOL.1-詳細解說版
排版微調是我社群的一個系列內容，這篇則是提供給訂閱會員的詳細解說版，會說明為何調整的原因跟我的看法，以及原本設計可能有的問題，如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因。
這邊統整了所有過去發表過關於 QUERY 函式的教學分享，希望可以方便你按照順序閱讀和練習。
QUERY 可以用來查詢、篩選、聚集、排序資料，還可以做張簡易的資料透視表，是我在 Google 試算表上做數據分析、製作報告、製作儀表板時最常用的函式之一，既方便又好用，誠心推薦！
今天紀錄的是因應工作需要而學習的小技能。
我想達到的目標：當欄位裡面出現「寄出」這個關鍵字的時候整欄變色，以辨別該項目的狀態。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
在本章節中，我們將學習JavaScript的基本語法，包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
接著我們繼續來談「整合式大綱」、「編劇式大綱」。
❈❈❈
※整合式：
結合「表格式」、「鬆散式」兩者，依劇情片段的份量，或作者是否熟悉該段落，決定是否要寫細節。總之，相當自由！
不過這有點像把大綱當成一種工具書使用，花樣非常多，甚至可以設連結跳轉頁面啊，多半需要一點文書處理的
本文介紹瞭如何寫 HTML 標籤，製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例，讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
HTML 標籤是網頁內容的基礎，透過學習不同的標籤，你可以設計出各式各樣的內容。本文介紹了各種基本的標籤，如標題、段落、修飾樣式、超連結以及區塊等，讓你對 HTML 標籤有更深入的瞭解。
人們對於學習HTML的興趣持續增長，本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程，為讀者提供全方位的學習體驗。
排版微調 VOL.1-詳細解說版
排版微調是我社群的一個系列內容，這篇則是提供給訂閱會員的詳細解說版，會說明為何調整的原因跟我的看法，以及原本設計可能有的問題，如果你是設計初學者那這份內容會很適合你，因為會很細節的去講解排版原因。
這邊統整了所有過去發表過關於 QUERY 函式的教學分享，希望可以方便你按照順序閱讀和練習。
QUERY 可以用來查詢、篩選、聚集、排序資料，還可以做張簡易的資料透視表，是我在 Google 試算表上做數據分析、製作報告、製作儀表板時最常用的函式之一，既方便又好用，誠心推薦！
今天紀錄的是因應工作需要而學習的小技能。
我想達到的目標：當欄位裡面出現「寄出」這個關鍵字的時候整欄變色，以辨別該項目的狀態。