核心要點
- CSS
content
屬性與::before
和::after
偽元素配合使用,可在網頁中插入生成的內容。它支持多種值,包括normal
、counter
、attr
、字符串、open-quote
、url
、initial
和inherit
。 -
content
屬性可用於插入文本、編碼字符、媒體文件,甚至計數器的值。例如,attr()
函數可用於插入指定屬性的值。 -
open-quote
或close-quote
值使用content
屬性生成開引號或閉引號。no-open-quote
或no-close-quote
值可用於從指定元素中刪除開引號或閉引號。 - 雖然 CSS
content
屬性主要與::before
和::after
偽元素一起使用,但它也可以與::marker
偽元素一起使用,以自定義列表項目符號或編號的外觀。
如果您是前端開發人員,您很有可能聽說過偽元素以及 CSS 的 content
屬性。本文不會深入討論偽元素,但如果您不熟悉該概念或需要快速復習,建議您查看 Louis Lazaris 在 Smashing Magazine 上的文章。
本文將重點介紹 content
屬性。 CSS 的 content
屬性與 ::before
和 ::after
偽元素(可以使用單冒號或雙冒號語法)一起使用。該屬性用於在網頁中插入生成的內容,並且在所有主要瀏覽器中都完全受支持。
content
屬性的基本語法
content
屬性的語法如下所示,其中包含每個值:
p::before { content: normal|counter|attr|string|open-quote|url|initial|inherit; }
CSS 在不同值之間略有不同。例如,要將 attr()
值與 ::before
或 ::after
一起使用,您需要編寫如下所示的 CSS:
p::after { content: " (" attr(title) ")"; }
這只是一個例子,稍後將詳細介紹。在以下部分中,我將討論每個值,包括 attr()
。
值:none
或 normal
設置為 none
時,不會生成偽元素。如果將其設置為 normal
,則對於 ::before
和 ::after
偽元素,它將計算為 none
。
p::before { content: normal; } p::after { content: none; }
這種方法可能用於嵌套元素,這些元素已經定義了偽元素,但您希望在某些上下文中覆蓋偽元素。
值:<string></string>
此值將內容設置為字符串,可以是任何文本內容。如果使用非拉丁字符,則需要對字符進行編碼。讓我們來看一下每個示例。考慮以下 HTML:
p::before { content: normal|counter|attr|string|open-quote|url|initial|inherit; }
然後是以下 CSS:
p::after { content: " (" attr(title) ")"; }
在這裡,我們將文本內容插入到列表項之一中,並將編碼字符(在本例中為版權符號)插入到段落元素中。
字符串值必須用引號括起來,這些引號可以是單引號或雙引號。
值:<uri></uri>
當您有興趣顯示某種媒體時,<uri></uri>
值非常方便,您可以通過指向外部資源(例如圖像)來實現。如果由於某種原因無法顯示資源或圖像,則會忽略它或使用某些佔位符代替它。讓我們來看一些演示此值的代碼。
這是 HTML:
p::before { content: normal; } p::after { content: none; }
這是顯示 SitePoint 的 favicon 和一些文本的 CSS:
<h2 id="Tutorial-Categories">Tutorial Categories</h2> <ol> <li>HTML and CSS</li> <li class="new">Sass & Less</li> <li>JavaScript</li> </ol> <p class="copyright">SitePoint, 2015</p>
值:counter()
或 counters()
此值是可以與 content
屬性一起使用的最複雜的值。它被編寫為兩個不同的函數之一——counter()
或 counters()
。有關 CSS 計數器的更詳細討論,請查看這篇文章。但這裡有一個簡短的概述。
對於第一個函數 counter()
,生成的文本是此偽元素作用域內您指定的名稱的最內層計數器的值。默認情況下,它以十進制格式化,但也可以以羅馬數字格式化。
另一個函數 counters(name, string)
類似,但表示所有具有指定名稱(第一個參數)的計數器,順序是從最外層到最內層。所有這些值都由指定的字符串(第二個參數)分隔。如果您將計數器變量的名稱指定為 none
、inherit
或 initial
,則聲明將被忽略。
以下是一個示例,說明如何使用計數器:
.new::after { content: " New!"; color: green; } .copyright::before { content: "<pre class="brush:php;toolbar:false"><code class="language-html"><a class="sp" href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>a9 "; }
這是 CSS:
.sp::before { content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico); }
這將使用生成的內容對項目進行編號,類似於有序列表。在本例中,我們可以輕鬆使用有序列表。當要編號的項目散佈在其他元素之間時,這些類型的計數器會方便得多。
值:attr()
如前所述,attr()
函數將插入指定屬性的值,它是唯一的參數。如果相關元素沒有屬性,則返回空字符串。
這是一個例子:
<h2 id="Name-of-First-Four-Planets">Name of First Four Planets</h2> <p class="planets">Mercury</p> <p class="planets">Venus</p> <p class="planets">Earth</p> <p class="planets">Mars</p>
使用上述 HTML,下面的 CSS 將在鏈接文本旁邊顯示括號中的 href
屬性值:
.planets { counter-increment: planetIndex; } .planets::before { content: counter(planetIndex) ". "; }
此技巧通常用於打印樣式表中,以允許在打印的網頁中顯示鏈接。
值:open-quote
或 close-quote
設置為這些值之一時,content
屬性將生成開引號或閉引號。它通常與 <q></q>
元素一起使用,但您可以將其與任何元素一起使用。因此,您可以執行以下操作:
p::before { content: normal|counter|attr|string|open-quote|url|initial|inherit; }
close-quote
值僅適用於 ::after
偽元素(原因顯而易見),如果在同一元素上使用 ::before
也沒有 open-quote
值,則它不會產生任何內容。
值:no-open-quote
或 no-close-quote
no-open-quote
值將從指定元素中刪除開引號,no-close-quote
值將刪除閉引號。您可能想知道這些值如何有用。查看以下 HTML:
p::after { content: " (" attr(title) ")"; }
請注意,在上段中,說話者引用某人(“一位智者……”),而此人又引用其他人(“那些說……”)。因此,我們的引號嵌套了三層。從語法上講,有一種正確的方法來處理這個問題。如果使用生成的內容,以下是我們可以確保引號正確嵌套的方法:
p::before { content: normal; } p::after { content: none; }
第一個選擇器使用 quotes
屬性定義我們想要使用的引號類型,深度為三層。然後我們使用偽元素將引號插入為內容。這類似於我們在上一節中所做的。
但是,如果出於某種原因,我們希望忽略第二層引號而不插入它們怎麼辦?我們可以使用 no-open-quote
和 no-close-quote
值來覆蓋它們:
<h2 id="Tutorial-Categories">Tutorial Categories</h2> <ol> <li>HTML and CSS</li> <li class="new">Sass & Less</li> <li>JavaScript</li> </ol> <p class="copyright">SitePoint, 2015</p>
在本例中,我在第二層引號中添加了一個名為 noquotes
的類。這確保了引號嵌套仍然被識別,但該元素的引號不會出現。因此,該段落中的第三層引號將帶有雙花括號,而不是單花括號。
結論
我希望本教程能幫助您更好地理解 content
屬性的每個值以及如何在各種場景中使用它們。
常見問題解答 (FAQ) 關於 CSS 內容屬性
什麼是 CSS 內容屬性以及如何使用它?
CSS content
屬性是一個強大的工具,允許您在頁面的佈局中插入生成的內容。它通常與 ::before
和 ::after
偽元素一起使用,通過 CSS 添加裝飾性內容,而不是將其包含在 HTML 中。例如,您可以使用 content
屬性在塊引用周圍插入引號,或在標題之前添加裝飾性圖像。 content
屬性的值可以是字符串、URL、計數器,甚至是屬性的值。
CSS 內容屬性能否與除 ::before
和 ::after
之外的元素一起使用?
CSS content
屬性主要與 ::before
和 ::after
偽元素一起使用。但是,它也可以與 ::marker
偽元素一起使用,該元素表示列表項的標記框。這允許您自定義列表項目符號或編號的外觀。
如何使用 CSS 內容屬性顯示屬性值?
CSS content
屬性可以使用 attr()
函數顯示 HTML 屬性的值。例如,您可以使用它來顯示鏈接的 href
屬性的值,從而使用戶可以看到實際的 URL。語法將是 content: attr(href)
。
我可以使用 CSS 內容屬性插入圖像嗎?
是的,CSS content
屬性可以使用 url()
函數插入圖像。圖像將插入 ::before
或 ::after
偽元素放置的位置。例如,content: url(image.jpg)
將插入名為 image.jpg 的圖像。
如何將計數器與 CSS 內容屬性一起使用?
CSS content
屬性可以使用 counter()
或 counters()
函數顯示計數器。這對於自動對文檔中的標題或部分進行編號非常有用。您首先使用 counter-reset
屬性創建或重置計數器,並使用 counter-increment
屬性遞增它。然後,您可以使用 content: counter(myCounter)
來顯示計數器的當前值。
我可以在 CSS 內容屬性中使用特殊字符嗎?
是的,您可以通過使用它們的 Unicode 來在 CSS content
屬性中使用特殊字符。例如,content: “22”
將插入一個項目符號。請記住始終以反斜杠 () 開頭 Unicode。
CSS 內容屬性會影響 SEO 嗎?
通過 CSS 添加的內容通常被認為是裝飾性的,而不是應該被搜索引擎索引的內容。因此,最好將 CSS content
屬性用於裝飾性內容,而不是對 SEO 重要的內容。
我可以使用 CSS 內容屬性插入 HTML 嗎?
不可以,CSS content
屬性不能用於插入 HTML。它只能插入文本、圖像、計數器和屬性值。如果您需要插入 HTML,則應直接在 HTML 文檔中執行此操作或使用 JavaScript。
所有瀏覽器都支持 CSS 內容屬性嗎?
所有現代瀏覽器(包括 Chrome、Firefox、Safari 和 Edge)都廣泛支持 CSS content
屬性。但是,它可能在舊版本的 Internet Explorer 中不受完全支持。
我可以動畫化 CSS 內容屬性嗎?
不可以,CSS content
屬性不能進行動畫處理。這是因為它不是具有值範圍的屬性,而是設置特定值。如果您需要創建動畫,請考慮使用其他可以進行動畫處理的 CSS 屬性,例如 opacity
或 transform
。
以上是了解CSS&#x27;內容&#x27;財產的詳細內容。更多資訊請關注PHP中文網其他相關文章!

文章討論了CSS FlexBox,這是一種佈局方法,用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法,將其與CSS網格進行了比較,並詳細瀏覽了瀏覽器支持。

本文討論了使用CSS創建響應網站的技術,包括視口元標籤,靈活的網格,流體媒體,媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用,並推薦CSS框架

本文討論了CSS盒裝屬性,該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box,Border-Box和Padding-Box之類的值,以及它們對佈局設計和形式對齊的影響。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

記事本++7.3.1
好用且免費的程式碼編輯器

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver CS6
視覺化網頁開發工具