文章目录

  • 第10章 为文本添加样式
  • 10.2 选择字体系列
  • 10.3 指定替代字体
  • 10.4 创建斜体
  • 10.5 应用粗体格式
  • 10.6 设置字体大小
  • 10.7 设置行高
  • 10.8 同时设置所有字体值
  • 10.9 设置颜色
  • 10.10 设置背景
  • 10.11 控制间距
  • 10.12 添加缩进
  • 10.13 对齐文本
  • 10.14 修改文本的大小写
  • 10.15 使用小型大写字母
  • 10.16 装饰文本
  • 10.17 设置空白属性


第10章 为文本添加样式

10.2 选择字体系列

  • 设置字体的方法：font-family:name 
body{
    font-family:Geneva;
}

h1,h2{
    font-family:"Gill Sans";
}
/* 由于font-family是继承属性，所以h1,h2需要重新设置font-family以覆盖其继承 */

提示　对于包含多个单词的字体名称，应该用引号（单引号或双引号） 包围起来。

提示　可以使用小写字母指定字体名称，如font-family: geneva;。

10.3 指定替代字体

  • 字体栈：在font-family中设置多个字体，浏览器会按顺序选择其能支持的一种字体，字体栈至少要包括三个字体：首选字体、一个及以上的替代字体、以及一个表示类属 的标准字体。
  • 类属的标准字体：代表首选字体最为接近的风格，这是作为字体栈兜底字体
  • serif：衬线字体
  • sans-serif：无衬线字体
  • cursive：手写字体
  • fantasy：装饰字体
  • monospace：等宽字体
body {
    font-family: Geneva, Tahoma, sans-serif;
}

h1,h2 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

在Windows上显示Arial，在OS X上显示Helvetica

使用font-family: sans-serif;。这种方法会让所有的操作系统使用无衬线字体——Windows的浏览器显示Arial，而OS X的浏览器则显示Helvetica。

如何分别指定不同语言的字体呢？

参考博客CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体

那么一个国际化的站点应该如何设置多语种的字体呢？其先后顺序如何设定？这里强烈推荐 Airbnb 作为参考。

[lang=“ja”] body{
font-family:“ヒラギノ角ゴ Pro”,“Hiragino Kaku Gothic Pro”,“メイリオ”,Meiryo,Osaka,“ＭＳ Ｐゴシック”,“MS PGothic”,"MS Gothic”,
“ＭＳ ゴシック”,"Helvetica Neue”,Helvetica,Arial,
sans-serif !important
}
[lang=“ko”] body{
font-family:“나눔 고딕”,“Nanum Gothic”,“맑은 고딕”,"Malgun Gothic”,
“Apple Gothic”,“돋움”,Dotum,"Helvetica Neue”,Helvetica,
Arial,sans-serif !important
}
[lang^=“zh”] body{
font-family:"Hiragino Sans GB”,“华文细黑”,“STHeiti”,“微软雅黑”,
“Microsoft YaHei”,SimHei,"Helvetica Neue”,Helvetica,Arial,
sans-serif !important
}


10.4 创建斜体

1.创建斜体

p{
    font-style:italic; /*文本会以斜体显示 */
}

2.取消斜体

p{
    font-style:normal;
}

10.5 应用粗体格式

1.创建粗体格式

  • 3种方式：
  • font-weight:bold
  • font-weight:700 /*值范围为[1,9]*100*/
  • bolder或者lighter /*更粗或者更细*/

添加粗体样式的通行做法是简单地写成font-weight: bold。

2.取消粗体格式
font-weight:normal

10.6 设置字体大小

  • 设置字体文本的两种方式
  • 直接指定：使用像素px
  • 相对指定：使用百分数、em、rem指定相对于父元素文本的大小
  • 指定特定字体大小：
  • font-size:13px
  • 或者使用关键字：xx-small、x-small、small、medium、large、x-large、xx-large
  • 根据父元素设置字体大小
  • font-size:1.5em或者font-size:150%
  • 根据根元素设置字体大小
  • font-size:0.875rem

