第九章 字体和颜色样式
目录
一、用来指定和改变字体外观的属性
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属性给文本添加下划线。添加下划线的文本容易被用户当做链接文本,所以使用这个属性要谨慎。