最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day25:小事之 CSS 偽元素 與 content Property

XAMPP下载 admin 843浏览 0评论
 W3C 寫道:content 屬性與 ::before 和 ::after 一起使用在文檔中生成內容。因此,使用 ::before 和 ::after 一定要有 content 否則不會發生作用。值 與 使用方式content 的值有:
normal | none normal為預設,使用這兩個值不會有任何效果出現。
<string> 值為字串,會在之前或之後加入該字串。因為放的是文字,所以可以針對文字作顏色、字體、大小的變換
p:after {    content: “我會在文字後”;    font-size: 2em;    color: purple;}
<url> 可以在之前或之後加入圖片、聲音或影像等
p:before {    content: url(w3css.gif);}
<counter> 可以自動計數連續固定標籤
如:可以在數個連續的 p 之前自動計算其順序數值,也可以運用在 ul li 之前p{  counter-increment: num}p::before{    content: counter(num) }
attr(<identifier>) 可以在所選元素之前或之後插入指定屬性的值。注意這時候 content 不需要 ”符號
.menu li::before{    content: attr(href)}
open-quote | close-quote 給予開始、結束的引號 “ “,大家應該有看過網頁上有很大的引號,用來做裝飾的,就可以用這兩個值來完成唷~

p:before {    content: open-quote;}p:after {    content: close-quote;}p:before,p:after{    font-size: 3em;    color: #ccc;}
no-open-quote | no-close-quote 在有引號的區段內的指定元素,取消其引號
<p>My name is Iris 這一段會有引號</p><p class=”hometown”>這一段不要引號</p><p>這一段會有引號</p>p:before {    content: open-quote;}p:after {    content: close-quote;}p.hometown:before {    content: no-open-quote;}p.hometown:after {    content: no-close-quote;}
inherit 會繼承前一個的屬性
還可以這樣使用
想要在文字前加上獨立區塊的小圓,讓 content 的值為空,再用寬高做出需要的小圓
.menu li::before{    content: ”;    width: 10px;    height: 10px;    display: block;//因為 ::before 是 inline 元素,所以需要將它變成 block    background: #f00;    border-radius: 5px;}更複雜的用法,可以替主元素加上相對定位,而 ::before 或 ::after 加上絕對定位,就可以做出各種想要的效果出來了。試玩範例以上是 偽元素 與 content Property 的使用方式。各位看倌明天見囉~

转载请注明:XAMPP中文组官网 » Day25:小事之 CSS 偽元素 與 content Property

您必须 登录 才能发表评论!