CSS背景以及文本

css设置背景：

<style type="text/css">
 /*background-image: 直接设置x，y重复而且平铺整个body*/
 /*下面两句的功能图片在昨边居中*/
 /*background-position:left;*/
  /*background-attachment:fixed;*/
 body{
    background-color: gray;
    background-image: url(123.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    /*background-position:10% 0%; 第一个参数50%水平居中  第二个参数50%垂直居中*/
    background-position:210px 110px;
 }
/*p.flower p.中间不能有空格*/
 p.flower { background-image: url(bubbleMine.jpg);  }


</style>

css设置文本：

/*padding内边距      text-indent 4em：首行缩进，可以为负数 ,也可以是百分数，缩进父元素的%数*/
 p {background-color: yellow; padding: 20px;  text-indent: 4em;}

/*p.flower p.中间不能有空格*/
 p.flower { background-image: url(bubbleMine.jpg); text-align: justify;  }

文本间隔：

h4 {letter-spacing: 20px}

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

h1 {text-transform: uppercase}

nderline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

a {text-decoration: none;}

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：如果一个元素有两个值，不会叠加，优先的会期待之前的

a:link a:visited {text-decoration: underline overline;}

 white-space:

p {white-space: normal;}

direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

 font-family：可以输入多个，从第一个开始，优先级，都好隔开

h1 {font-family: Georgia, serif;}

font-sytle：font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。italic倾斜， 一般italic和oblique在浏览器中没有区别

p.oblique {font-style:oblique;}

全部字母转大写，而且第一个单词的第一个字符大一些 

p {font-variant:small-caps;}

 font-weight：关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

p.thick {font-weight:bold;}

h1 {font-size:60px;}

列表样式

/*none disc circle decimal decimal-leading-zero square upper-roman lower-alpha*/
/*ul {list-style-type : square}*/

系统的图片不能满足我们的需要

ul li {list-style-image : url(bubbleMine.jpg)}

/*该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。*/

/*li {list-style : url(example.gif) square inside}*/
/*list-style-position*/
ul
{
list-style-position:inside;
}

table 

border-collapse 属性设置是否将表格边框折叠为单一边框：

table
  {
  border-collapse:collapse;
  }

table
  {
  100%;
  }

表格标题

<caption>This is a caption</caption>

表格水平间距，垂直间距

border-spacing: 10px 50px

 隐藏空的cell数据

empty-cells: hide;

边框：

outline-color  outline-style outline-width

p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}

dotted dashed solid double groove  ridge  inset outset      IE8  

p 
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}