HTML+CSS学习笔记（八）

了解了这么多，我们开始着手写样式表了。刚开始写，我们首先接触到的，就是文本，毕竟对于一个网站而言，大部分都还是文字，这是基础性的学习，这个学好了，接下来也就更容易领悟。关于文本，CSS的属性有很多，比如：字体、大小、粗细、倾斜、行高，甚至背景颜色、间距，都涵盖在内。接下来我们一一学习。

1. 选择字体系列(font-family)

这是应该首要考虑的关键问题。格式如下：

font-family是继承属性，会应用于其他包含在body内的元素。

对于包含多个单词的字体名称应该用引号包裹。

一些系统中如果没有这种字体，将会以默认字体显示，比如Windows会显示为Times New Roman。

1. 指定替代字体

CSS允许开发者指定多种不同的字体，选择第一个已安装在用户电脑上的字体。

字体列表称为字体栈，通常至少包含三种字体：希望使用的字体、一个或几个替代字体（应与第一个尽可能相似）及一个表示类属的标准字体。

标准字体有这么几个：serif、sans-serif、cursive（手写）、fantasy（装饰）和monospace（等宽）。

可以在同一个font-family规则中为不同的字母表指定字体（如英语和汉语），从而对不同语言的文本进行格式化。

Web字体改变了这一切！后面我们会涉及到。

1. 创建斜体(font-style)

在传统出版业中，斜体通常用来表示引述、强调的文本、外文单词、学名、电影片名等。

如果想要取消斜体的话，将font-style属性修改为normal即可。

1. 应用粗体格式(font-weight)

粗体格式通常是让文本突出显示的最常见、最有效的方式。

font-weight的属性可以是关键字（lighter、normal、bold、bolder）或100~900之间100的整数倍数字（400对应normal，700对应bold）。

该属性是继承的！

1. 设置字体大小

设置字体大小有两种方法：直接使用像素指定要使用的特定字号，或使用百分数、em甚至rem指定相对于父元素文本的大小。

百分数通常只用在body设置基准中使用，其他情况使用em更为频繁。

em的值=要指定字体的大小/父元素字体的大小

强烈建议使用em，而不是像素，使用相对单位有更大的灵活性，尤其是在响应式Web中，你会发现它的极大优势。

CSS3引入了一个新的单位——rem（root em），它总是以根元素为参照，而不必考虑父元素字体的大小，这样就简化了字体大小的设置，因为根元素html通常是不变的。

磅（pt）常用作打印样式表的单位。

font-szie属性是继承的，这里的继承是实际的大小，而非那个相对的值。

1. 设置行高(line-height)

行高指的是段落的行距，使用大一些的行高有时候会使主体文本更容易阅读，对于超过一行的标题，使用较小的行高会使它们看起来更美观。

设置行高有两种方式：纯数字，还有就是一个带单位的值，这里的单位，可以是像素、em甚至百分数，不过通常我们使用的是第一种，即不带单位的数字。这两种方法的差异主要体现在继承上，如果使用数字作为行高，子元素会继承这个因子，根据自身的字体大小，调整行高，而带单位的那种，继承的是一个固定的值，与父元素一样。

1. 同时设置所有字体值

可以使用font简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列，这种写法更加的高效，也更简洁。使用font简写属性不要求指定所有的字体属性，但至少应该包含字体大小和字体系列属性。

这里要注意的有这么几点：

字体大小和字体系列必须显式的声明，并且字体大小放在字体系列之前。

如果有行高的话，在字体大小的后面打一个"/"，然后标注行高。

如果有其他诸如字型（font-style）或者粗细（font-weight），统一写在字体大小的前面，顺序并不重要，不写的话，默认是normal。

各属性之间，用空格隔开。

font属性是继承的。

1. 设置颜色

颜色可以是内置的关键字、十六进制值、RGB、HSL、RGBA和HSLA。

color的属性可以是各种颜色形式的表达，同时是继承属性。

1. 设置背景

我们在设置背景样式的时候有很多选择，可以是颜色，可以是图像，这里有很多的属性可供利用，如：background-color、background-image、background-repeat、background-attachment、background-position等，设置还可以用background属性将它门合并，我们一一介绍。

1. 修改文本的背景颜色

background-color的属性值可以是transparent（表示允许透过父元素的背景颜色）或者各种color的表示方法。

1. 使用背景图像作为背景

形式如上，background-image的属性也可以是none，表示没有背景图像，通常用于覆盖背景图像的样式。url是图像相对于CSS文件的位置，通常放在一个单独的imag文件夹里。此外尤为需要注意的是，背景图像默认重复。

