偽類與偽元素
我們來看一看常見的偽類。
:hover
當使用者將滑鼠懸停在元素上時設定元素的樣式。
我們套用我們之前寫過的按鈕:<input type="submit" value="sing up" />
input[type="submit"] {
display: block;
width: 50%;
margin: 20px auto 0 auto;
padding: 12px;
font-size: 1rem;
font-weight: bold;
color: #fff;
background-color: #007bff; /* 藍色按鈕 */
border: none;
border-radius: 10px;
cursor: pointer;
}
我們想要當我鼠標放在按鈕上時，呈現一個更深的藍色效果，可以這麼做:
input[type="submit"]:hover {
background-color: #0056b3; /* 滑鼠懸停變色 */
}
好，接著介紹 :first-child first-child選擇器設定其父元素的第一個子元素的樣式。。
:first-child
考慮以下程式碼:
<div>
<p>First paragraph.</p>
<p>Second paragraph.</p>
</div>
div p:first-child {
color: red;
}
呈現效果:
:nth-child，:nth-child根據其父元素的位置來設定其父元素的特定子元素的樣式。
考慮以下程式碼:
<div>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
</div>
div p:nth-child(2) {
color: red;
}
呈現效果:
- 另外，讀者可以自行測試
:nth-child(odd)和:nth-child(even)，讓奇數漢語數字體呈現不同顏色。 - 你更可以放入一些公式，例如 2n 或 2n+1 。讀者可以嘗試看看。
好，再來我們談偽元素選擇器:
::before- 在選定的元素內容 前 插入內容。
- 必須配合 content 屬性使用。
範例：<p>First paragraph.</p>
p::before {
效果：
content: "✔ ";
font-weight: bold;
color: red;
}
::after- 在選定的元素內容 後 插入內容。
- 也需要 content 屬性。
範例：
<p>First paragraph.</p>
p::after {
content: "✔ ";
font-weight: bold;
color: red;
}
效果：
::first-line- 用於樣式化元素的第一行內容。
- 僅適用於塊級元素且受限於某些 CSS 屬性（例如字體、顏色）。
範例：
<p>First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph.</p>
p::first-line {
font-weight: bold;
color: green;
}
效果：
::first-letter- 用於樣式化元素的第一個字母。
- 也僅適用於塊級元素。
範例：
<p>First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph. First paragraph.</p>
p::first-letter {
font-weight: bold;
color: green;
}
效果：
::marker- 用於樣式化列表項目（<li>）的標記符號（如圓點、數字）。
- 僅適用於列表。
範例：
<ul>
<li>項目 1</li>
<li>項目 2</li>
</ul>
li::marker {
content: "★ ";
color: gold;
}
效果：
Tables
現在考慮以下程式碼:
<table>
<caption>Students Info</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>18</td>
<td>4.0</td>
</tr>
<tr>
<td>Jack</td>
<td>18</td>
<td>3.7</td>
</tr>
</table>
呈現效果:
現在我們使用CSS為其添加邊框:
table {
border: 1px solid black;
}
呈現效果:
你會注意到表格內的行和列仍然沒有邊框。若要新增邊框，您需要將邊框套用到表格頭 (th) 和表格資料 (td) 儲存格。
table, th, td {
border: 1px solid black;
}
呈現效果:
接下來，我想刪除表格中的雙邊框，可以這麼做:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
接下來，我想將每個表格單元內的文字水平和垂直居中，同時加入內邊距，讓整體結構更好一些。
table, th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
vertical-align: middle;
border-collapse: collapse;
}
text-align:值可以使用(left、right、center、justify)達成不同效果。vertical-align值可以使用(top、middle、bottom、baseline)達成不同效果。
呈現效果:
好，最後我想將最上方添加顏色:
table, th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
vertical-align: middle;
border-collapse: collapse;
}
th {
background-color: #4caf50;
}
呈現效果:
Lists
這邊我們已經有一定程度的了解了，這段我會簡單帶過:
我們先前有使用過list-style: none; 移除項目符號，其實這行語法也是相同效果list-style-type: none;
你也可以使用以下幾種值改變項目符號的外觀:
list-style-type: square;list-style-type: circle;
好，接著談list-style-position屬性，這用來控制( 項目符號）是放置在清單項目內容流的內部還是外部。
<ul class="inside">
<li>First paragraph.</li>
</ul>
<ul>
<li>Second paragraph.</li>
</ul>
ul.inside {
list-style-position: inside;
}
呈現效果:
Forms
好，我們實際構建一個表單項目，首先處理 HTML 程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">XXX Company</h1>
<p id="description">Thank you for your feedback!</p>
<form action="#" method="post" class="form">
<!-- Personal Information Section -->
<div class="form-group">
<label for="name">Name:</label>
<input id="name" type="text" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label id="number-label" for="number">Age:</label>
<input id="number" type="number" name="age" min="12" max="100" placeholder="Enter your age" required>
</div>
<!-- Preferences Section -->
<div class="form-group">
<label for="dropdown">Choose your favorite color:</label>
<select id="dropdown" name="color" required>
<option value="" disabled selected>Select a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="form-group">
<label>Gender:</label>
<label for="male">
<input type="radio" id="male" name="gender" value="male" checked> Male
</label>
<label for="female">
<input type="radio" id="female" name="gender" value="female"> Female
</label>
</div>
<div class="form-group">
<label>Hobbies:</label>
<label for="reading">
<input type="checkbox" id="reading" name="hobbies" value="reading" checked> Reading
</label>
<label for="traveling">
<input type="checkbox" id="traveling" name="hobbies" value="traveling"> Traveling
</label>
</div>
<!-- Additional Comments Section -->
<div class="form-group">
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</div>
<!-- Submit Button -->
<button type="submit" class="submit-btn">Send Message</button>
</form>
</body>
</html>
好，我們先刪除任何預設樣式，以方便我們設計:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
呈現效果:
接著，我們增加以下設定:
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7; /* 主背景色 */
padding: 20px;
}
h1, p {
text-align: center;
}
.form {
width: 60vw; /* 表單寬度 */
margin: 0 auto; /* 置中 */
padding: 30px;
background-color: #ffffff; /* 白色表單底 */
border: 1px solid #000000; /* 邊界設定 */
border-radius: 10px; /* 圓角效果 */
}
呈現效果:
效果不太好，進行一點微調:
p {
margin-bottom: 20px; /* 也可以在 .form 中設定上下的margin */
}
.form-group {
margin-bottom: 20px;
text-align: left;
/* background-color: #15a134; 可以自行添加觀察分布範圍*/
}
.form-group label {
font-size: 24px;
margin-bottom: 10px;
display: block;
color: #333;
font-weight: 600;
/* background-color: #dbce0d; 可以自行添加觀察分布範圍*/
}
呈現效果:
好，表單還需要再完善一點:
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 14px;
background-color: #fafafa;
color: #333;
}
/* radio 與 checkbox 只需微調外觀 */
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
transform: scale(1.2); /* 稍微放大 */
}
呈現效果:
最後再更改按鈕的樣式就大功告成了:
.submit-btn {
background-color: #13be13;
color: #fff;
padding: 10px;
font-size: 24px;
border: none;
border-radius: 5px;
cursor: pointer; /* 放在按鈕上時，會改變成可點擊的鼠標樣式 */
width: 100%;
}
.submit-btn:hover {
background-color: #0dc4a5;
}
完整 CSS :
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7; /* 主背景色 */
padding: 20px;
}
h1, p {
text-align: center;
}
p {
margin-bottom: 20px;
}
.form {
width: 60vw; /* 表單寬度 */
margin: 0 auto; /* 置中 */
padding: 30px; /* 內邊距設定 */
background-color: #ffffff; /* 白色表單底 */
border: 1px solid #000000; /* 邊界設定 */
border-radius: 10px; /* 圓角效果 */
}
.form-group {
margin-bottom: 20px;
text-align: left;
/* background-color: #15a134; 可以自行添加觀察分布範圍*/
}
.form-group label {
font-size: 24px;
margin-bottom: 10px;
display: block;
color: #333;
font-weight: 600;
/* background-color: #dbce0d; 可以自行添加觀察分布範圍*/
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 14px;
background-color: #fafafa;
color: #333;
}
/* radio 與 checkbox 只需微調外觀 */
.form-group input[type="radio"],
.form-group input[type="checkbox"] {
margin-right: 5px;
transform: scale(1.2); /* 稍微放大 */
}
.submit-btn {
background-color: #13be13;
color: #fff;
padding: 10px;
font-size: 24px;
border: none;
border-radius: 5px;
cursor: pointer; /* 放在按鈕上時，會改變成可點擊的鼠標樣式 */
width: 100%;
}
.submit-btn:hover {
background-color: #0dc4a5; /* 懸停變色 */
}
呈現效果:
讀者可以自行發揮創意，設計一份更好看的表單設計，上面的程式碼僅供參考，目的只是想讓你更了解 CSS 佈局的規則及實際如何應用。
