『我们可以很简单就拥有个人主页⑥』装修主页吧！·文字篇
声明
- 本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故
大概不会涉及到较为复杂的部分。- 如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。
这篇文章主要关于 CSS 内装饰文字用的格式声明及其属性，主要参考了 HTML 基础教程及 CSS 文档的内容。
本篇覆盖内容
『我们可以很简单就拥有个人主页』系列目录
① 内容是主页的基础
② 插入各类元素让文章丰富多彩·上
③ 插入各类元素让文章丰富多彩·下
④ 装修主页吧！·基础篇
⑤ 装修主页吧！·源代码篇
⑥ 装修主页吧！·文字篇
⑦ 装修主页吧！·图像篇
⑧ 装修主页吧！·技巧篇
CSS 的格式声明非常多，在这里我会介绍可能会比较频繁被用到的一些关于设置文字格式的声明的属性。不过在此之前……
您还记得修改文字的颜色、字号、字体的 HTML 语法吗？假如我们想要修改文章中的某一段文字为红色的 12 号字，且字体为「Times New Roman」，我们会这么写：
<span style="color:red; font-size:12px; font-family:'Times New Roman'">文字</span>
其中，style="" 的引号内的内容是我们设置的字体格式的内容，它们的写法/格式是不是有些眼熟？
没错，它们就是这段文字字体的格式声明。
在 HTML 中，如果您只是想给某一个特别具体的元素（比如某一段文字、某一个单独的物件等）赋予格式，您只需在写文章时在这个元素所用的标签内增加 style="" 这一标签属性，并在引号内填写 CSS 的格式声明即可。
比如上文中的这个修改某段文字的格式的写法，正是因为我们只是想给某一段文字设置格式，所以比起使用 CSS，我们选择直接用文章内的 HTML 指令来进行格式的设置。
我们在设置某段文字的格式时所使用的
<span>标签就是在 HTML 中专门用来组合文档内的行内元素或为其设置格式的标签。也就是说，这篇文章接下来所提到的所有格式声明基本都可以直接利用
<span>标签的style=""这一属性来进行文章内特定文字的装饰。
color, font-size, font-family
那么想必您现在已经知道在 CSS 中设置文字的颜色、字号及字体的声明了：
- 颜色：
color: 颜色;- 「颜色」可以为 HTML 支持的颜色名字或颜色的十六进制编码。
- 字号：
font-size: 字号;- 「字号」可以有很多种单位，其中较为常见且容易掌握的是：
数字px：类似平时所说的几号字，是固定的字号。数字em：比起固定字号，更像是给字体设置了一个相对的字号，所以更为灵活。每个元素都有一个基础的字号，也就是1em，那么1.1em就相当于基础字号的 1.1 倍。数字%：百分比，与em类似。110%相当于基础字号的 1.1 倍。
- 「字号」可以有很多种单位，其中较为常见且容易掌握的是：
- 字体：
font-family: 字体名称;- 「字体名称」一般为英文，如果是由多个单词组成则需要用单引号括起。
- 「字体名称」可以有很多个，每个之间用
,隔开即可，如font-family: 'Times New Roman', 'Helvetica';。一般来说网页会使用第一个字体，但如果页面或浏览器不支持该字体，则会按照编写顺序使用下一个字体。
⚠ 编写 CSS 中的格式声明时，请不要忘记一条声明结尾的分号。
是否在
:后空格无伤大雅。因此，为了阅读方便，我选择在 CSS 代码中的冒号后空格，却并没有在 HTML 中空格。
font-style
font-style 用来设置字体的风格，和上面那三个属性数值范围非常广的属性不同，它只有几种固定的属性数值，其中较为常见的是：
font-style: normal;：默认值font-style: italic;：斜体font-style: oblique;：倾斜- 与「斜体」不同，「倾斜」可以设置倾斜的角度，比如
font-style: oblique 10deg;就是倾斜了 10°。
- 与「斜体」不同，「倾斜」可以设置倾斜的角度，比如
如果您设置的字体风格即使加上了
!important也没有呈现出来，很有可能是因为您所使用的字体并没有这种风格。
font-weight
font-weight 用来设置字体的粗细，比如粗体或者细体都是由这个属性设置的：
font-weight: normal;：默认值font-weight: bold;：粗体font-weight: lighter;：细体font-weight: bolder;：极粗font-weight: 数字;：字体粗细的数值- 数值范围为100 到 900，以百为单位。即使您输入了个位数和十位数的数值，读取代码时系统也会将其转化成百为单位的数字。
同样，如果您设置的字体粗细即使加上了
!important也没有呈现出来，很有可能是因为您所使用的字体并没有这种粗细类型。
line-height
line-height 用来设置段落的行高，它的属性数值的单位和 font-size 所用的相同。
比如 line-height: 10px; 就代表该元素的行高是 10 px。
text-align
text-align 用来设置段落的对齐方式，主要有以下几种属性数值：
text-align: left;：左对齐text-align: right;：右对齐text-align: center;：居中text-align: justify;：左右对齐
text-indent
您还在通过手动敲空格来设置首行缩进吗？您可以直接通过 text-indent: 字号; 来设置段落的缩进，属性数值的单位同样和 font-size 所用的相同。
如果您填写的数值是正数，那么就是首行缩进；负数则是悬挂缩进。
text-decoration
text-decoration 是用来装饰文字的，比如您想给某一元素的文字增加下划线，并想给这个下划线设置特殊的样式和颜色，那么您就需要用到这个属性了。它的属性数值稍微有些复杂，是由多个部分组成的：
text-decoration: 样式 线条类型 颜色 粗细;
其中，样式有以下几种可以选择的数值：
solid：单实线dashed：虚线dotted：点线wavy：波浪线double：双实线
线条类型则有以下几种，您可以选择一种，也可以组合使用：
underline：下划线overline：上横线line-through：删除线
颜色和粗细则和前面介绍文字颜色和文字粗细时可以用的数值相同。 若是有您不想特别设置的数值，您可以选择不填，这样系统会选择用默认值。
✎ 例如
text-decoration: line-through blue;
文字 2：text-decoration: dotted overline;
文字 3：text-decoration: dashed underline overline red;
文字 4：text-decoration: wavy underline #F0F8FF 2px;
效果： 文字 1 文字 2 文字 3 文字 4
text-shadow
text-shadow 用来设置文字的阴影，它的属性数值同样由多个部分组成：
text-shadow: 横向移动距离 竖向移动距离 模糊半径 颜色;
其中，横向与竖向的移动距离数值为正数时说明是向右方和下方移动；负数则表示向左方和上方移动。
您同样可以选择不填部分数值，系统会直接使用默认值。
您也可以增加多个阴影，只要使用 , 隔开每个阴影的属性数值即可。
✎ 例如
text-shadow: 2px 5px;
文字 2：text-shadow: -3px -10px red;
文字 3：text-shadow: 5px 5px 3px gray;
文字 4：text-shadow: 2px 2px red, 10px 10px 5px gray;
效果： 文字 1 文字 2 文字 3 文字 4
感谢您的阅览。 下一篇文章将会介绍图像相关的格式声明的属性。
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.