CSS样式家族

      CSS样式家族可以帮助你在屏幕上画出随心所欲的网页样子。

背景

       想象你有一个网页，你可以用纯色（background-color）做背景,也可以用图片（background-image）做背景；用图片做背景时这个图片可以处在页面的东西南北中各个位置（background-position）；如果图片小于页面，默认x、y方向重复显示，你可以自定义只x方向或只y方向重复，也可以任性的不重复（background-repeat）；如果页面可以滚动，你还可以设置自己的背景是否要随页面的滚动而滚动（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%

//关键词可以按照任何顺序出现，但不能超过两个（一个对应水平方向，一个对应垂直方向；如果只有一个关键词，另一个关键词默认center）。其中 0% 0%相当于top left，50% 50%相当于center。百分数描述为50%的中心点和元素的中心点对齐。有些浏览器必须设置background-attachment:fixed才会生效。

background-repeat: repeat-x | repeat-y | no-repeat;  //默认x、y方向都重复

文本

      你的文本可以是七彩的（color）；它的显示方向可以从左往右，也可以从右往左（direction），全大写或全小写（text-transform），全凭你喜欢；你可以设置它的行高（line-height）、设置它的对齐方式（text-align）、来个下划线（text-decoration）、首行缩进（text-indent）；你可以设置单词间距（word-spacing），甚至字母间距（letter-spacing）；你还可以定义空格是否被合并（white-space）。

color:

direction: ltr | rtl

letter-spacing: normal(0) | -0.5em | 1em

line-height //行高撑起整个元素

text-align: left | right | center | justify

text-decoration: none | underline | overline | line-through | blink

text-indent: 2em | 20%； //块级元素首行缩进

text-transform: none | uppercase | lowercase | capitalize(单词首字母大写)

white-space: normal | pre | nowrap | pre-wrap | pre-line //空格和还行会不会被合并

word-spacing: normal(0) | -0.5em | 1em

字体

字体是各个元素内容的基因之一

font | font-family | font-size | font-style（normal | italic） | font-variant | font-weight(normal-400 | bold-700 | bolder | lighter | inherit)

简单介绍下font-variant: normal | small-caps | inherit 这个小妖精。small-caps表示文本中的小写字母小可爱以自己的身高为代价向巫婆换回全大写的特效。variant（变体），好好学英文。

normal VS small-caps

列表

列表前面的小圆点也是可以自定义的啊喂

list-style: 简写属性

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(默认) | collapse | inherit

border-spacing: x x    //相邻单元边框之间的距离，当且仅当border-                                                      collapse=separate时生效；联想到html的cellspacing

caption-side: top | bottom | inherit //用于table的caption标签

empty-cells: show | hide //是否在空单元格周围绘制边框

table-layout: automatic | fixed | inherit 

//自动布局中，列的宽度由列单元格中没有折行的最宽的内容设定，显示慢；

固定布局与单元格内容无关

轮廓

你还可以在元素border外边再包一层。。

outline | outline-color | outline-style(dotted\dashed\solid..) | outline-width