7.1 偽元素 ::first-letter
偽元素 ::first-letter 和 ::first-line 提供了強大的工具來樣式化文本元素的首字母和首行。這些偽元素被廣泛用於創建各種排版效果，改善文本的可讀性和美感。
偽元素 ::first-letter 允許你樣式化文本塊的首字母。它常用於創建裝飾效果，例如段落中的放大或樣式化首字母。
選擇器::first-letter {
/* 樣式 */
}
::first-letter 的使用範例
在這個例子中，段落的首字母放大了尺寸，字體加粗且被染成藍色。屬性 float: left 和 margin-right 創建了一種"嵌入"首字母的效果，將其他文本偏移開：
/* 樣式化段落的首字母 */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
支持的屬性對於 ::first-letter
偽元素 ::first-letter 支持眾多屬性，包括：
fontcolorbackgroundmarginpaddingborderfloattext-transformtext-decoration
使用這些屬性可以靈活地管理文本首字母的外觀。
擴展樣式化的 ::first-letter 範例
在這個例子中，首字母添加了額外的效果——文本陰影和更大的尺寸：
/* 帶有額外效果的首字母樣式化 */
p::first-letter {
font-size: 3em;
font-weight: bold;
color: #e74c3c;
float: left;
margin-right: 0.2em;
line-height: 1;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
7.2 偽元素 ::first-line
偽元素 ::first-line 允許你樣式化文本塊的首行。它用於創建各種排版效果，如改變首行的字體或顏色，改善文本的視覺感受。
語法：
選擇器::first-line {
/* 樣式 */
}
::first-line 的使用範例
在這個例子中，段落的首行字體加粗，染成綠色，並設置了淺灰色的背景：
/* 樣式化段落的首行 */
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
支持的屬性對於 ::first-line
偽元素 ::first-line 支持眾多屬性，包括：
fontcolorbackgroundmarginpaddingborderline-heighttext-transformtext-decorationletter-spacingword-spacing
它們允許靈活地管理文本首行的外觀。
擴展樣式化的 ::first-line 範例
在這個例子中，首行增加了額外的效果，如將文本轉換為大寫，以及更改字母和單詞間距：
/* 帶有額外效果的首行樣式化 */
p::first-line {
font-weight: bold;
color: #e67e22;
background-color: #f9f9f9;
text-transform: uppercase;
letter-spacing: 0.1em;
word-spacing: 0.2em;
}
7.3 結合使用 ::first-letter 和 ::first-line
偽元素 ::first-letter 和 ::first-line 可以一起使用以創建複雜的排版效果。
結合使用的範例
在這個例子中，段落的首字母和首行獲得了不同的樣式化，創建了一個複雜且有趣的視覺效果：
/* 樣式化段落的首字母和首行 */
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
完整範例
在這個例子中，段落的首字母被放大且染成藍色，而首行字體加粗且被染成綠色，並設置了灰色背景：
/* 樣式化段落的首字母 */
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
/* 樣式化段落的首行 */
p::first-line {
font-weight: bold;
color: #2ecc71;
background-color: #f0f0f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>::first-letter 和 ::first-line 偽元素範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</body>
</html>
GO TO FULL VERSION