HTML&CSS基础篇之十一：字体与颜色样式

代码

body {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: small;
}

h1, h2 {
    font-weight: normal;
    color: #cc6600;
    /*text-decoration: underline;*/
    border-bottom: thin dotted #888888;
}

h1 {
    font-size: 170%;
}

h2 {
    font-size: 130%;
}

blockquote {
    font-style: italic;
}

---

纲要

CSS来控制文本的字体、格式、颜色和文本修饰等。

• font-family属性定义网页的字体
  在css中，字体被分成几个字体系列，大多数PC和移动端一般只安装了特定的几种字体，所以选择时要慎重。

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

• 用color属性给文本添加颜色

• 用font-weight属性设置字体的粗细。

• 用text-decoration属性给文本添加更多样式。

---

字体系列

每个font-family包括一系列具有相同特征的字体。字体系列一共有五种：sans-serif、serif、monospace、cursive和fantasy。
每一个系列又包括许多字体。

1. sans-serif 系列是没有衬线(serifs)的字体。在PC屏幕上这些字体要比serif字体更具可读性。
   Verdana
   Arial Black
   Trebuchet MS
   Arial
   Geneva

2. serif系列是有衬线(serifs)的字体，一般用于报纸印刷。
   衬线(serifs)是字母主线端的短细线。
   Times
   Times New Roman
   Georiga

3. Monospace 系列的字母具有相同的宽度。例如，字母 i与字母m所占的水平空间是相同的。这些字体主要用来显示软件代码实例。
   Courier
   Courier New
   Andale Mono

4. Cursive 系列是一些看起来像手写的字体，有时用于标题。
   Comic sans
   Apple Chancery

5. Fantasy 系列是一些有固定修饰的字体，这些字体并不多见，在规范的Web设计中也不常用
   LAST NINJA
   Impact

不同的电脑，其中=字体会有所不同。实际上，操作系统和用户所装的应用程序不同，可用的字体也会有所不同。所有，谨记，你的用户电脑中的字体也许跟你电脑中的字体不一样。

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

用CSS定义字体系列

body {
    font-family: Verdana, Genva, Arial, sans-serif;
}

font-family 通常指定几个不同的字体名列表，它们属于同一系列
可以在font-family定义多种字体，只要用逗号把字体名称分开就行。

拼写出字体名，注意区分大小写。
末尾通常加一个通用的字体系列名，像“serif“、“sans-serif“、“monospace“。

font-family定义的工作原理

浏览器是这样解释font-family指定的字体的：
查找计算机中有没有Verdana这种字体，如果有，元素就用这种字体。

如果没有Verdana，就查找字体Genva,如果有，就用这种字体

如果连Genva也没有，就查找字体Arial,如果有，就用此字体。

最后，如果这些具体的字体都没有，就使用浏览器默认的某个”sans-serif”字体。

不一定非要指定四种不同的字体，可以是两种，三种等。
只写一个默认字体，不能根据你自己的意愿变换字体，不推荐使用。

Q&A

font-family属性可以创建自己喜欢的字体列表。但愿大多数浏览器都有你首选的一种字体，如果没有，浏览器至少可以保证能从同一列中提供一种普通的字体。

遇到需要指定由几个单词组成的字体名，在font-family声明中给字体名加上双引号就可以。

font-family 字体排序，是以某种优先权排列的字体系列。越前面优先级越高，最后一种字体可以笼统地指定为通用的”sans-serif”或“serif”,只要它跟你列表中所有的字体同属于一个系列就行。不同会出现什么情况呢？？？

“sans-serif”或“serif”不是真正的字体名，但浏览器没找到前面声明的几种字体，就会找一个真正的字体来代替”sans-serif”或“serif”。而代替它的字体就是浏览器默认的那个系列中的字体。

建立一个最适合于你的页面的字体列表，同时希望用户安装了其中一种。如果没有，至少可以寄希望于浏览器提供一种同系列中的普通字体。
保证font-family声明中包含windows和Mac都能出现的字体。

Windows和Mac中都可以使用的字体
Andale Mono
Arial
Arial Black
Comic sans
Courier New
Georgia
impact
Times New Roman
Trebuchet MS
Verdana

只在Mac中可使用的字体
Geneva
Courier
Helvetica
Times

调整字体大小

PX

可以用像素定义字体大小，用像素定义字体大小，就是告诉浏览器字母的高是多少像素。

body {
    font-size:14px;
}

像素数字后必须紧跟px，中间不能有空格
设置字体为14像素高意味着从字母的顶部到底部有14像素。

%

与像素精确地规定字体大小不同，百分数用于别的字体大小的相对值来定义字体大小。
font-size： 150%；
表明字体大小应该是另一个字体大小的150%。然而，另一个字体大小指哪个父元素呢，因为font-size是一个从父元素继承来的属性，定义字体大小为a%,是相对于父元素的。

