? ? ? CSS樣式家族可以幫助你在屏幕上畫(huà)出隨心所欲的網(wǎng)頁(yè)樣子右核。
背景
? ? ? ?想象你有一個(gè)網(wǎng)頁(yè)，你可以用純色（background-color）做背景,也可以用圖片（background-image）做背景丛晌；用圖片做背景時(shí)這個(gè)圖片可以處在頁(yè)面的東西南北中各個(gè)位置（background-position）仅炊；如果圖片小于頁(yè)面，默認(rèn)x澎蛛、y方向重復(fù)顯示抚垄，你可以自定義只x方向或只y方向重復(fù)，也可以任性的不重復(fù)（background-repeat）瓶竭；如果頁(yè)面可以滾動(dòng)督勺，你還可以設(shè)置自己的背景是否要隨頁(yè)面的滾動(dòng)而滾動(dòng)（background-attachment）
background: ? #00FF00 url(bgimage.gif) no-repeat fixed top;
background-attachment: ? ?scroll | fixed | inherit
background-color ? | ? background-image: url('')
background-position: top | bottom | left | right | center | 100px | 50%
//關(guān)鍵詞可以按照任何順序出現(xiàn)，但不能超過(guò)兩個(gè)（一個(gè)對(duì)應(yīng)水平方向斤贰，一個(gè)對(duì)應(yīng)垂直方向智哀；如果只有一個(gè)關(guān)鍵詞，另一個(gè)關(guān)鍵詞默認(rèn)center）荧恍。其中 0% 0%相當(dāng)于top left瓷叫，50% 50%相當(dāng)于center。百分?jǐn)?shù)描述為50%的中心點(diǎn)和元素的中心點(diǎn)對(duì)齊送巡。有些瀏覽器必須設(shè)置background-attachment:fixed才會(huì)生效摹菠。
background-repeat: repeat-x | repeat-y | no-repeat;? //默認(rèn)x、y方向都重復(fù)
文本
? ? ? 你的文本可以是七彩的（color）骗爆；它的顯示方向可以從左往右次氨，也可以從右往左（direction），全大寫(xiě)或全小寫(xiě)（text-transform）摘投，全憑你喜歡煮寡；你可以設(shè)置它的行高（line-height）虹蓄、設(shè)置它的對(duì)齊方式（text-align）、來(lái)個(gè)下劃線（text-decoration）幸撕、首行縮進(jìn)（text-indent）薇组；你可以設(shè)置單詞間距（word-spacing），甚至字母間距（letter-spacing）坐儿；你還可以定義空格是否被合并（white-space）律胀。
color:
direction: ltr | rtl
letter-spacing: normal(0) | -0.5em | 1em
line-height //行高撐起整個(gè)元素
text-align: left | right | center | justify
text-decoration: none | underline | overline | line-through | blink
text-indent: 2em | 20%； //塊級(jí)元素首行縮進(jìn)
text-transform: none | uppercase | lowercase | capitalize(單詞首字母大寫(xiě))
white-space: normal | pre | nowrap | pre-wrap | pre-line //空格和還行會(huì)不會(huì)被合并
word-spacing: normal(0) | -0.5em | 1em
字體
字體是各個(gè)元素內(nèi)容的基因之一
font | font-family | font-size | font-style（normal | italic） | font-variant | font-weight(normal-400 | bold-700 | bolder | lighter | inherit)
簡(jiǎn)單介紹下font-variant: normal | small-caps | inherit 這個(gè)小妖精貌矿。small-caps表示文本中的小寫(xiě)字母小可愛(ài)以自己的身高為代價(jià)向巫婆換回全大寫(xiě)的特效炭菌。variant（變體），好好學(xué)英文站叼。
列表
列表前面的小圓點(diǎn)也是可以自定義的啊喂
list-style: 簡(jiǎn)寫(xiě)屬性
list-style-image: url('')
list-style-position: inside | outside
list-style-type: disc | circle | square | none |?
? ? ? ? ? ? ? ? ? ? ? ?decimal | decimal-leading-zero |?
? ? ? ? ? ? ? ? ? ? ? ?lower-roman | upper-roman | lower-alpha | upper-alpha
表格
border-collapse: separate(默認(rèn))?| collapse | inherit
border-spacing: x x ? ?//相鄰單元邊框之間的距離娃兽，當(dāng)且僅當(dāng)border- ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?collapse=separate時(shí)生效；聯(lián)想到html的cellspacing
caption-side: top | bottom | inherit //用于table的caption標(biāo)簽
empty-cells: show | hide //是否在空單元格周?chē)L制邊框
table-layout: automatic | fixed | inherit?
//自動(dòng)布局中尽楔，列的寬度由列單元格中沒(méi)有折行的最寬的內(nèi)容設(shè)定投储，顯示慢；
固定布局與單元格內(nèi)容無(wú)關(guān)
輪廓
你還可以在元素border外邊再包一層阔馋。玛荞。
outline | outline-color | outline-style(dotted\dashed\solid..) | outline-width
