css的iconfont使用有三種方式,第一種方式是unicode,第二種方式是fontclass,第三種方式是symbol。在介紹iconfont偽類選擇器的使用之前,我們來了解下iconfont的三種css表達方式。關於這三種表示方法在iconfont中都有簡介。鏈結在這iconfont幫助文件
斜體樣式筆者喜斜體樣式歡直接引用例子,所以花裡胡哨的表達就算了。
html**如下
doctype
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
@font-face
.iconfont
.icon-xianxingbenzivg:before
.icon-xianxingchizi:before
.icon-xianxingboshimao:before
.icon-xianxingdayinji:before
.icon-xianxingdiannao:before
divdiv::after
style
>
>
>
div>
body
>
html
>
@font-face…那部分是宣告
.iconfont 是定義
::after{}是偽類選擇器
只要寫另外值得注意的是,在書寫偽類選擇器時,div
部分和div::after
這部分即可注:
::after
其實就是在父親內容的後面,而同樣的::before
是父親內容的前面,而這裡所寫的div::after
中的div
即為父親。值得注意的是,這裡所說的前面就是二維平面上的左中右,也就是前中後。
必須要寫屬性content='\e67d'
對所選用的字型圖示要寫font-family:'iconfont'
注:content='\e67d'
中的\e67d
則是所選擇的字型圖示的unicode編碼
綜述:基本上css**直接複製iconfont.css中的**即可,然後自己寫偽類選擇器中content屬性和font-family即可**
CSS3 偽元素和偽類
css偽類和偽元素的區別,在css3中,實際上的偽元素應該只有 before和 after兩個了,這兩個元素是實際存在在dom中的,而類本身就是表示元素的狀態,所以偽類應該也是為了表示元素的狀態的。在css3中,可以直接用 還是 來區分偽類和為元素了。由於偽類主要是表示元素的狀態,那麼偽類的主要功能...
css3 偽元素和偽類
1,定義 w3c定義 偽元素偽類 都可以向某些選擇器設定特殊效果。css2中定義 css3中的定義 1 偽元素 在dom樹中建立了一些抽象元素 虛擬的容器 由兩個冒號 開頭 css2中並沒有區別 為了相容性一般還是寫乙個冒號 2 偽類 為了選擇器找到那些不存在於dom樹中的資訊 及 不能被常規css...
css 3鏈結偽類與動態偽類
鏈結偽類link 表示作為超連結,並指向乙個未訪問的位址的所有錨 鏈結偽類不可以加在div上 點我點我點我 我是div啦 view code 點我點我點我 view code 可以利用target寫乙個div切換 div1 div2 div3 div1 div2 div3 view code 動態偽...