選擇器
- 簡單選擇器
- class選擇器
- ID選擇器
- 標(biāo)簽/元素選擇器
- 屬性選擇器
- 偽類
:hover:nth-child - 復(fù)合選擇器
- 關(guān)系選擇器
- 父子選擇器
- 后代選擇器
- 組合選擇器
屬性
1. 樣式
- 字體
| 常用屬性名 | 含義 | 常用屬性值 |
|---|---|---|
font-family |
字體 | "微軟雅黑" "Microsoft YaHei" |
font-size |
大小 | 12px |
font-style |
風(fēng)格 | italic |
font-weight |
粗細(xì) | bold |
- 文字
| 常用屬性名 | 含義 | 常用屬性值 |
|---|---|---|
color |
顏色 | 十六進(jìn)制值 |
line-height |
行高 | - |
text-align |
對齊 |
center right left
|
text-decoration |
修飾 |
underline none
|
text-indent |
縮進(jìn) | 1em等于1個字符的寬度 |
white-space |
空白處理 | nowrap |
- 背景
| 常用屬性名 | 含義 | 常用屬性值 |
|---|---|---|
background-color |
背景顏色 | 十六進(jìn)制顏色值 |
background-image:url(圖片地址) |
背景圖 | - |
background-position |
位置 | - |
background-repeat |
重復(fù) |
repeat repeat-x repeat-y no-repeat
|
background-attachment |
關(guān)聯(lián) | fixed |
- 列表
| 常用屬性名 | 含義 | 常用屬性值 |
|---|---|---|
list-style-type |
類型 |
none disc circle square
|
list-style-image:url(圖片地址) |
圖片作為列表項 | - |
- 表格
| 常用屬性 | 含義 |
|---|---|
border-collapse:collapse; |
邊框合并 |
border-collapse:separate; |
邊框分開 |
border-spacing |
單元邊框間距 與<table cellspacing="">相似。 |
caption-side:bottom; |
與<caption align="bottom">相似。 |
- 輪廓
輪廓與邊框相似，但在邊框外邊，緊貼著邊框。
2. 盒模型
- 邊框
| 常用屬性名 | 含義 | 常用屬性值 |
|---|---|---|
border-color |
邊框顏色 | 十六進(jìn)制顏色值 |
border-style |
邊框風(fēng)格 |
solid dotted
|
border-width |
邊框?qū)挾?/td> | - |
border |
簡寫 | - |
- 外邊距
margin - 內(nèi)邊距
padding - 寬高
widthheight
3. 定位
- 絕對
position:absolute; - 相對
position:relative; - 固定
position:fixed - 浮動
float:rightfloat:left
最佳實踐
toprightleftbottomz-index不能單獨使用，必須設(shè)置position為absolute\relative\fixed
