|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 今天這篇文章主要的介紹了四種CSS樣式的偽元素，講解的css偽元素都是在日常中比較常見的，現在就讓我們一起來看這篇文章吧。首先我們先來看看本文介紹的css樣式中的四種偽元素：
這四種偽元素都是在平常寫代碼的時候比較常用的元素。 現在我們來看第一個： :before，該元素是在元素之前添加內容的。 我們來看個完整的實例了解一下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文網</title> </head> <body> <P>我是一個段落，這一段只有我這一句話</P> </body> </html> 這是一個普通的文本文檔，顯示的也是正常的，先看看圖，然后在對比：
這是一段很正常的文本，接下來我們來插入css樣式的偽元素看看效果： 在head里面加入css樣式： <style type="text/css">
p:before{content: "這里是PHP中文網"}
</style>這樣結果就出來了，p標簽里面的文本還是那些文字，看看在瀏覽器中顯示的效果：
效果是不是很明顯，在before里面的文字是不是到了p標簽的前面去了。 說了第一個before偽元素，現在說說第二個偽元素： :after：在元素的后面添加內容，也很簡單吧，把上個代碼里面的before換成after就行了。 我們來看看代碼： <title>PHP中文網</title>
<style type="text/css">
p:after{content: "這里是PHP中文網"}
</style>
</head>
<body>
<P>我是一個段落，這一段只有我這一句話</P>
</body>好了，代碼出來了，大家一起來看看在瀏覽器中顯示的效果是不是和上面說的一樣吧：
和上面說的完全一樣，就是在后面添加了內容，看的很明顯吧。 現在來說說第三個偽元素的用法： :first-line：設置了第一行的變化，第二行就不變了。 我們來進個實例： <title>PHP中文網</title>
<style type="text/css">
p:first-line{color:red}
</style>
</head>
<body>
<P>我是一個段落，這一段只有我這一句話；我是一個段落，這一段只有我這一句話；我是一個段落，這一段只有我這一句話；我是一個段落，這一段只有我這一句話；我是一個段落，這一段只有我這一句話；我是一個段落，這一段只有我這一句話</P>
</body>因為是要首行顯示，所以我把文字復制了幾份，我們來看看瀏覽器顯示的效果：
是不是第一行全變了，第二三行都沒變，這樣就容易讓大家知道這些偽元素的用法了。（想看更多就到PHP中文網CSS學習手冊中學習） 最后一個是:first-letter偽元素： :first-letter：是定義文本第一個字母的變化。 我們把上文的文字第一句變成英文，現在來看看代碼： <style type="text/css">
p:first-letter{color:red}
</style>看效果圖：
文本的第一個字母變了，這樣是不是就成功了，一般我們都是用它來做放大之類的效果。 以上就是這篇關于css樣式偽元素的全部內容了。介紹了四個常用的偽元素，希望能幫助到大家（想學更多css樣式知識就到PHP中文網css學習手冊欄目中學習）。有問題的可以在下方留言提問。 【小編推薦】 css表格怎么添加邊框樣式？css表格邊框樣式總結（附完整實例） HTML a標簽如何讓鼠標懸停變色，css控制a標簽鼠標懸停樣式詳解 以上就是css偽元素有哪些？css偽元素的詳情介紹(內附實例)的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
