CSS - 引號：為文字添加個性

你好，有抱負的網頁設計師們！今天，我們將深入探討一個有趣且常被忽視的CSS屬性：引號。作為你們友好的鄰居計算機老師，我非常高興與你們分享這個小寶貝。相信我，到了這個教學的結尾，你們將會像專業人士一樣引用！

CSS - Quotes

CSS 引號是什麼？

在我們開始之前，讓我們了解CSS中的引號是什麼。它們不僅用於強調語言或引用來源；在CSS中，引號是一個強大的工具，可以自動為你的內容添加引號。這就像有一個迷你機器人跟隨你的文字，在你告訴它的地方添加那些小彎曲標記！

可用的值

讓我們從quotes屬性可以使用的不用值開始。這裡有一個方便的表格來總結：

值	描述
none	不使用引號
`<string>`	指定要使用的引號
initial	設為默認值
inherit	從父元素繼承
auto	瀏覽器根據語言決定

現在，讓我們一一解析這些值。

应用范围

在我們深入探討之前，重要的是要注意quotes屬性適用於所有元素。然而，它最常與<q>和<blockquote>元素一起使用。把它當作一種萬用調味料 - 你可以添加到任何元素，但它與某些菜餚最配！

語法

使用引號的基本語法是直接的：

選擇器 {
quotes: 值;
}

簡單吧？現在，讓我們詳細查看每個值。

CSS 引號 - none 值

當你設置quotes: none時，你實際上是告訴CSS，“請不要使用引號！”這在你想覆蓋默認引號時很有用。讓我們看一個例子：

q {
quotes: none;
}

<p>她說 <q>Hello, world!</q></p>

在這種情況下，<q>標籤內的文本不會有任何引號。這就像低語而不真正降低你的聲音！

CSS 引號 - `<string>` 值

這裡就是樂趣開始的地方！你可以指定你想要的字符作為你的引號。語法如下：

選擇器 {
quotes: "開引號1" "閉引號1" "開引號2" "閉引號2";
}

讓我們試一個例子：

q {
quotes: "<<" ">>" "(" ")";
}

<p>她驚呼 <q>What a <q>wonderful</q> day!</q></p>

這將會渲染為：她驚呼 <<What a (wonderful) day!>>

這不是很酷嗎？這就像給你的文字做了一次大變身！

CSS 引號 - initial 值

initial值將屬性設置為其默認值。這就像在你的引號上按下了重置按鈕。對於大多數瀏覽器來說，這等於：

q {
quotes: '"' '"' "'" "'";
}

這會給你標準的英語引號：外層使用雙引號，內層使用單引號。

CSS 引號 - auto 值

auto值就像是你引號的智能助手。它根據你的文件的語言選擇合適的引號。例如：

:root {
quotes: auto;
}

現在，如果你的HTML有lang="fr"，它可能會對法語文本使用「guillemets」。這就像在你的團隊中有一個多語言引號專家！

CSS 引號 - 使用 :lang 伪类

這裡我們可以變得非常時尚。:lang伪類讓我們為不同的語言指定不同的引號。看看這個：

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

這為英語、法語和德語設定了不同的引號風格。這就像教你的網站說多種語言！

結合所有內容

讓我們創造一個更複雜的例子來看看這些是如何一起工作的：

<p lang="en">她說，<q>I love <q>CSS</q>!</q></p>
<p lang="fr">Elle a dit, <q>J'adore <q>CSS</q> !</q></p>
<p lang="de">Sie sagte, <q>Ich liebe <q>CSS</q>!</q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

這將會為每個句子渲染適合語言的引號。這就像有一個通晓多国语言的排字工在工作！