body  {
    font-size:14px;
}
h1 {
    font-size:150%;
}

em

跟百分比一样，是另一种相对测量单位。
不过用em不是指定百分数，而是指定比例因数。
font-size : 1.2em;
表明字体大小应该按比例放大1.2倍

body {
    font-size: 14px;
}
h1 {
    font-size:150%;
}
h2 {
    font-size:1.2em;
}

body is 14px
p is 14px
h1 is 21px
h2 is 17px (实际上是16.8，但大多数浏览器会四舍五入到17）

关键字（KeyWords）

可以把字体大小定义为：
xx-small,
x-small,
small,
medium,
large,
xx-large

浏览器将这些关键字转换成默认的像素值。
每种尺寸都比前一种大20%，通常把small定义为大约高12px。
需要注意的是，每个浏览器定义关键字的方式并不一定相同，如果用户需要也能自己定义。

如何选择定义字体大小的方法

小技巧，可以使字体大小在大多数浏览器中显示一致。

• 选择一种关键字（推荐small或medium)定义body字体大小，也就是网页的默认字体大小。
• 用em或百分数把别的元素的字体大小指定为相对于body字体大小的字体尺寸（选em还是百分数都无所谓，效果是一样的）

注意：

• 如果字体大小是用像素指定的，IE用户就不能调整字体大小，这也是要少用像素指定字体大小的一个原因。如果用像素，对许多用用来说就会减少页面的可用性。

• 幸运的是，如果你用关键字定义body字体大小，然后用em或%指定其他元素的相对大小，要求浏览器把字体变大或变小时，IE就会按比例缩放字体。

• 在元素中定义字体大小，也就是定义了网页默认字体的大小。

• 要注意别用像素指定大小，因为有些浏览器不支持用像素调整字体。

• 默认字体大小因浏览器类别甚至浏览器版本不同而不同，但在大多数情况下默认body字体大小是16px。

• 默认标题字体大小是多大。
  取决于浏览器，但一般说来，

  是默认body字体大小的200%，

  是150%，

  是120%,

  是100%,

  是90%,

  是60%。默认的

  是和body字体大小一样的。

• 在指定body字体大小时不用关键字而用em或%，是可行的。
  如果指定body部分字体大小为90%，就是默认字体大小的90%。
  通常默认字体大小为16像素，它的90%就是14像素左右。
  如果不喜欢用关键字指定字体大小，就用em或%吧。

• CSS hacks 后续研究跟进。扩展

---

改变字体粗细

font-weight属性用来控制字体的粗细。

bold & normal 用于指定粗体版本或者普通版本

bloder & lighter 可以用它们使文本的字体较父元素字体更粗或更细。这些值很少用，因为不会有太多字需要考虑粗细方面的细微差别，实际上这两个值也没有太有明显的效果。

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

---

给字体添加样式

italic文本是倾斜的，有时多一些弯曲的衬线。
用font-style属性在CSS中给文本添加斜体(italic)样式：
font-style:italic;

有的字体并不支持italic(斜体)格式，可用(oblique)倾斜文本代替。
oblique文本也是倾斜的，不过字体不是一些专门设计的倾斜字母，浏览器只是把普通字母倾斜显示了，对比一下这些没有倾斜和倾斜了的样式。
用font-style属性得到oblique 文本

italic和oblique是让字体倾斜显示的两种格式。
除非能控制用户使用的字体和浏览器，否则你会发现有时显示的是italic，有时是oblique，指定的是其中的哪种都无所谓。
就用italic吧，别担心会有什么不同。
想了解机制与逻辑后续扩展跟进。

---

PC上颜色是如何工作的！

网页颜色是根据红色、绿色、和蓝色三原色以一定比例组成来指定的。可以把每种颜色指定为0~100%的一个数，然后混合起来组成一种颜色。

例如如果红色100%、绿色100%和蓝色100%混合起来，就得到白色。注意在电脑屏幕上，混合得到的颜色会比较亮，毕竟是我们混合出来的光。

如果每种成分只加60%会得到什么结果呢？不够白是吗，换言之，得到的是灰色，因为我们只是给屏幕加了相同数量的三种颜色，而没有足够的光。

把80%的红色和40%的绿色混合起来，就能得到你想要的桔红色。注意如果某一种颜色没有加进去，它就不会影响另外两种颜色。桔红色是因为没有把蓝光加进红色和绿色中而形成的。

如果混合红色0%、绿色0%和蓝色0%，意味着没有给屏幕加任何光，所以得到的是黑色。

---

定义颜色的方法