1. 重复背景图像

   利用background-repeat属性，我们可以更加自由的设置图像重复的模式。

上面的direction只是个关键字，可以取四个值：repeat、repeat-x、repeat-y、no-repeat，意思体现的很清楚，更重要的是，在没有设置backgroun-repeat属性的时候默认repeat。

1. 控制背景图像是否随页面滚动

   这里用到的是background-attachment属性，该属性有三个关键字：fixed（图像附着在浏览器窗口）、scroll（图像随浏览器滚动）或local（只有访问者滚动背景图像所在的元素时背景图像才移动），默认是scroll。
   

2. 指定元素背景图像的位置

这里的x和y表示距离左上角的绝对距离或者百分数，允许负值，也可以是left（左对齐）、right（右对齐）、center（居中）表示x，用bottom（底端对齐）、center（居中）或top（顶端对齐），如果两个都是关键字，那么顺序不重要。

1. 在一条声明中设置所有的背景属性

在这个属性里，你可以将前面五条规则任意组合，对于排列顺序并没有要求。

注意几个默认值：background-coloràtransparent、background-imagànone、background-repeatàrepeat、background-attachmentàscroll、background-positionàtop left，在你需要修改的时候，显式的声明即可覆盖默认值。

通常情况下都是用这种方式设置背景，因为这样更简单直接，而且不必声明所有的属性，没被声明的自动填充为默认。

1. 更多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（默认）。

1. 控制间距

CSS提供了增加或减少单词之间或字母之间的距离，前者称为字间距（word-spacing），后者称为字偶距(letter-spacing)。

两个属性的值可以用px，也可以用em，如果使用em，只有结果大小会被继承。

两者的值都可以是负数。

如果要设为默认值，可以使用normal或0。

1. 添加缩进

   通过设置text-indent属性，可以指定段落第一行前面应该空出多大的空间。

使用负数会产生悬挂缩进，这就需要增加文字周边的内间距和外间距，从而让容器有足够的空间接纳这些缩进，不过这些东西下节才会接触到。

该属性是继承的，要忽略继承的缩进，设为0即可。

1. 对齐文本

   根据需要，可以让文本左对齐、右对齐、居中对齐或两端对齐。

该属性对适用于盒模型的元素，如h1~h6,p等显示为单独行的元素，但对短语元素，如strong,em等显示在行内的元素不起作用，除非将它们显式的改为块级，即将它们的display属性改为block或者inline-block，尽管多数情况下并不会这样做。

1. 修改文本的大小写

   使用text-transformed属性，可以为样式定义文本的大小写，比如将文本显示为首字母大写、全部大写、全部小写或按原样显示。

上面的属性，依次对应：每个单词的首字母大写，所有字母大写，所有字母小写，让文本保持原来的样子或者说取消继承。

有人说为什么不直接在HTML里改变文本的样式，因为有时HTML的源是未知的，用CSS控制这时候就显得很合理，按照"渐进增强"的理念，HTML控制内容，CSS控制样式，很合理。

1. 使用小型大写字母

   很多字体都有对应的小型大写字母变体，其中字母是大写的，但是缩小到了小写字母的大小，这里用的是font-variant属性。

有时字体并没有小型大写的样式，浏览器有可能将它们处理成uppercase的样子。

这个属性可以合并到font属性里。

1. 装饰文本

   可以使用text-decoration属性装饰文本，如添加下划线或者其他类型的线条，目前最常用到的就是为链接状态添加样式。

分别对应下划线、上划线和删除线。

这种属性是继承的，不过通常对于子元素都是取消样式。

1. 设置空白属性

   默认情况下，HTML文档里的多个空格和回车会显示为一个空格，或者被忽略，如果要让浏览器显示这些额外的空格，可以使用white-space属性。

pre让浏览器显示原文本中所有的空格和回车，nowrap确保所有空格不断行，也就是文本全部显示在一行，normal就是正常显示。

尽管在HTML中可以使用<br>换行，但还是要避免使用br，除非没有更好的选择，因为它将表现混入了HTML，而不是让CSS控制。

总结：写到最后，十六个属性，还只是关于文本的，其实说到底，我们写的CSS，大部分还真的就是针对文本的，所以把这些掌握好了，剩下的就不多了。属性虽然很多，但经常用到的不过那三四个而已，但我们也能看到的出CSS对于样式的掌控是如此的精细而有准确，开发者有很大的自由空间。下一次我们讲关于CSS布局，也是非常重要的一部分。