一些CSS新增的知識

標籤：fonts   border   指定   code   聲明   工作   檔案解壓   pen   編碼   

1、CSS引用檔案字型

準備工作：將字型檔解壓放於fonts檔案夾中，字型檔通常有eot、svg、ttf、woff四種格式

CSS聲明字型引用：

@font-face {    font-family: test;    src: url(‘../fonts/test.eot‘) format(‘embedded-opentype‘),    url(‘../fonts/test.svg‘) format(‘svg‘),    url(‘../fonts/test.ttf‘) format(‘truetype‘),    url(‘../fonts/test.woff‘) format(‘woff‘);}

CSS設定字型為檔案字型：

.example{    font-family: test;    font-style: normal;}

假如使用的是字型表徵圖，字型表徵圖會有自己的編碼，如果把字型表徵圖放在虛擬元素中，則代碼如下：

.example::before{    content: ‘\e958‘; //字型表徵圖編碼作為虛擬元素的內容    font-size: 13px;}

2、CSS選取器巧用

2.1、使用兄弟選取器

假如ul中並排的n個區塊層級元素li，要設定相鄰元素的間隔線，可使用以下代碼：

//相鄰兄弟選取器選擇緊接在另一個元素後的元素，而且二者有相同的父元素，會迴圈尋找ul>li+li{    border-left:1px solid #ccc;}//通用兄弟選取器選擇指定元素的後面的所有兄弟結點，該情景下相鄰兄弟選取器效能較好

ul>li~li{ border-left:1px solid #ccc; }

2.1、使用屬性選取器

假如要匹配使用了test-開頭的類，如class="test-1"、class=" test-2"、class="start  test-3"...使用以下代碼以匹配多種情況

[class^="test-"],[class*=" test-"]{     ···      }

 

一些CSS新增的知識