# CSS回顧
### CSS的使用
* 元素的style屬性內
* style標簽內
* link引入外部的css文件 `<link rel="stylesheet" href="">`
* @import url(""); 寫在css中

### CSS的基本語法

選擇器{
屬性:屬性值;
}

### CSS註釋
`/*註釋*/`

### CSS的長度單位
* px
* em
* 百分比
* 絕對單位 cm mm pt

### CSS的顏色表示
* 英文單詞
* rgb方式
* 16進制

### CSS選擇器
* ID選擇器
* CLASS選擇器
* 元素選擇器
* 全局選擇器 *
* 組合-- 後代 selecter selecter
* 組合--子元素 selecter>selecter
* 組合--多條件 p.item
* 偽類
* :link
* :visited
* :hover
* :active




### 選擇器優先級




# CSS的屬性
### CSS字體屬性
* font-family sans-serif/serif
* font-size
* font-weight normal/bold/bolder/lighter/數字
* font-style normal/italic/oblique
* font-variant: normal/small-caps
* font `font:[weight/style/variant] size family`


### CSS顏色屬性
* color

### CSS文本屬性
* letter-spacing 字母間距 默認0px
* word-spacing 單詞間距 默認 0px
* text-decoration 值： none/underline/overline/line-through
* text-align 水平對齊方式 left(默認)/right/center
* vertical-align 垂直對齊（基於文字的基線） baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
* text-indent 首行縮進 長度單位
* line-height: 行高 長度單位 設置行高=高 使一行文字垂直居中
* `font:[style/variant/weight] size/line-height family`

### CSS背景屬性
* background-color 背景顏色
* background-iamge 背景圖片 url()
* background-repeat 背景圖片的平鋪方式 repeat(默認)/repeat-x/repeat-y/no-repeat
* background-postion 背景圖片定位 left/center/right/長度單位 top/center/bottom/長度單位
* background-attachment 背景圖片固定或滾動 scroll(默認)/fixed
* `background:color image repeat postion`


### CSS邊框屬性
* border-width 邊框線的寬度 長度單位
* border-color
* border-style 邊框線的風格 solid 實線/dotted點線/dashed虛線/double雙線 inset 3D凹邊...
* border `border:width style color`
* border-left/right/top/bottom

### CSS鼠標光標屬性
* cursor 值 default/pointer/move/crosshair/text/wait


### CSS列表屬性
* list-style-type 列表項的圖形 disc/circle/square/decimal/lower-roman/upper-roman ....
* list-style-postion 列表項圖形的位置 outside/inside
* list-style-iamge 自定義列表圖形 url
* 最常見的設置 `list-style:none`

### CSS表格屬性
* table-layout 表格布局方式 auto/fixed
* border-collapse 合並單元格邊框 separate/collapse
* border-spacing 單元格間距 長度單位
* caption-side 表格標題位置 top/bottom
* empty-cells 沒有內容的單元格是否隱藏 show/hide


### CSS sprites css精靈圖


# DIV+CSS布局
### 行內元素和塊狀元素呢
* 塊狀元素獨占一行， 行內元素可以共用一行
* 默認寬度： 塊狀元素默認寬度由父元素決定 行內元素默認寬度右內容決定
* 塊狀元素可以設置寬高， 行內元素不可以設置寬高
* 大部分塊狀元素內部可以嵌套塊狀或行內， 大部分行內只能嵌套行內
* 外邊距，塊狀沒問題，行內只能設置左右


padding 內間距 margin 外間距

7.27 行內元素和塊狀元素 * 精靈圖