用颜色名直接定义，也可以根据红、绿、蓝的相对百分比来定义颜色，还可以用十六进制代码定义。十六进制代码是描述红、绿、蓝成分多少的简略表达法。
十六进制代码是指定web颜色最常用的一种方法。不过要记住所有这些指定颜色的方法的本质都是告诉浏览器加入颜色中的红色、绿色、蓝色成分是多少。

用名字定义颜色

CSS中描述颜色最直接的方法是用颜色名。
只能定义17种颜色。

body {
    background-color:silver;
}

CSS颜色名不区分大小写。
CSS中预先定义的17种颜色，这些名字只是预先定义了红色、绿色和蓝色三原色的比例。
Aqua，Black，Blue， Fuchsia，Gray， Green，Lime， Maroon，Navy， Olive， Orange， Purple， Red， Silver，
Teal， White， Yellow

纸上颜色是印刷的页面反射光线形成的，
在PC上，光是屏幕发出的。

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

body {
    background-color:rgb(80%，40%，0%);
}

rgb red green blue的缩写
然后在圆括号内定义红色，绿色，蓝色的百分数，每个数字后跟一个%。由红色80%、绿色40%和蓝色0%组成的。

body {
    background-color： rgb(204， 102， 0);
}

可以用0~255之间的某个数值定义红色、绿色和蓝色的值。所以可以用红色204、绿色102和蓝色0代替红色80%、绿色40%和蓝色0%。

这些数字是怎么来的
255的80%是204，
255的40%是102，
255的0%是 0 。

用十六进制代码定义颜色

每两位数字代表红色、绿色、蓝色中的一种颜色。
前两位数字代表红色， 中间两位代表绿色，最后两位代表蓝色。
#cc6600
每一组两位数代表一个0~255的数字。
问题是如果用数字，用两位只能代表0~99，不是吗
这就是十六进制的奥秘。

快速了解十六进制代码
它们不是基于10个数（0~9）而是基于16个数（0~F）的，十六进制数是这样的：

用十六进制，从0~15需要一位数就够了，9以上用字母。

第一步：
把十六进制验收分成三部分。
红色两位CC，绿色两位66， 蓝色两位00

第二步：
把每个十六进制数转化成相应的十进制数。
现在已分成三部分，每部分的值都可以换算成0~255的一个数。
CC
取出最右边的数，写下它的十进制数 。12
取出最左边的数并换算成十进制值，再乘以16。 12*16 = 192
最有把这两个数加起来。192+12 = 204
十进制的204等于十六进制的CC

第三步
别的两个值也都这么换算好。
CC 204
66 102
00 0

第四步
得到每部分的数字就知道一种颜色中到底加入了多少红色、绿色和蓝色了。

如何确定Web颜色

颜色表或者像Photoshop Element这样的程序。
PS通过调色板，选的颜色后，会给出rgb值和十六进制代码。

使用在线颜色表

Q&A

网页安全颜色
早期的网页浏览器，支持大量颜色的PC屏幕很少，因此创建了网页安全调色板来保证网页在大多数显示器中的显示一致。
但如今大多数Web用的显示器能支持上百万种颜色。所以除非你知道有一些特殊的用户显示颜色受限制，否则就可以把“网页安全颜色”当作历史来看待。

如何搭配字体颜色
最重要的是文本和背景用高对比的颜色以提高可读性。
文本用深颜色，背景用浅颜色。

如果每两位数字都一样，就可以简写。
#ccbb00可以缩写成#cb0
#11eeaa写成#1ea
#ccbb10就不能缩写。

文本修饰text-decoration

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

em {
    text-decoration:underline overline;
}
同时设置几个decoration值，如果想同时有underline和overline的修饰效果,可以像这样定义文本修饰。
这条规则使元素<em>既有underline，又有overline
em {
    text-decoration:none;
}
如果文本集成了你不想要的文本修饰，用值"none"就可以去掉。
采用这条规则，文本就没有修饰了。

text-decoration只能选择一条规则，不能同时选择两条独立的规则。
text-decoration样式所有选择的规则决定了所用的修饰，所有得到两种修饰的唯一方法是在同一个text-decoration声明中指定它们。

颜色属性实际上控制的是元素的前景颜色，所以它能控制文本和边框的颜色，不过可以用border-color属性给边框定义它自己的颜色。

标明XHTML中应该被删掉的内容。浏览器默认用strike-through样式化元素
标明应该插入的内容。浏览器默认用underline样式化元素。

XHTML 标明内容的意义。
CSS 控制内容显示的外观。

用边框代替下划线

h1, h2 {
    font-weight: normal;
    color: #cc6600;
    /*text-decoration: underline;*/
    border-bottom: thin dotted #888888;
}

---

要点

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

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

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

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

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

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

• 用px、em、%或者关键字定义font-size。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基于 Head First HTML 整理