CSS常见样式

CSS背景

CSS可以设置背景颜色，或者选择图片作为背景

背景色

下面的例子将<p>元素的背景色设置为灰色

p {background-color: gray;}

注：background-color不能继承，其默认值是transparent，即透明。即没有指定背景色的元素都是透明的，以显示其父元素的背景。

图像背景

请看下面的例子：

body {background-image: url(/i/eg_bg_04.gif);}

背景重复

如果要在页面上对背景进行重复，使用background-repeat属性。可以选择在x或者y方向上重复，或者不在任何方向重复。如：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

背景定位

用background-position改变图像在背景中的位置，如:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

注：常见的位置属性：top,bottom,center,right,left。关键字不能超过两个，一个水平方向，一个数值方向。可以以任意顺序组合。当只出现一个关键字时，另一个默认是center。如top等价于center。

背景关联

如果文档较长，当文档向下滚动时到超过图片位置时，图像就会消失。可以通过background-attachment属性防止出现这种情况。

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

CSS文本

通过设置文本属性，可以改变文本颜色， 字符间距，对齐文本，缩进等

缩进文本

首行缩进是一种常见的缩进方式，text-indent属性实现了此功能，如：

p {text-indent: 5em;

注：

• 此属性只能用于块级元素
• 此属性的值可以是负数。慎用次功能，防止超出页边距。

水平对齐

text-align属性定义了水平对齐的方式，分别是left,right,center和justify。
前三个意思相当直接，分别是左对齐，右对齐和居中。最后一个是两端对齐，即两端都要填充文本。通过调整字体间距使得两端恰好对齐。

字间隔

word-space属性可以改变字词之间的标准间隔，默认值是normal。
word-space的值可以是整数或者负数。

字符转换

text-transform处理文本的大小写，有4各值，分别是：

• none:不处理
• uppercase：全部大写
• lowercase：全部小写
• capitalize：首字母大写

文本装饰

text-decoration属性有如下五个值：

• none:不处理
• underline:下划线
• overline上划线
• line-through：贯穿横线
• blink：文本闪烁
  注：none是取消文本的所有装饰。例如超链接默认就有下换线，如果要取消其下划线，则应该显式的设置此属性为none。

处理空白字符

white-space属性有如下值：

• normal：将多余的空白符忽略，仅显示一个空白符。
• pre:将正常显示空白符

CSS字体

定义了文本的字体，大小，加粗，斜体变形等。

字体

font-family:定义字体，常见的值如下：

• Serif 字体
• Sans-serif 字体
• Monospace 字体
• Cursive 字体
• Fantasy 字体
  例如

body {font-family: sans-serif;}

注：

1. 要考虑到用户可能没有安装某种字体的情况，因此应该如下设置：

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

这样设置的好处是浏览器会从前到后一次检查用户有没有安装这种字体。基本字体是所有浏览器都安装的。
2. 当字体的值包含空格，#，$等字符时，应该将其用单引号或者双引号包围。

字体风格

font-style属性可以用于规定斜体文本，其常见的值如下：

• normal：正常显示
• italic:斜体显示
• bolique:倾斜显示

字体加粗

font-variant属性可以设置文本粗细。其值可以是bold代表粗体，或者是100到900之间的数。值越大，文本越粗。

字体大小

font-size设置了字体大小，可以是相对值或者绝对值。绝对值的单位是px，如：

h1 {font-size:60px;}

默认情况下，字体大小是16px。
相对值的单位是em，此时字体会相对于父元素的字体而改变。1em相当于父元素的字体大小。
也可以使用百分比设置字体大小，如

body {font-size:100%;}

CSS链接

链接有如下四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻
  当为不同状态的链接设置样式时，应该按照如下次序：
• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后
  此外，还可以设置链接的背景色，字体，有无下划线等。