<HeadFirst_HTML与CSS> O'REILLY_Chap.8_增加字体和颜色样式

<HeadFirst_HTML与CSS> O’REILLY_Chap.8_增加字体和颜色样式

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML与CSS>作者 Eric Freeman & Elisabeth Robson

感谢<HeadFirst_HTML与CSS>翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

CSS提供了很多属性对字体的外观加以控制, 包括

font-family

,

font-weight

,

font-size

,

font-style

.

font-family

是一组有共同特征的字体.

用于Web的字体系列包括

serif

,

sans-serif

,

monospace

,

cursive

和

fantasy

.

serif

和

sans-serif

字体最为常用.

访问者在你的Web页面上看的字体取决于他们自己的计算机上安装了哪些字体, 除非你使用Web字体.

在

font-family

CSS属性中指定候选字体是一个好主意, 以防用户没有安装你的首选字体.

最后一个字体要指定为一个通用字体, 如

serif

或

sans-serif

, 这样一来, 如果找不到其他字体, 浏览器可以替换适当的字体.

如果你要使用某种字体, 而默认情况下用户可能没有安装这种字体, 可以在CSS中使用

@font-face

规则.

字体大小通常使用像素, em, 百分数或关键字指定.

如果使用像素(“px”)来指定字体大小, 就是在告诉浏览器字母高度是多少像素.

em

和

%

是相对字体大小, 所以使用

em

和

%

指定字体大小是, 就意味着字体大小要相对于其父元素的字体大小指定.

使用相对字体大小可以让你的页面更可维护.

在

body

规则中使用字体大小关键字来设置基本字体大小, 这样如果用户希望文本更大或更小, 所有浏览器就能按比例缩放字体大小.

可以使用

font-weight

CSS属性设置文本为粗体.

font-style

属性用于创建斜体或倾斜文本, 斜体或倾斜文本是倾斜的.

Web颜色是混合不同数量的红, 绿, 蓝色得到的.

如果混合红色100%, 绿色100%和蓝色100%, 可以得到白色.

如果混合红色0%, 绿色0%和蓝色0%, 可以得到黑色.

CSS有16个基本颜色, 包括黑色, 白色, 红色, 蓝色, 和绿色, 以及150种扩展颜色.

可以使用红, 绿, 蓝百分数指定你想要的颜色, 也可以使用红, 绿, 蓝数值(0~255)指定, 或者使用颜色的十六进制码来指定颜色.

要找到你想要的一个颜色的十六进制码, 有一种很容易的方法, 可以使用一个照片编辑应用的颜色选取工具, 或者某个在线Web工具, 这样的工具有很多.

表示颜色的十六进制码有6位, 每一位取值为0~F. 前两位表示红色数量, 接下来两位表示绿色数量, 最后两位表示蓝色数量.

可以使用

text-decoration

属性为文本创建一个下划线. 有下划线的文档通常会被用户误以为是链接文本, 所以要谨慎使用这个属性.