HTML和CSS（九）

第九章 字体和颜色样式

目录

第九章 字体和颜色样式

一、用来指定和改变字体外观的属性

二、字体系列

三、调整字体大小

四、改变字体粗细

五、给字体添加样式

六、Web颜色

---

一、用来指定和改变字体外观的属性

body {

    /* 用font-family属性定义网页中的字体 */

    font-family: Verdana, Geneva, Arial, sans-serif;

    /* 用font-size属性控制字体大小 */

    font-size: 14px;

    /* 用color属性给文本添加颜色 */

    color: silver;

    /* 用font-weight属性设置字体的粗细*/

    font-weight: bold;

    /* 用text-decoration属性给文本添加更多样式（overline underline line-throught blink） */

    text-decoration: underline;

}

二、字体系列

字体系列一共有五种：

sans-serif：Verdana；Arial Black；Trebuchet MS；Arial；Geneva

    字体没有衬线，在电脑屏幕上比serif字体更具可读性

serif：Times；Times New Roman；Georgia

    字体有衬线，一般用于报纸印刷

monospace：Courier；Courier New；Andale Mono

    字母具有相同宽度，主要用来显示软件代码实例

cursive：Comic Sans；Apple Chancery

    看起来像是手写的字体，有时用于标题

fantasy：LAST NINJA；Impact

    有固定装饰的字体，在规范的Web设计中不常见

三、调整字体大小

1. 使用像素定义：设置字体高度

2. 使用百分数定义：相对于父元素

3. 使用“em”：指定比例系数

4.关键字：xx-small  x-small  small  medium  large  xx-large

                  浏览器将这些关键字转换成默认的像素值

                  每种尺寸比前一种大20%，small大约高12像素

技巧：使用一种关键字定义body字体大小，用em或百分数把别的元素的字体大小指定为相对于body字体大小的字体尺寸

注意：用像素指定字体大小时，IE不支持比例缩放

四、改变字体粗细

lighter  normal  bold  bolder

也可以把font-weight属性值设为100~900之间的一个数，但会有浏览器或字体不支持这种方法

五、给字体添加样式

italic（斜体） oblique（倾斜）

六、Web颜色

1. 颜色名

    17种颜色

    Aqua  Black  Blue  Fuchsia  Gray  Green  Lime  Maroon  Navy  Olive  Orange  Purple  Red  Silver  Teal  White  Yellow

2. 用红色、绿色、蓝色值定义颜色

    body {

        /* 用百分比 */

        background-color: rgb(80%, 40%, 0%);

    }

    body {

        /* 用0~255直接的某个数值 */

        background-color: rgb(204, 102, 0);

    }

3. 十六进制代码

    本质：告诉浏览器加入颜色中的红色、绿色、蓝色成分是多少

    以#开头，各用两位数字定义红色、绿色、蓝色

        e.g. #cc6600

        如果每两位数字都一样，可以简写。如：#ccbb00可以缩写为#cb0

 

七、文本修饰

要添加文本修饰，只要在元素中设置text-decoration属性就可以

可以同时设置几个decoration

    em {

        /* text-decoration只能选择一条规则，不能同时选择两条独立的规则；需要把两个值合并在同一规则中才能得到两种文本修饰。 */

        text-decoration: underline overline;

    }

如果文本继承了你不想要的文本修饰，用值“none”就可以去掉

下边框：border-bottom: thin dotted #888;

    一直延伸到边缘

八、要点

CSS提供许多属性来控制字体外观，包括font-family，font-weight，font-size和font-style。

一个font-family是一系列有共同特征的字体。

网页的字体系列有serif，sans-serif，monospace，cursive和fantasy。serif和sans-serif最常用。

访问者在你的网页上看到的字体格式取决于其电脑中安装的字体。

比较好的做法是在CSS属性font-family中定义多个字体以防用户未安装首选字体。

最后一种字体通常是一种通用字体，如serif或sans-serif。当浏览器没找到前几种时可以找合适的来代替。

用px，em，%或关键字定义font-size。

如果用像素（“px”）定义字体大小，就是告诉了浏览器字母的高度为多少像素。

em和%是相对字体大小，所以用em和%定义字体大小意味着字母的字体大小将是父元素字体大小的相对值。

用相对大小定义字体大小可以使网页具有更强的通用性。

在body规则中用字体大小关键字来设置基字体大小，那么如果用户想把文本变大或变小，所有的浏览器都可以按比例来缩放文字大小。

用font-weight属性可以将文本加粗。

font-style属性用例创建italic或oblique文本，italic和oblique修饰的文本是倾斜的。

网页颜色是通过把不同数量的红色、绿色和蓝色相混合产生的。

如果把红色100%、绿色100%和蓝色100%混合，就得到白色。

如果把红色0%、绿色0%和蓝色0%混合，就得到黑色。

可以用红色、绿色和蓝色的百分数，也可以用0~255的数字给出红色、绿色和蓝色的值或者用颜色的十六进制码来定义任何你想要的颜色。

要找到你想要的一种颜色的十六进制代码，用图形编辑器的调色盘或某种在线网页工具，轻而易举就能得到。

十六进制代码有6位数，每一位可以是0~F中的一个。前两位代表红色的数值，中间两位代表绿色的数值，最后两位代表蓝色的数值。

可以用text-underline属性给文本添加下划线。添加下划线的文本容易被用户当做链接文本，所以使用这个属性要谨慎。