CSS一些知识点

1、字体大小[font-size]

字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如：

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸。

2、CSS属性font是上述各有关字体的CSS属性的缩写用法。

比如说下面四行应用于p元素的代码：

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

如果用font属性的话，上述四行代码可简化为：

p {

font: italic bold 30px arial, sans-serif;

}

font属性的值应按以下次序书写：

font-style | font-variant | font-weight | font-size | font-family

3、字符间距[letter-spacing]

CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写：

h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

4、CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。

伪类是什么？

伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内

我们来看一个例子。正如你所知道的，在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器selector

a {

color: blue;

}

一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。

a:link {

color: blue;

}

a:visited {

color: red;

}

为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为a:hover。

伪类:link用于浏览者从未访问过的链接。

在下面的示例代码中，我们将未访问过的链接设为浅蓝色。

a:link {

color: #6699CC;

}

伪类： visited

伪类:visited用于浏览者已访问过的链接。比如，下面的代码将已访问过的链接设为深紫色：

a:visited {

color: #660099;

}

伪类： active

伪类:active用于活动的链接（即获得当前焦点的链接）。

下例将活动的链接设为具有***背景：

a:active {

background-color: #FFFF00;

}

伪类： hover

伪类:hover用于有鼠标悬停的链接。

这能制造出有趣的效果。例如，如果你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么CSS可以这样写：

a:hover {

color: orange;

font-style: italic;

}

要去掉下划线，只要把text-decoration属性的值设为none就行了

a {

text-decoration:none;

}