初识CSS

CSS=Selector+Declaration(=Property+Value)
如果 value 多于一个单词，需加上引号

id 对单一元素，在 style 中以 # 开头，不能以数字开头
class 对多个元素，在 style 中以  . 开头，不能以数字开头
Attributes 也可作为 Selectors，但要加 [ ]

Properties
 background-color  red/#ff0000/rgb(255,0,0)
 background-image
 background-repeat  图片重复方向：repeat-x/repeat-y/no-repeat
 background-attachment 图片附着：fixed，图片不随页面滚动
 background-position 图片位置：水平与垂直方向上的两个位置数值，eg:6px 0 or left/right top/bottom
 这 5 个 properties 可以用一个代替 background，各 value 按上述顺序用空格隔开，可缺省部分 value

 text-align  文字对齐方式：center/left/right/justify
 text-decoration 文字装饰：overline/line-through/underline/none(主要用于去除链接下划线)
 text-transform 大小写转换：uppercase/lowercase/capitalize
 text-indent 文字缩进，主要用于首行缩进
 text-shadow 文字阴影，eg:2px 2px #ff0000，依次为阴影右移与下移距离及颜色
 letter-spacing 字母间距，负数为缩短间距
 word-spacing 词间距
 line-height 行间距
 direction  文字方向：rtl(right-to-left)

 font-family 字体
 font-style  主要用于 italic :normal/italic/oblique(similar to italic)
 font-size  默认 16px = 1em 
 font-weight 字体宽度：normal/lighter/bold/bolder
 font-variant 字体变形：normal/small-caps

 list-style-type ol:upper-roman/lower-alpha/lower-greek  ul:none/circle/square

 vertical-align table 中 td 垂直位置：top/middle/bottom

 width  
 max-width 防止 width 大于该值
 min-width  防止 width 小于该值
 height
 max-height
 min-height

 display  元素展现方式：none(不显示，不占空间)/inline(不另起一行)/block(另起一行)
 visibility  元素可视性：hidden(隐藏，占据空间) 

 position  absolute(绝对位置，top 相对于页面)/relative(相对位置，top 相对原来位置)/fixed(不随页面滚动)
 top/bottom/left/right 负值向相反方向移动
 z-index  stack order，层叠顺序，正值显示在负值之上
 overflow  内容溢出时：visible(继续显示，默认)/hidden(隐藏溢出内容)/scroll(可在范围内用 scroll bar 滚动)
 cursor  光标：auto/text/crosshair/n(swe)-resize/help/move/pointer/progress/wait

 float  元素悬浮位置：left/right，之后的元素将包围它
 clear  元素的哪条边不包围浮动元素：left/right/both  

 opacity  不透明度，value:0.0-1.0 ( for IE8 and earlier——filter:alpha(opacity= value )，value:0-100 )

Box Model = Margin + Border + Padding + Content
Width and Height properties are the Width and Height of Content

 border-style none/dotted/dashde/solid/double/groove/ridge/inset/outset/hidden
   也可按 top right bottom left 顺序设定 style
 border-width pixels or thin/medium/thick(需先设置 border-style)
 border-color 需先设置 border-style
 以上 3 个properties 可用 border 表示，按 width style color 顺序设定
 border-collapse 边框折叠：collapse

 outline  a line outside the borders，可按 color style width 顺序设定

 margin  是透明的（transparent），可按 top/right/bottom/left 顺序设定 width or auto

 padding  color 由 background-color 而定，可按 top/right/bottom/left 顺序设定 width

Pseudo-classes
 link  未被访问
 visited  已被访问
 hover  指针移到连接上(需先设置 link ,visited)，可用于所有 element
 active  指针点击时(需先设置 hover)
 first-child  某类元素子元素中的第一个该元素，p:first-child，表示某元素包含的第一个 p 元素
 focus  input:focus，当光标点中输入框时
 lang

Pseudo-elements
 first-line  p:first-line，p 元素的第一行
 first-letter  p:first-letter，p 元素的第一个字母
 before  p:before，在 p 元素前添加内容，内容由 content 属性确定
 after  p:after，在 p 元素之后添加内容，内容由 content 属性确定

Navigation Bar = List of Links
 Vertical Bar ul{list-style-type:none;}
 Horizontal Bar li{float:left;} a{display:block;width:80px;}/li{display:inline;}