文章大綱來源:【Day 5】CSS 高級
- CSS 選擇器
- CSS 拓展
- CSS 單位
- CSS 參考手冊
CSS 選擇器
內容引用:CSS 選擇器
元素選擇器
html { ... }
選擇器分組
h2, p { ... }
類選擇器
.important { ... }
p.warning { ... }
.important.warning { ... }
/* 選擇同時擁有這兩個類名的元素 */
ID選擇器
#intro { ... }
屬性選擇器
a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 完全匹配的屬性內容 */
p[class~="important"] { ... }
/* 部分匹配的屬性內容 */
後代選擇器
h1 em { ... }
子元素選擇器
h1 > strong { ... }
相鄰兄弟選擇器
h1 + p { ... }
僞類
CSS 僞類用於向某些選擇器添加特殊的效果。
語法是selector : pseudo-class {property: value}
。
a:link { color: #FF0000 } /* 未訪問的鏈接 */
a:visited { color: #00FF00 } /* 已訪問的鏈接 */
a:hover { color: #FF00FF } /* 鼠標移動到鏈接上 */
a:active { color: #0000FF } /* 選定的鏈接 */
p:first-child { font-weight: bold; }
CSS 拓展
內容引用:CSS 高級
水平對齊
- 使用
margin:auto
水平對齊
margin-left:auto;
margin-right:auto;
- 使用
position
左或右對齊
position:absolute;
right:0px;
- 使用
float
左或右對齊
float:right;
尺寸
-
height
:元素高度 -
width
:元素寬度 -
line-height
:行高 -
max-height
:最大高度 -
max-width
:最大寬度 -
min-height
:最小高度 -
min-width
:最小寬度
CSS 單位
內容引用:CSS 單位
相對長度
指定了一個長度相對於另一個長度的屬性,對於不同的設備相對長度更適用。
-
em
:相對於應用在當前元素的字體尺寸,一般瀏覽器字體大小默認爲16px,則2em == 32px -
ex
:依賴於英文子母小 x 的高度 -
ch
:數字 0 的寬度 -
rem
:根元素(html)的 font-size -
vw
:viewpoint width,視窗寬度,1vw=視窗寬度的1% -
vh
:viewpoint height,視窗高度,1vh=視窗高度的1%
絕對長度
絕對長度單位是一個固定的值,它反應一個真實的物理尺寸。
絕對長度單位視輸出介質而定,不依賴於環境(顯示器、分辨率、操作系統等)。
-
cm
:釐米 -
mm
:毫米 -
in
:英寸(1in = 96px = 2.54cm) -
px
:像素 (1px = 1/96th of 1in) -
pt
:point,大約1/72英寸; (1pt = 1/72in) -
pc
:pica,大約6pt,1/6英寸; (1pc = 12 pt)
CSS 參考手冊
使用時如果有疑問可以隨時查看[【CSS 參考手冊
】](http://www.w3school.com.cn/cs...。
個人靜態博客:
- 氣泡的前端日記: https://rheabubbles.github.io