CSS(二)

1.CSS 背景

CSS 属性定义背景效果:,当使用简写属性时，属性值的顺序为：:

• background-color设置元素的背景颜色。
• background-image把图像设置为背景。
• background-repeat设置背景图像是否及如何重复。
• background-attachment背景图像是否固定或者随着页面的其余部分滚动。
• background-position设置背景图像的起始位置。

1.1背景颜色

CSS中，颜色值通常以以下方式定义:

• 十六进制 - 如：#ff0000
• RGB - 如：rgb(255,0,0)
• 颜色名称 - 如：red

body {background-color:#b0c4de;}

1.2 背景图像

body {background-image:url('paper.gif');}

1.3背景图像 - 水平或垂直平铺

图像只在水平方向平铺 (repeat-x), 页面背景

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
//background-repeat:no-repeat;
background-position:right top;
}

1.4背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 background:

body {background:#ffffff url('img_tree.png') no-repeat right top;} 

2.文本

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
</style>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>

3.字体

3.1 设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}

3.2 用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */

3.3 使用百分比

body {font-size:100%;}

4.CSS 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：

• a:link- 正常，未访问过的链接
• a:visited- 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active- 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

• a:hover 必须跟在 a:link 和 a:visited后面
• a:active 必须跟在 a:hover后面

5.CSS 列表

CSS列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

5.1 列表

在HTML中，有两种类型的列表：

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表- 列表项的标记有数字或字母

/*无序列表*/
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
/*有序列表*/ 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}