CSS 文本样式

0 前言

本文介绍CSS中为文本添加样式，包括字体、粗体/斜体、字体大小、行高、颜色、背景等等。
参考书为人民邮电出版社的《HTML5与CSS3基础教程》。

1 字体

1.1 字型

模板：

选择器 {	font-family： name；}

其中“name”为字型的名称，一般会写若干个，当第一个不能用的时候顺延至第二个，以此类推。
例：

h1{	font-family: arial, helvetica, sans-serif;}

在OS X系统中，Genava和Gill Sans很常见。
OS X和Windows上默认都有的字体： Arial、Comic Sans MS、Courier New、 Georgia、 Impact、Trebuchet MS、Times New Roman和Verdana。

1.2 粗体

模板：

选择器 {	font-weight: bold;}

或者输入100~900之间的100的整数。400表示正常，700表示粗体。
除bold外，还有bolder（更粗）、lighter（更细）

1.3 字体大小

模板：

选择器 {	font-size: 数值px/em;}

px即像素值，em表示相对父元素的倍数
例：

body{	font-size: 100%；/* 16px */}h1{	font-size: 1.75em; /* 28/16px*/}h2{	font-size: 20px;}

其中，h1的字体大小是父元素（body）的1.75倍（即1.75em），也就是16*1.75=28px，h2的字体大小是20像素。

1.4 行高

段落的行间距。
模板：

选择器 {	font-size: 1.0625em;	line-height: 数值;}

数值为纯数字，没有单位，行高=数字*字体大小（font-size）。

1. 5 字体简记

把字体、粗体、字体大小、行高等放在一起。
模板：

选择器{	font: [字型] [粗细] [小型大写字母] 字体大小 行高; }

其中，中括号里面的是可选项。
字型：normal、italic或oblique
粗细：normal、bold、bolder、lighter或100的倍数
小型大写字母：normal、small-caps

1.6 间距
字间距：word-spacing，单词之间的距离
字偶距：letter-spacing，字母之间的距离

选择器{	word-spacing: 2em;	letter-spacing: 7px;}

1.7 缩进

p {	text-indent: 2em;}

1.8 大小写
模板：

选择器{	text-transform: uppercase;}

值有四种：
captitalize：每个单词的首字母大写
uppercase：所有字母大写
lowercase：所有字母小写
none：保持原来样子

1.8 小型大写字母
字母大写，体积和小写字母相同。

选择器{	font-variant: small-caps;}

值有两种：
small-caps：小型大写字母
none：取消小型大写字母

1.9 划线

下划线、上划线和删除线

选择器{	text-decoration: underline;}

值有四种：
underline：下划线
overline：上划线
line-through：删除线
none：取消划线

1.10 空白属性
让浏览器显示HTML中的空格。

选择器{	white-space: pre;}

值有三种：
nowrap：所有空格不断行
pre：让浏览器显示原文本中所有的空格和回车
normal：按正常方式处理空格

2 颜色

模板：

选择器{	color: 数值;}

颜色的数值有三种形式：
（1）颜色名称。例如：blue
（2）rgb形式。例如：rgb(89, 0, 127)
（3）十六进制形式。例如：#59007f
第三种较为常见。

举例：

h2{	color: blue;	color: rgb(89, 0, 127);	color: #59007f;}

3 背景

模板：

选择器{	background-color: 数值1;	background-image: url(image.png);	background-repeat: repeat;	background-attachment: fixed;}

颜色的形式同上面的color。
url是图像的路径及名称。
background-repeat表示是否重复，有四个值：repeat、repeat-x、repeat-y和no-repeat。
background-attachment表示图像是否随页面滚动，有两个值：fixed（图像会附着在浏览器窗口上）、scroll（图像会移动）。

可整合到一起，如下：

选择器{	background: [所有属性];}

所有可能的属性用空格隔开，顺序无所谓。

来源：https://www.icode9.com/content-4-432001.html