了解了这么多，我们开始着手写样式表了。刚开始写，我们首先接触到的，就是文本，毕竟对于一个网站而言，大部分都还是文字，这是基础性的学习，这个学好了，接下来也就更容易领悟。关于文本，CSS的属性有很多，比如：字体、大小、粗细、倾斜、行高，甚至背景颜色、间距，都涵盖在内。接下来我们一一学习。
1、选择字体系列(font-family)
这是应该首要考虑的关键问题。格式如下：
|
body{ font-family:"Gill Sans"; } |
font-family是继承属性，会应用于其他包含在body内的元素。
对于包含多个单词的字体名称应该用引号包裹。
一些系统中如果没有这种字体，将会以默认字体显示，比如Windows会显示为Times New Roman。
2、指定替代字体
CSS允许开发者指定多种不同的字体，选择第一个已安装在用户电脑上的字体。
|
body{ font-family:Geneva, Tahoma, sans-serif; } |
字体列表称为字体栈，通常至少包含三种字体：希望使用的字体、一个或几个替代字体（应与第一个尽可能相似）及一个表示类属的标准字体。
标准字体有这么几个：serif、sans-serif、cursive（手写）、fantasy（装饰）和monospace（等宽）。
可以在同一个font-family规则中为不同的字母表指定字体（如英语和汉语），从而对不同语言的文本进行格式化。
Web字体改变了这一切！后面我们会涉及到。
3、创建斜体(font-style)
在传统出版业中，斜体通常用来表示引述、强调的文本、外文单词、学名、电影片名等。
|
body{ font-style:italic; } |
如果想要取消斜体的话，将font-style属性修改为normal即可。
4、应用粗体格式(font-weight)
粗体格式通常是让文本突出显示的最常见、最有效的方式。
|
body{ font-weight:bold; } |
font-weight的属性可以是关键字（lighter、normal、bold、bolder）或100~900之间100的整数倍数字（400对应normal，700对应bold）。
该属性是继承的！
5、设置字体大小
设置字体大小有两种方法：直接使用像素指定要使用的特定字号，或使用百分数、em甚至rem指定相对于父元素文本的大小。
|
body{ font-size:100%; //多数系统理解为16px，设置为百分数的意义在于参照 } h1{ font-size:35px或者2.1875em(35/16=2.1875); } |
百分数通常只用在body设置基准中使用，其他情况使用em更为频繁。
em的值=要指定字体的大小/父元素字体的大小
强烈建议使用em，而不是像素，使用相对单位有更大的灵活性，尤其是在响应式Web中，你会发现它的极大优势。
CSS3引入了一个新的单位——rem（root em），它总是以根元素为参照，而不必考虑父元素字体的大小，这样就简化了字体大小的设置，因为根元素html通常是不变的。
|
html{ font-size:100%; //多数系统理解为16px，设置为百分数的意义在于参照 } h1{ font-size:35px或者2.1875rem(35/16=2.1875); } |
磅（pt）常用作打印样式表的单位。
font-szie属性是继承的，这里的继承是实际的大小，而非那个相对的值。
6、设置行高(line-height)
行高指的是段落的行距，使用大一些的行高有时候会使主体文本更容易阅读，对于超过一行的标题，使用较小的行高会使它们看起来更美观。
|
p{ font-height:1.2; } |
设置行高有两种方式：纯数字，还有就是一个带单位的值，这里的单位，可以是像素、em甚至百分数，不过通常我们使用的是第一种，即不带单位的数字。这两种方法的差异主要体现在继承上，如果使用数字作为行高，子元素会继承这个因子，根据自身的字体大小，调整行高，而带单位的那种，继承的是一个固定的值，与父元素一样。
7、同时设置所有字体值
可以使用font简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列，这种写法更加的高效，也更简洁。使用font简写属性不要求指定所有的字体属性，但至少应该包含字体大小和字体系列属性。
|
p{ font: italic bold .875em/1.3 Geneva,Tahoma,sans-serif; } |
这里要注意的有这么几点：
字体大小和字体系列必须显式的声明，并且字体大小放在字体系列之前。
如果有行高的话，在字体大小的后面打一个"/"，然后标注行高。
如果有其他诸如字型（font-style）或者粗细（font-weight），统一写在字体大小的前面，顺序并不重要，不写的话，默认是normal。
各属性之间，用空格隔开。
font属性是继承的。
8、设置颜色
颜色可以是内置的关键字、十六进制值、RGB、HSL、RGBA和HSLA。
|
p{ color:red; } |
color的属性可以是各种颜色形式的表达，同时是继承属性。
9、设置背景
我们在设置背景样式的时候有很多选择，可以是颜色，可以是图像，这里有很多的属性可供利用，如：background-color、background-image、background-repeat、background-attachment、background-position等，设置还可以用background属性将它门合并，我们一一介绍。
1、修改文本的背景颜色
|
p{ background-color:red; } |
background-color的属性值可以是transparent（表示允许透过父元素的背景颜色）或者各种color的表示方法。
2、使用背景图像作为背景
|
p{ background-image:url(../imag/bg.png); } |
形式如上，background-image的属性也可以是none，表示没有背景图像，通常用于覆盖背景图像的样式。url是图像相对于CSS文件的位置，通常放在一个单独的imag文件夹里。此外尤为需要注意的是，背景图像默认重复。
3、重复背景图像
利用background-repeat属性，我们可以更加自由的设置图像重复的模式。
|
p{ background-repeat:direction; } |
上面的direction只是个关键字，可以取四个值：repeat、repeat-x、repeat-y、no-repeat，意思体现的很清楚，更重要的是，在没有设置backgroun-repeat属性的时候默认repeat。
4、控制背景图像是否随页面滚动
这里用到的是background-attachment属性，该属性有三个关键字：fixed（图像附着在浏览器窗口）、scroll（图像随浏览器滚动）或local（只有访问者滚动背景图像所在的元素时背景图像才移动），默认是scroll。
指定元素背景图像的位置
|
p{ background-position:x y; } |
这里的x和y表示距离左上角的绝对距离或者百分数，允许负值，也可以是left（左对齐）、right（右对齐）、center（居中）表示x，用bottom（底端对齐）、center（居中）或top（顶端对齐），如果两个都是关键字，那么顺序不重要。
5、在一条声明中设置所有的背景属性
|
p{ background:url(../imag/bg.png) repeat-x 20px 15px fixed; } |
在这个属性里，你可以将前面五条规则任意组合，对于排列顺序并没有要求。
注意几个默认值：background-coloràtransparent、background-imagànone、background-repeatàrepeat、background-attachmentàscroll、background-positionàtop left，在你需要修改的时候，显式的声明即可覆盖默认值。
通常情况下都是用这种方式设置背景，因为这样更简单直接，而且不必声明所有的属性，没被声明的自动填充为默认。
6、更多CSS3的背景控制
后面我们还会接触到渐变背景和多重背景，这里我们提到的是：background-clip、background-origin和background-size。background-clip和background-origin分别控制元素背景显示的范围和开始的位置，关键字都是content-box包含内容，padding-box包含内容和内边距，border-box包含内容、内边距和边框。background-clip默认值为border-box，background-origin默认值为padding-box。
background-size属性通过不同属性值控制图像的显示尺寸：contain（在显示图像完整宽度和高度的情况下，尽可能扩大图像的尺寸，可能不会填充整个区域）、cover（在填充整个背景的基础上，让图像尽可能的小，因此一部分有可能看不见）或者长度、百分数、auto（默认）。
10、控制间距
CSS提供了增加或减少单词之间或字母之间的距离，前者称为字间距（word-spacing），后者称为字偶距(letter-spacing)。
|
p{ word-spacing:0.4em; //字间距 letter-spacing:7px; //字偶距 } |
两个属性的值可以用px，也可以用em，如果使用em，只有结果大小会被继承。
两者的值都可以是负数。
如果要设为默认值，可以使用normal或0。
11、添加缩进
通过设置text-indent属性，可以指定段落第一行前面应该空出多大的空间。
|
p{ text-indent:2em; } |
使用负数会产生悬挂缩进，这就需要增加文字周边的内间距和外间距，从而让容器有足够的空间接纳这些缩进，不过这些东西下节才会接触到。
该属性是继承的，要忽略继承的缩进，设为0即可。
12、对齐文本
-
根据需要，可以让文本左对齐、右对齐、居中对齐或两端对齐。
|
p{ text-align:left/right/center/justify; } |
该属性对适用于盒模型的元素，如h1~h6,p等显示为单独行的元素，但对短语元素，如strong,em等显示在行内的元素不起作用，除非将它们显式的改为块级，即将它们的display属性改为block或者inline-block，尽管多数情况下并不会这样做。
13、修改文本的大小写
使用text-transformed属性，可以为样式定义文本的大小写，比如将文本显示为首字母大写、全部大写、全部小写或按原样显示。
|
p{ text-transformed：capitalize/uppercase/lowercase/none; } |
上面的属性，依次对应：每个单词的首字母大写，所有字母大写，所有字母小写，让文本保持原来的样子或者说取消继承。
有人说为什么不直接在HTML里改变文本的样式，因为有时HTML的源是未知的，用CSS控制这时候就显得很合理，按照"渐进增强"的理念，HTML控制内容，CSS控制样式，很合理。
14、使用小型大写字母
很多字体都有对应的小型大写字母变体，其中字母是大写的，但是缩小到了小写字母的大小，这里用的是font-variant属性。
|
p{ font-variant:small-caps/none; } |
有时字体并没有小型大写的样式，浏览器有可能将它们处理成uppercase的样子。
这个属性可以合并到font属性里。
15、装饰文本
可以使用text-decoration属性装饰文本，如添加下划线或者其他类型的线条，目前最常用到的就是为链接状态添加样式。
|
p{ text-decoration:underline/overline/line-through/none; } |
分别对应下划线、上划线和删除线。
这种属性是继承的，不过通常对于子元素都是取消样式。
16、设置空白属性
默认情况下，HTML文档里的多个空格和回车会显示为一个空格，或者被忽略，如果要让浏览器显示这些额外的空格，可以使用white-space属性。
|
p{ white-space:pre/nowrap/normal; } |
pre让浏览器显示原文本中所有的空格和回车，nowrap确保所有空格不断行，也就是文本全部显示在一行，normal就是正常显示。
尽管在HTML中可以使用<br>换行，但还是要避免使用br，除非没有更好的选择，因为它将表现混入了HTML，而不是让CSS控制。
总结：写到最后，十六个属性，还只是关于文本的，其实说到底，我们写的CSS，大部分还真的就是针对文本的，所以把这些掌握好了，剩下的就不多了。属性虽然很多，但经常用到的不过那三四个而已，但我们也能看到的出CSS对于样式的掌控是如此的精细而有准确，开发者有很大的自由空间。下一次我们讲关于CSS布局，也是非常重要的一部分。