CSS 笔记（4）

1：CSS字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形。

1：CSS字体系列

在CSS中，有两种不同类型的字体系列名称：（1）：通用字体系列 - 拥有相似外观的字体系统组合；（2）：特定字体系列 - 具体的字体系列。

除了各种特定的字体系列之外，CSS定义了五种通用字体系列：（1）：Serif字体；（2）：Sans-serif字体；（3）：Monospace字体；（4）：Cursive字体；（5）：Fantasy字体

2：指定字体系列

使用font-family定义文本的字体系列。

使用通用字体系列：如果希望文档使用一种sans-serif字体，但是并不关心是哪一种字体：

body {font-family:sans-serif;} 

这样用户代理就会从sans-serif字体系列中选择一个字体，并将其应用到body元素。因为有继承，这种字体选择还将应用到body元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。

指定字体系列：除了使用通用的字体系列，还可以通过font-family属性设置更具体的字体。

h1 {font-family:Georgia;}

使用引号：当字体名中有一个或多个空格，或者如果字体名包括#或$之类的符号，才需要在font - family声明中加引号。单引号和双引号都可以。

3：字体风格

font-style属性最常用于规定斜 体文本。该属性有三个值：（1）normal - 文本正常显示；（2）italic - 文本斜体显示；（3）：oblique - 文本倾斜显示。

italic和oblique的区别：font - style非常简单：用于在normal文本、italic文本和oblique文本之间的选择。唯一有点复杂的是明确italic文本和oblique文本之间的区别。斜体（tialic）是一种简单的字体风格，对每个字母结构都有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic和oblique文本在Web浏览器中看上去完全一样。

4：字体变形

font - variant属性可以设定小型大写字母。小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

p {font-variant:small-caps;}

5:字体加粗

font-weight属性设置文本的粗细。使用bold关键字可以将文本设置成粗体。

6：字体大小

font-size属性设置文本的大小。font-size值可以是绝对或相对值。

绝对值：（1）将文本设置为指定的大小。（2）不允许用户在所有浏览器中改变文本的大小。（3）绝对大小在确定了输出的物理尺寸是很有用。

相对大小：（1）相对于周围的元素来设置大小。（2）允许用户在浏览器改变文本大小。

使用像素来设置文本大小：通过像素设置文本大小，可以对文本大小进行完全控制：font-size:22px;

使用em来设置文字大小：1em=16px。

2：CSS 链接

我们能够以不同的方法为链接设置样式。

1：设置链接的样式

能够设置链接样式的CSS属性有很多种。如：color、font-family、background等。

链接的四种状态：（1）a:link - 普通的、未被访问的链接；（2）a:visited - 已被访问的链接；（3）a:hover - 鼠标指针位于链接上方；（4）a:active - 链接被点击的时刻。

当为链接的不同状态设置样式时，请按照以下次序规则：

（1）a:hvoer必须位于a:link和a:visited之后；

（2）a:active必须位于a:hover之后

2：常见的链接样式

文本修饰：text-decoration属性大多用于去掉链接中的下划线。

背景色：background-color属性规定链接的背景色。

3：CSS 列表

CSS列表属性允许你放置、改变列表项标志，或将图像作为列表项标志。

1：列表类型

要影响列表的样式，最简单的方法就是改变其标志类型。要修改用于列表项的标志类型，可以使用属性list-style-type。

有时，常规的标志是不够的。你可以想对各标志使用一个图像，这可以利用list-style-image属性做到。ul li{list-style-image: url (xxx.gif)}。

4：CSS表格

CSS表格属性可以帮助您极大地改善表格外观。

1：表格边框

如需在CSS中设置表格边框，请使用border属性。

table,th,td
{
    border: 1px,solid,biue;
}

2：折叠边框

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

table
{
border-collapse:collapse;
}

3：表格宽度和高度

通过width和height属性定义表格的宽度和高度。

4：表格文本对齐

text-align和vertical-align属性设置表格中文本的对齐方式。

text-align属性设置对齐方式，比如左对齐、右对齐或者居中。

vertical-align属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。

5：表格内边距

如需控制表格中内容与边框距离，可以为td和th元素设置padding属性。

6：表格颜色

设置边框的颜色，以及th元素的文本和背景颜色。