CSS3筆記

Ant發表於2020-04-06
CSSS3筆記
CSS3 屬性選擇器
[att*=val] 當attr包含val時候
[att^=val] 當attr以val開頭時
[att$=val] 當attr以val結尾時


CSS3 偽類選擇器
a:link
a:visited
a:hover
a:active
a:enabled
a:disabled
input:checked
input:focus
input:read-only
input:default
input:indeterminate


p:first-line
p:first-letter
li:before
li:after


CSS3 關鍵字選擇器
body *:not(h1)
:empty
:root
:target
li:first-child
span:last-child
tr:nth-child(even/odd)


CSS3 典型用法：
img:after{content:attr(alt);}
span:before{content:url(new.png);}
h1:before{content:counter(counterA);}
h1{counter-increment:counterA;}
h1:before{content:'第'counter(counterA)'章';}
div{text-shadow:5px 5px 5px gray;}
word-wrap:normal | break-word
box-sizing: content-box | border-box
div{
-webkit-transition: #ffff 1s linear;
-moz-transition: #fff 1s linear;
-o-transition: #fff 1s linear;
}


div:hover{
-webkit-animation-name:
}


CSS3 服務端字型：
@font-face{
font-family: WebFont;
src: url('font/Fontin_Sans_R_45b.otf') format('opentype');
font-weight:normal;
}


OpenType格式字型檔案以 otf 結尾，TrueType字型檔案以 ttf 結尾


font-size-adjust:0.46
其中0.46為某種字型的aspect值，計算方式為x-height除以字型的尺寸，x-height為小寫x的高度，單位為畫素

相關文章