第九章 字体和颜色样式 扩大你的词汇量

1、用font- family属性定义网页中的字体

每个font-family包括一系列具有相同特征的字体。字体系列一共有五种：sans-serif、serif、monospace、cursive、fantasy，每个系列又包括许多字体，所以在这里每个系列我们只举很少的几个例子, sans-serif、serif是最常用的。

sans-serif family｛verdana, arial black,trebuchet ms,arial,geneva｝ sans-serif系列是没有衬线的字体，在电脑屏幕上这些字体要比serit字体更具可读性。sans-serif的意思是没有衬线。

 

Serif系列是有衬线的字体，一般用于报纸印刷。

衬线（serits）是字母主线端的短细线。

Serif family{times,times new roman,Georgia}

 

Monospace  family{courier,courier new,andale mono}; monospace系列的字母具有相同宽度，例如 ，字母“I”与字母“m”所占的水平空间是相同的，这些字体主要用来显示软件代码实例。

 

Cursive family {comic sans,apple chancery}

Cursive 系列是一些看起来像是手写的字体，有时用于标题。

 

Fantasy family {last ninja ,impact}fantasy系列是一些有固定装饰的字体，这些字体并不多见，在规范的WEB设计中也不常用。

 

仔细观察字体系列：serif字体看起来古典而优美，而sans-serif字体看起来清晰而易读。Monospace 字体像是用打字机打出来的，cursive 和fantasy 字体就比较有趣或格式化。

2、用font-size 属性控制字体 的大小。

◎Font-size:14px;在css中用一个数字紧跟“px”的方式定义像素，像素数字后必须紧跟px,中间不能有空格。

◎font-size: 150%;与像素精确地规定字体大小不同，百分数用与别的字体大小的相对值来定义字体大小。

◎它跟百分数一样，是另一种相对测量单位，不过用em不是指定百分数，而是指定比例因数

Font-size: 1.2em;这表明字体大小应该按比例放大1.2倍。

◎还有一种定义字体大小的方法：关键字，可以把字体大小定义为：xx-small,x-small,small,medium,large,或者xx-large,这些是各种关键字互相比较的典型大小，每种尺寸都比前一种大20%，通常把small定义为大约高12像素。

◎应该用哪种方法定义我的字体大小？

选择一种关键字（推荐用small或medium）定义body字体大小，也就是网页的默认字体大小。

用em或者百分数把别的元素的字体大小指定为相对 于body 字体大小的字体尺寸

◎◎◎注意：如果字体大小是用像素来指定的，IE用户就不能调整字体大小，这也是要少用像素指定字体大小 的一个原因。

◎◎在大多数情况下默认body字体大小是16像素；<h1>是默认body字体大小的200%，<h2>是150%，<h3>是120%，<h4>是100%，<h5>是90%，<h6>是60%

3、用color属性给文本添加颜色。

4、用font-weight属性设置字体的粗细

font-weight：bold;   (粗)   font-weight：normal;(细)

5、用text-decoration属性给文本添加更多样式

6、给字体添加样式

Not italic , italic文本向右倾斜而且衬线有弯曲。

Not oblique ,oblique 中普通字母向右倾斜。

italic ,oblique是让字体倾斜显示的两种格式。

7、别忘<em>是用来指定结构的，它意味着强调一段文字。

8、用红色、绿色、蓝色值定义颜色

Body {  background-color:rgb(80%,40%,0%)  }

9、用十六进制代码定义颜色，每两位数字代表红色、绿色、蓝色中的一种颜色。#cc6600

快速了解十六进制代码

●把十六进制颜色分成三部分   # cc  66  00

●把每个十六进制数转化成相应的十进制数  Cc=12*16+12=204

●别的两个值也这么换算  

10、em{ text-decoration:line-through;}这条规则将会使元素<em>的文本中央有条线穿过

em{ text-decoration:line-underline overline;}这条规则使元素<em>既有underline,有overline.

em{ text-decoration:line-none;}采用这条规则，文本就没有修饰了。

11、用border-corlor属性给边框定义它自己的颜色。

12、XHTML有一个我们没讲过的元素叫做<del>，它可以标明xhml中应该被删掉的内容。同样，有一个叫做<ins>的元素，可以标明应该插入的内容，一般浏览器会分别用strike-througt和underline样式化这些元素，用<del>和<ins>，不只是样式化元素，而且标明了内容的意义。

13、CSS提供许多属性来控制字体外观，包括font-family,font-weight,font-size,font-syle.

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

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

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

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

18、用px,em,%或关键字定义font-size.

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

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

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

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

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

24、font-syle属性用来创建italic或oblique文本，italic和oblique修饰的文本是倾斜的。

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

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

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

28、CSS有17种预定义的颜色，包括黑色、白色、红色、蓝色和绿色。

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

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

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

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