HTML5自学2

1.1   文字格式

一个杂乱无序、堆砌而成的网页，会让人感觉枯无味，而一个美观大方的网页，会让人有美轮美奂，流连忘返的感觉，本节将介绍如何设置网页文本格式。

文字格式包括字体、字号、文字颜色、字体风格等内容

1.1.1          设置文字字体

一、网页字体概述

网页字体设置不同于平面设计等其他媒体设计，有更多的艺术字体可供选择，浏览器解析字体的过程是这样的，当浏览器加载 CSS 后，解析到有关字体的样式，它会在你的系统中查找这个字体，只有找到了相应的字体文件，才会根据那个字体文件对网页中的文字进行渲染，显示出你想要的效果。如果你的操作系统中，并没有安装网页中定义的那种字体，就无法渲染出那种字体的效果，而通常使用当前系统的默认字体来渲染。Window平台下的默认字体情况如下：

宋体（SimSun）：Win下大部分游览器的默认字体，宋体在小字号下（如12px、14px）的显示效果较好。

微软雅黑（"Microsoft Yahei"）：从 Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，并且拥有 Regular、Bold 两种粗细的字重，显著提高了字体的显示效果。现在这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始，微软雅黑又加入了 Light 这款更细的字重，对于喜欢细字体的设计、开发人员又多了一个新的选择。

Arial：是Win平台上默认的无衬线西文字体, 显示效果一般。

Tahoma：十分常见的无衬线字体，被采用为Windows 2000、Windows XP、Windows Server 2003及Sega游戏主机Dreamcast等系统的预设字型，显示效果比Arial要好。

二、设置网页字体

1．基本语法格式：

font-family:字体名称；

例如：

font-family: STXihei, "Microsoft YaHei";

font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

font-family: Arial, Tahoma,"Microsoft YaHei";

英文、数字字体的最佳写法如下

font-family: Helvetica, Tahoma, Arial;

2．补充字体族名称：

字体族大体上分为两类：sans-serif（无衬线体）和serif（衬线体），当所有的字体都找不到时，我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好，因此我们需要在最后添加 sans-serif，写法如下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

3．设置字体的经典写法：

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

说明：该设置优先选择了lucida家族的系列字体作为英文字体，该系列字体在Mac和Win上都是预装的，且显示效果较好；中文字体方面将冬青黑体作为最优先使用的字体，sans-serif（无衬线体）字体族为最后字体选择，同时考虑了Linux系统。

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

说明：优先使用Helvetica Neue这款字体以保证Mac用户的最佳体验，选择了Arial作为Win下默认英文字体及Mac的替代英文字体；中文字体方面首选了微软雅黑，然后选择了冬青黑体及黑体-简作为Mac上的替代方案；最后使用文泉驿微米黑兼顾了Linux系统。

font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

说明：代码中使用了Tahoma、Arial作为首选英文字体，中文字体首选了冬青黑体，由于Win下没有预装该款字体，所以显示出了后面的宋体（5b8b4f53为汉字宋体用 unicode 表示的写法，不用SimSun是因为 Firefox 的某些版本和 Opera 不支持 SimSun的写法）

1.1.2 设置文字字号

一个网页中，标题通常使用较大的文字显示，用于吸引人的注意，小的文字用来显示网页内容，大小字体结合，形成网页，即吸引了人的注意力，又提高了阅读速度。

在HTML5中通常使用font-size设置文字大小，其语法格式如下：

font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length

一、各参数的含义

xx-small :　 绝对字体尺寸。根据对象字体进行调整。最小

x-small :　 绝对字体尺寸。根据对象字体进行调整。较小

small :　 绝对字体尺寸。根据对象字体进行调整。小

medium :　 默认值。绝对字体尺寸。根据对象字体进行调整。正常

large :　 绝对字体尺寸。根据对象字体进行调整。大

x-large :　 绝对字体尺寸。根据对象字体进行调整。较大

xx-large :　 绝对字体尺寸。根据对象字体进行调整。最大

larger :　 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算

smaller :　 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算

length :　 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。

二、单位标识

px: 基于像素的单位。像素是一种有用的单位，因为在任何媒体上都可以保证一个像素的差别确实是可见的。

em : 一般用来测量长度的通用单位(例如元素周转的页边空白和填充)，当用于指定字体大小时，em单位是指父元素的字体大小。

比如

<div style="font-size:12px">

<span style="fontsize:2em">这里的字是24px</span>

</div>

总结：px是像素单位，em是相对单位，pt是绝对单位。它们各自的好处是：px可以在计算机屏幕上，能达到预期的效果，在打印机和其它的高分辨率设备上，它又能取得所希望的效果。em的优点很多，比如在一个页面上，你给定了一个父元素的字体大小，这样就可以通过调整一个元素来成比例的改变所有元素大小。它可以自由缩放，比如用来制作可伸缩的样式表。pt是一种固定长度的度量单位，是能够使用测量设备测得的长度。绝对单位作用有限，因为它们不能够缩放，通常只用在已经知道是用在哪种输出媒体的情况下才使用。但大多数情况下最好使用相对单位。一般都是用px和em这两种种配搭比较好。

1.1.3设置文字颜色
没有颜色就失去了生机，这就意味着一个优秀的网页设计者必须具有一定的色彩视觉和色彩搭配能力，这样才能使网页更加精美，也更具表现力，并给浏览者以亲切感。
一、字体颜色的选择
字体的颜色选择是一个重要的细节，通常来说，文章都是白底黑字，个别需要点显示的关键字，可以使用其它颜色设置.
二、字体颜色的设置
常用COLOR来设置文本颜色，其属性值常用下面的方式设定：
color_name 规定颜色值为颜色名称的文本颜色（比如 "red"）。
hex_number 规定颜色值为十六进制值的文本颜色（比如 "#ff0000"）。
rgb_number 规定颜色值为 rgb 代码的文本颜色（比如 "rgb(255,0,0)"）。
rgba_number 规定颜色值为 rgba 代码的文本颜色（比如 "rgba(255,0,0,0.3)"）
Inherit 规定应该从父元素继承颜色
Hsl_number 规定颜色值为HSL代码的颜色（比如 "hsl(359,75%,50%)"）
Hsla_number 规定颜色值为HSLa代码的颜色（比如 "hsl(0,75%,50%,0.5)"）

控制换行
一、使用white-space控制换行
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
1. Pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
2. Nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
3. pre-wrap：保留空白符序列，但是正常地进行换行。
4. pre-line：合并空白符序列，但是保留换行符。
5. inherit ：规定应该从父元素继承 white-space 属性的值。
二、使用<br>标签换行
<br> 可插入一个简单的换行符。换行后上下行文字距离是按line-height行高实现间距。通常情况下，<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行的左边，或者在左对齐的内联图形或表格的右边开始继续输出文本流。
但是有时候，如果希望当前的文本流在当前左边或右边的内联表格或图像的下面一行继续输出，<br> 标签的 clear 属性可以实现这个功能。
三、使用<p>标签换行
<p>标签定义段落,