使用rem，则只用关心根元素的字体大小，而不必关心链接的父元素p的字体大小。由于根元素（html）设置为100%（通常为16px），则将a元素设置为1rem，则表示其字体大小也是16px。此外，标记了/* 可选 */的样式表示可以提供一个以像素为单位的字体大小，从而为IE8及其他不支持rem的旧浏览器提供备选方案
这样做简化了字体大小的设置，因为html的字体大小通常不会变，不像父元素的大小是不确定的，就像在段落中设置链接字体大小的例子那样。（参见“理解em和百分数字体大小”部分。）因此，我们的公式（在前面公式的基础上调整而来）为：
$要指定的字体大小/根元素字体大小＝值$
实际上就是$要指定的字体大小/16＝值$

提示　设置了相对字体大小的元素的子元素会继承这个大小，而不是继承相对值。

10.7 设置行高

  • 行高line-height：段落内行与行之间的距离
  • line-height的三个值：
  • n：纯数字，行高=n*元素字体大小
  • a：以em、像素或磅为单位的值
  • p%：字体大小的百分之
p{
    font-size:.9375em;
    line-height:1.65;
    /*p元素字体大小为16px*0.9374em=15px(这里假设浏览器默认字体大小为16px)
    那么行高为15px*1.65=24.75px*/
}

提示　如果使用数字设定行高（通常都这么做），那么所有的子元素都会继承这个因子。因此，如果父元素的字体大小是16像素（或以em等表示的等价大小），行高是1.5，则该元素的行高就是24（即16×1.5）像素。如果子元素的字体大小是10像素，则该元素的行高就是15（即10×1.5）像素。

提示　如果使用百分数或em值，那么只会继承产生的行高（即计算出来的值）。因此，如果父元素的字体大小是16像素，行高是150%，则该元素的行高就是24像素。所有的子元素都将继承24像素的行高，不管字体大小是多少。

10.8 同时设置所有字体值

  • font：可以使用font简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列，但这种属性的值至少要包含字体大小和字体系列属性。
body{
    font: 100% Geneva,Tahama,Verdana,sans-serif;
}

h1,h2{
    /* 这些声明无法使用font简记法，除非同时声明字体大小 */
    font-family:"Gill Snas","Gill Sans MT",Galibri,sans-serif;
    font-weight:normal;
}
.project p {
    /* 这些声明无法使用font简记法，除非同时声明字体系列 */
       font-size: .9375em;
    line-height: 1.65;
}

提示　行高是可选的，但它如果出现，就必须紧跟在字体大小和斜杠后面

提示　如果忽略设置字型、粗细、小型大写字母的话，它们就被自动设为normal

10.9 设置颜色

  • 设置颜色的步骤
  • 输入color:。
  • 输入colorname，这里的colorname是预定义颜色中的一种。
  • 或者输入#rrggbb，这里的#rrggbb是颜色的十六进制呈现。这是最常用的指定颜色的方法。
  • 或者输入rgb(r, g, b)，其中r、g、b是0～255之间的整数，分别表示所需颜色里红、绿、蓝的量。
  • 或者输入rgb(r%, g%, b%)，其中r、g、b分别是所需颜色里红、绿、蓝的百分数。
  • 或者输入hsl(h, s, l)，其中h是0～360之间的数值，表示所需颜色的色相；s和l均是百分数，分别表示所需颜色的饱和度和亮度。（一般来说，对于不透明颜色，使用十六进制数或RGB值更好。）
  • 或者输入rgba(r, g, b, a)，其中r、g、b是0～255之间的整数，分别表示所需颜色里红、绿、蓝的量；a是0～1之间的小数，表示所需颜色的alpha透明度。
  • 或者输入hsla(h, s, l, a)，其中h是0～360之间的数值，表示所需颜色的色相；s和l均是百分数，分别表示所需颜色的饱和度和亮度；a是0～1之间的小数，表示所需颜色的alpha透明度。
  • 如果输入的r、g或b的值大于255，就会使用255。类似地，高于100%的百分数将被替换为100%。

提示　除了link元素，其他元素都会继承body元素中的color属性。开发人员必须显式设置link元素的color属性

提示　当十六进制数值由三对重复的数字组成时，还可以使用#rgb设置颜色。事实上，我推荐使用这种方法。因此，可以（且应该）将#FF0099写做#F09或#f09。类似地，可以将#CC0000写成#C00或#c00。但是不能将#31AA55写成#31a5，因为只有两对值是重复的。

