HTML5与CSS3基础教程-第10章 为文本添加样式

《HTML5与CSS3基础教程（第8版）》 第10章读书笔记

• 2020/03/11

• 选择字体： （p173）

  • 并非所有的系统都支持相同的字体，用户只会呈现系统安装的字体。若指定字体未安装，则展示默认字体（windows的默认字体是Times New Roman）。所以应该定义替代字体作为备选。
  • 当一个字体包含多个单词时，使用引号包围起来。font-family: "Times New Roman"。
  • font-family的继承： 虽然font-family是继承的，但是有几个元素不会继承父元素的字体设置，包括select, textarea, input（置换元素）

• 使用替代字体： （p174）

  • 在font-family中列举多种字体来使用替代字体，浏览器会使用其中的第一个系统安装的字体（不是CSS的后面优先原则）。
  • 字体列表称为字体栈，通常至少包含3种字体：优先级最高的字体、一个或几个替代字体、一个表示类属的标准字体（一般是系统的共有字体） 。

  OS X和Windows的共有字体： Arial, Comic Sans MS, Courier New, Georgia, Impact, Trebuchet MS, Times New Roman, Verdana。

  表示类属的字体： serif, sans-serif, cursive（手写字体）, fantasy（装饰字体）, monospace（等宽字体）。其中，serif通常对应windows的Times New Roman和OS X的Times。sans-serif 通常对应windows的Arial和OS X的Helvetica。

• 斜体： （p176 - 177）

  • 创建： font-style: italic（创建斜体文本）或font-style: oblique（创建倾斜文本）。
  • 取消： font-style: normal
  • 真斜体、假斜体和倾斜版本：
    • 有的字体（如Palatino）有真正的斜体字体，使用font-style: italic就会使用斜体字体版本中的字体，真斜体的字母形状通常会与非斜体有差异。
    • 对于没有真正斜体的字体，计算机会模拟出来假斜体来展示。
    • 字体设计师还可能专门为字体设计倾斜版本，同侧是对普通字母进行倾斜，同时字符间距等会进行微调，但是对比真斜体，他的字母形状是相同的。使用font-style: oblique定义，没有倾斜版本会使用假斜体。

• 粗体： （p177 - 179）

  • 创建： font-weight: bold。或使用100~900之间的100的倍数。（400是正常粗细，700代表粗体）。也可以使用bolder（更粗）或lighter（更细）。
  • 取消： font-weight: normal。有的Web字体服务要求使用400来设置正常粗细。
  • 由于字体的100~900粗细不统一，一般推荐设置粗体使用font-weight: bold。
  • 类似斜体，有伪粗体。

• 使用em、rem和百分数字体大小： （p181 - 184）

  • em单位是基于父元素的字体大小定义的，1em与父元素的字体大小相同。
  • 使用em定义相对大小时，一般会在body元素上定义一个基准，通常使用font-size: 100%，会将字体大小设置为系统的默认大小（一般是16px）。
  • 有了基准大小，就可以使用em了，如想定义35px的大小，可以使用2.1875em（35/16=2.1875）。
  • em是相对于父元素的字体大小，而rem是相对于根元素（root）的字体大小，但是需要IE9+，可以使用css优先级的方法适配。

• 使用px作为字体大小时，使用IE无法使用浏览器文本大小选项对文本进行放大缩小。

• 行高： （p184 - 185）

  • 使用line-height: value来定义
  • value是纯数字n（推荐）： 则行高是n*font-size，且子元素继承的是n这个因子。
  • value是百分数、em、px或pt等： 如果是百分数，则行高是百分数 * font-size， 这几种情况，子元素继承的是绝对单位px、pt，或者是em、百分数计算得到的行高大小。

• font属性：

  • 可以一次性定义font-family, font-style, font-weight, font-size, line-height
  • 顺序是任意的，且不要求一次性使用所有属性，
  • 但至少 包含font-family, font-size。
  • 其中，行高是可选属性，但是如果出现必须紧跟在字体大小后面，且前面加斜杠：font-size/line-height。

• background属性： （p189 - 195）

  • background-color：定义背景颜色。
  • background-image：定义背景图片，一般先定义background-color，避免图片失效时显示空白。
  • background-repeat：定义背景图片重复，可取repet, repet-x, repet-y, no-repet，默认是repet。
  • background-position: x y：定义背景图片位置，x和y可以是绝对距离或百分数，也可以是left（左对齐）、right（右对齐）或top（顶端对齐）、bottom（底部对齐）。
  • background-attachment：定义背景图片是否随页面滚动，可取scroll,fixed, local等。
  • background-clip：定义背景的位置，可取content-box(内容部分), padding-box(内容和内边距部分), border-box(内容、内边距和边框部分)， 默认值是border-box。
  • background-origin：定义背景开始的位置，可取值同background-clip，默认值是padding-box。
  • background-size：控制图像的尺寸，可取值见p194。
  • **直接使用background属性：**包括background-color, background-image, background-repeat, background-position, background-attachment，顺序没有要求。但是，使用background时，没有指定的属性会使用默认值，可能会覆盖之前定义的样式。

• 间距： （p195）

  • 字间距： 定义单词之间的距离。word-spacing:length，length是一个带单位的数字，如0.4em、5px等。
  • 字偶距： 定义字母之间的距离。letter-spacing:length，取值同上。
  • 间距往往会受对齐方式（text-align）影响，且两端对齐影响较大。
  • 使用em时的继承同line-height，继承计算之后的值。

• 缩进： （p195 - 196）

  • 使用text-indent:length定义，length可以是代单位的数字或百分数。
  • 使用em或百分数时，继承计算后的值。
  • 如果length是负数，则会产生悬挂缩进。
  • 适用于块状元素，内联元素使用需要display:block/inline-block。

• 文本对齐： （p196 - 197）

  • 使用text-align定义，可取left(左对齐), right(右对齐), center(居中), justify(两端对齐)。
  • 适用于块状元素，内联元素使用需要display:block/inline-block。对于inline-block，还需要指定宽度。

• 文本大小写： （p197 - 199）

  • text-transform： 可取uppercase, lowercase, none。将文本全部转换为大写/小写/默认。
  • font-variant:small-caps： 小型大写字母，一般是将全部小写字母转换为字体较小的大写字母。

• 装饰文本： （p199 - 200）

  • text-dectoration： 可取underline(下划线), overline(上划线), line-through(删除线)

• 空白属性： HTML文档中的多个回车或空格会被显示成一个空格，或被忽略。（p201）

  • white-space： 设置对回车、空格的处理方法。可取pre(显示所有空格回车), nowrap(确保所有空格不换行，即在一行显示所有内容), normal(正常处理)。