一、在HTML5中使用CSS的方法
添加CSS有4种方法：内嵌样式、行内样式、链接样式、导入样式表。
4种样式的优先级是：行内样式、内嵌样式、链接外部样式、导入样式
1、内嵌样式
定义在head标签内，格式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style type="text/css">
<!--
选择符1（样式属性：属性值；样式属性：属性值；……）
选择符2（样式属性：属性值；……）
……
-->
</style>
</head>
<body>
</body>
</html>
2、行内样式
是混合在HTML标记中使用，可以对某个元素单独定义样式。
这种方式会导致HTML页面不够简洁，不推荐使用。
<标记 style="样式属性：属性值；样式属性：属性值……"></标记>
3、链接外部样式表
在网页中调用已经定义好的样式表，样式表是一个单独的文件，在HTML文件中用link标记链接样式表，再放到head标签中。这种方式最实用，便于修改。
样式表是 .css文件
<link type="text/css" rel="stylesheet" href="外部样式表的文件名">
4、导入样式
是指在内部样式表的style中导入一个外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style type="text/css">
@import url("外部样式表的文件名");
其他样式表的声明
</style>
</head>
<body>
</body>
</html>
二、通过CSS控制文本样式
1、字体 font-family
指定的字体会受到用户环境的影响
font-family:"字体1","字体2"
2、字号 font-size
取值可以使用长度值，也可使用百分比
3、加粗字体 font-weight
取值：
- normal：正常粗细
- bold：粗体
- bolder：特粗体
- lighter：特细体
- number：范围是100~900，一般取整百
4、字体风格 font-style
设置字体是否为斜体
- normal：默认正常的字体
- italic:斜体
- oblique：属于中间状态，偏斜体显示
5、小写字母转为大写字母 font-variant
转换为大写的同时，让字母大小保持与小写时一样的尺寸
- normal：正常值
- small-caps:转换为大写字母
三、通过CSS控制段落格式
1、单词间隔 word-spacing
设置英文单词间的距离，可以使用normal，也可设置长度值
2、字符间隔 letter-spacing
控制字符之间的距离
3、文字修饰 text-decoration
对文本进行修饰，如设置下划线、删除线
- none：默认值
- underline：下划线
- overline：上划线
- line-through：删除线
- blink：闪烁文字效果
4、垂直对齐方式 vertial-align
- baseline：默认的
- sub：文字的下标
- super：上标
- top：垂直靠上对齐
- text-top：使元素和上级元素的字体向上对齐
- middle：垂直居中对齐
- text-bottom：使元素和上级元素的字体向下对齐
5、文本转换 text-transform
转换英文字母的大小写
- none：默认值
- lowercase：使每个单词的第一个字母大写
- uppercase：每个单词的所有字母大写
- capitalize：全部小写
6、水平对齐方式 text-align
- left：左对齐
- right：右对齐
- center：居中对齐
- justify：两端对齐
7、文本缩进 text-indent
可以控制段落的首行缩进以及缩进的距离，缩进值可以是长度值或百分比
8、文本行高 line-height
- normal：默认
- number：设置数字
- length：设置固定的行间距
- %：基于当前字体尺寸的百分比设定行间距
- inherit：从父元素继承高属性的值
9、处理空白 white-space
- normal
- pre：保持源代码的换行、空格
- nowrap：在一行内显示所有文本，直到文本结束或者遇到br标签
- pre-wrap：保持空白符序列，但是正常进行换行
- pre-line：合并空白符序列，保留换行符
- inherit：继承父元素属性
四、综合
.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<link href="CSS使用.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]<br>
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]
</p>
</body>
</html>
.css文件
body{
font-family: "宋体";
font-size: 14px;
font-weight: bold;
font-style: normal;
word-spacing: normal;
text-decoration: underline;
vertical-align: super;
text-transform: lowercase;
text-align: center;
text-indent: 50pt;
line-height: 100px;
white-space: normal;
}
