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属性给文本添加下划线。添加下划线的文本容易被用户当做链接文本,所以使用这个属性要谨慎。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值