css复习整理(二)：css样式

一.背景样式: 

background-color, background-image, background-position, background-attachment, background-repeat，可以通过这些属性设置背景的颜色，背景图片［如background-image: url('image.png')］，背景图片所在位置，是否重复以及滚动时背景图片不动等效果。当然，最常用的是简写这一属性，如 background: #00FF00 url('image.gif') no-repeat fixed top;

二.文本样式

1.文本样式

  有color, direction(文本方向), line-height(行高), letter-spacing, text-align, text-decoration, text-indent(首行缩进), text-shadow, text-transform(字母大小写), unicode-bidi, white-space(处理空格、回车), word-spacing。

2.字体样式

  字体样式有font-family, font-size, font-style(用来设置斜体), font-variant(设置小型大写字母), font-weight, font等。其中font-family可以以逗号分开设置多个字体，用户代理会按所列的顺序查找这些字体；font-weight可设置为normal，bold(加粗)，bolder(比继承值更粗)，lighter(比继承值细)，共有100~900的9级加粗度；font-size可设置为绝对的(px)和相对的大小(em)，绝对大小不允许用户在浏览器更改大小，而使用em的相对大小则允许用户在浏览器调整字体大小，但IE仍会出现问题，故常用以下写法实现：

  body {font-size:100%;}
  h1 {font-size:3em;}
  h2 {font-size:2.5em;}

最后font可设置所有字体属性，按照如下顺序：font-style，font-variant，font-weight，font-size/line-height，font-family如font:italic bold 12px/20px arial,sans-serif。链接的样式设置多用伪类实现，已在上节中有所介绍。

三.列表及表格样式

1.列表样式

  列表有list-style-type, list-style-image, list-style-position, list-style等样式设置，如list-style:square inside url('/i/arrow.gif')。

2.表格样式

  表格边框样式中，将table，th，td设置border，此为双边框，若设置border-collapse:collapse;则为单边框，可用text-align 和 vertical-align设置文本对其方式，此外还有border-spacing(分隔单元格边框的距离), caption-side(表格标题的位置), empty-cells(是否显示空单元格), table-layout(设置显示单元、行和列的算法)。

3.轮廓样式

  举例如下： outline:#00FF00 dotted thick;

四.高级样式

1.小知识点

  对齐方式可用position，float实现，文本可用text-align，块元素可用margin: 20px auto;实现水平方向的居中；尺寸上可设置最大/最小的高度/宽度；还有display(设置是内联/块元素), clear(元素的侧面是否允许其他的浮动元素), cursor(指向某元素之上时显示的指针类型，如Pointer, wait, Crosshair, Move), visibility(是否可见)。

2.导航栏

  导航栏一般使用ul li实现，水平导航栏有两种办法，一是设置li为inline，二是使li向左浮动，第二种办法可以设置a的display为block，进而可设置其为等宽；若是垂直导航栏，要设置a的display为block，这样可使文字外部分可点击，也可为其设置宽度。

3.图片与媒介

  图片有opacity属性设置透明度，根据不同的媒介可设置不同的样式，使用@media实现在浏览器，打印等不同情况时可进行不同的样式设置。