10.10 设置背景

  1. 修改文本的背景颜色：background-color:value
  1. value的值：
  1. transparent：表示允许透过父元素的背景颜色
  2. color：这里的color可以是颜色名称、十六进制数值，或RGB、HSL、RGBA、HSLA颜色值
  1. 使用背景图作为背景：background-image:url(image.jpg)
  2. 重复背景图像：background-repeat:direction
  1. direction的取值：
  1. repeat（默认选项）
  2. repeat-x
  3. repeat-y
  4. no-repeat
  1. 控制背景图像是否随页面滚动：background-attachment:value
  1. value的取值
  1. fixed：背景图像附着在浏览器上
  2. scroll：滚动页面时背景图像跟着滚动（默认选项）
    4.local：滚动背景图像所在的元素时，背景图像才移动
  1. 指定元素背景图像的位置：background-position: x y
  1. x的取值
  1. 相对于左上角的绝对距离或百分数
  2. left：左对齐
  3. center：居中
  4. right：右对齐
  1. y的取值
  1. 相对于左上角的绝对距离或百分数
  2. top：顶端对齐
  3. center：居中
  4. bottom：低端对齐
  1. 在一条声明中设置所有背景属性background: 指定任何可接受的background属性值（从“修改文本的背景颜色”到“指定元素背景图像的位置”介绍的内容都适用）。这些值的排列顺序没有要求

提示　background-color的默认值是transparent（透明），background-image的默认值是none（无），background-repeat的默认值是repeat（重复），background-attachment的默认值是scroll（滚动），background-position的默认值是0 0（等价于top left，即左上角）。只有在需要覆盖其他样式规则的时候才会显式地指定默认值。

提示　可以在background-position属性中使用负数。例如，background-position: -45px 80px会将图像定位在元素左边外侧45像素（因此不会看到图像在水平方向上的头45个像素）、顶部内侧80像素。

10.11 控制间距

  • 字间距(tracking)：单词之间的距离
  • 字偶距(kerning)：字母之间的距离
  1. 指定字间距：word-spacing:length，这里的length是一个带单位的数字，如0.4em或5px
  2. 指定字偶距：letter-spacing:length，这里的length是一个带单位的数字，如0.4em或5px

提示　可以对单词间距和字母间距使用负数。

提示　单词间距和字母间距的值还可能受到所选的对齐方式（用text-alignment设置）和字体系列的影响。

提示　word-spacing和letter-spacing属性是继承的。

10.12 添加缩进

  • 添加缩进text-indent: length，这里的length是一个带单位的数字，如1.5em或18px。

提示　使用负数会产生悬挂缩进。使用悬挂缩进时，可能还需要增加文字框周围的内边距或外边距，从而让容器可容纳伸到外边的文本

提示　text-indent属性是继承的。

提示　如果要使用百分数或em值，那么只有生成的大小（即“计算出来的值”）会被继承。因此，如果父元素为300像素宽，那么10%的text-indent就是30像素，同时，所有子元素第一行也都会缩进30像素，而不管它们各自父元素的宽度是多少。

提示　要忽略继承的缩进，使用0即可。

10.13 对齐文本

  • 对齐文本text-align:argument，这里的argument可以是
  • left：左对齐
  • right：右对齐
  • center：居中对齐
  • justify：两端对齐

10.14 修改文本的大小写

  • 修改大小写text-transform:argument，这里的argument可以是：
  • capitalize：每个单词的首字母大写
  • uppercase：所有字母大写
  • lowercase：所有字母小写
  • none：保持原本样子

提示　text-transform属性是继承的。

10.15 使用小型大写字母

  • 使用小型大写字母的方法，输入font-variant: small-caps
  • 取消小型大写字母的方法，输入font-variant: none

提示　与简单地缩小字号的大写字母相比，小型大写字母显得更为轻巧。

10.16 装饰文本

  • 装饰文本text-decoration:argument，argument的值可以是：
  • underline：下划线
  • overline：上划线
  • line-through：删除线
  • 取消装饰文本：text-decoration:none

目前，最常用到这个属性的情况是为链接状态添加样式

10.17 设置空白属性

  • white-space:argument属性：设置浏览器对文本中空格和回车的显示,argument的值可以为：
  • pre：显示原文中所有的空格和回车
  • nowrap：确保所有空格不断行，也就是文本全部显示在一行
  • normal：按正常方式处理空格