文章目录
第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:boldfont-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 设置背景
- 修改文本的背景颜色：
background-color:valuevalue的值：transparent：表示允许透过父元素的背景颜色color：这里的color可以是颜色名称、十六进制数值，或RGB、HSL、RGBA、HSLA颜色值
- 使用背景图作为背景：
background-image:url(image.jpg) - 重复背景图像：
background-repeat:directiondirection的取值：repeat（默认选项）repeat-xrepeat-yno-repeat
- 控制背景图像是否随页面滚动：
background-attachment:valuevalue的取值fixed：背景图像附着在浏览器上scroll：滚动页面时背景图像跟着滚动（默认选项）
4.local：滚动背景图像所在的元素时，背景图像才移动
- 指定元素背景图像的位置：
background-position: x y- x的取值
- 相对于左上角的绝对距离或百分数
left：左对齐center：居中right：右对齐
- y的取值
- 相对于左上角的绝对距离或百分数
top：顶端对齐center：居中bottom：低端对齐
- x的取值
- 在一条声明中设置所有背景属性
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)：字母之间的距离
- 指定字间距：
word-spacing:length，这里的length是一个带单位的数字，如0.4em或5px - 指定字偶距：
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：按正常方式处理空格
