美化样式
文本美化
作为 Web 页面最基本的组成部分，“文本” 的重要性不言而喻。对于“文本”来说，我们需要掌握两个与之相关的属性，“字体属性” 和 “文本属性”。
- CSS 字体属性：主要定义“文本”的字体系列、字体大小、字体粗细、风格和变形等；
- CSS 文本属性：主要定义“文本”的外观——如缩进和水平对齐、垂直对齐、字符间隔和字母间隔、文本转换、文本装饰、文本阴影、处理空白符和文本方向等。
我们先来看看字体属性
从百度百科上拷下来一段文字
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
我们使用p标签将其包裹，并使用 h1标签为其设置一个标题
<body>
<h1>CSS(层叠样式表)</h1>
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body>
其在网页上显示的效果，不能说难看..... emmm只能说没什么特点吧。
让它变得有特点，我们可以使用 font声明来实现
文本的字体系列
五种通用字体系列
-
Serif 字体（又名“衬线字体”）
-
Sans-serif 字体（又名“无衬线字体”）
-
Monospace 字体 （又名“等宽”字体）
-
Cursive 字体（又名“手写体”）
-
Fantasy 字体（又名“梦幻字体”）
- 这种字体的特征就是：我们无法很容易地将其归于以上 4 种字体中。
- 它主要被用在图片中，字体看起来很艺术，实际网页上用得不多。
font-family 属性用于指定文本内容采用何种 “字体系列”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
.all{
font-family: 楷体;
}
</style>
</head>
<body class="all">
<h1>CSS （层叠样式表）</h1>
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body>
</html>
我们使用 font-family属性使其字体系列修改为了 楷体。
除了楷体外，我们还可以为英文专门添加字体系列， 比如说Times New Roman
这种存在空格或特殊符号的字体系列，在定义时需要使用英文的引号 引起来，否则浏览器无法识别
font-family: "Times New Roman",楷体;
关于字体系列这里多嘴一句
由于在一个跨平台的环境下，我们无法保证用户同样也安装了这些特定字体。
如果用户没有安装这几种字体，那么用户的浏览器就会使用一个默认的字体来显示这个 Web。对此，我们 Web 制作者将无法控制显示效果。
但，如果末尾加了一个 serif，则可以告诉用户的浏览器：即使你电脑里没有安装我以上的这些字体，那么也请使用一个你电脑里边安装了的“衬线体”来显示我的文本内容
文本的字体大小
字体系列是改变了，但我觉得字体的大小还是费眼睛，我们能不能在不修改标签的同时调整文本字体的大小呢？
那自然是可以的
操作也很简单，我们再定义一个标签选择器，使用 font-size属性来定义文本的字体大小即可。
p{
font-size: 20px;
}
这样看起来就舒服多了
文本的字体粗细
除了能够定义字体系列、字体大小，我们还能够定义文本的字体粗细
font-weight 属性用于定义文本的字体粗细。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。
但，字体所拥有的字重的数量，实际上很少存在满足有 9 个字重刚好跟 100-900 的 CSS 字重一一对应的情况，通常字体拥有的字重数量为 4 到 6 个。当然，也不必担心，至少 400 和 700 对应的字重是每种字体必备的——数字 400 等价于 normal，而 700 等价于 bold。
实际工作中，我们一般最常用的还是 normal 和 bold 这两个值。
- normal
- bold
文本的字体风格
font-style 属性用于定义“文本”的字体风格。
那么有哪些字体风格呢？
-
italic
- 如果当前字体的斜体版本可用，那么文本设置为斜体版本
- 如果不可用，那么浏览器会利用 oblique 状态来模拟 italics。
-
oblique
- 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
-
normal
- 将文本设置为普通字体（将存在的斜体关闭）
文本的字体变形
除了上面几种比较基础的玩法，我们还可以让文本内容变得更有意思一些。
比如说：希望一篇文章中的英文单词或英文字母，无论是小写还是大写，统一变成大写
我们可以使用 font-variant属性来做到
font-variant的可选值为 normal和 small-caps。
normal 为正常的字体；small-caps 能让小写字母变成小型大写字母。
就像这样：
文本的字体颜色
修改文本的字体颜色，最简单的方式自然是添加一个color属性，并指定颜色。
自定义字体配色
我也不是专业的前端，这种专业的东西还是留给别人来说的好
接下来我们来说说文本属性
文本的大小写转换
我们先从网上找一段，看不懂但好像很厉害的英文诗
Early in the day it was whispered that we should sail in a boat, only thou and I, and never a soul in the world would know of this our pilgrimage to no country and to no end.
我们将这几行诗放到我们的p标签中
在网页上的显示
我们使用 text-transform属性来对该文本进行一些操作
我们看看它有哪些值供我们使用
none- 防止任何转型
uppercase- 将所有文本转为大写；
lowercase- 将所有文本转为小写；
capitalize- 转换所有单词让其首字母大写；
full-width- 将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。
- 主要用于：拉丁字符以及亚洲语言字形（如中文，日文，韩文）
首先是大小写的转换
再看看 capitalize，它会让所有单词的首字母大写
full-width 这个值在英文中就不适用了，我们再定义一段中文。
<p>我是中文</p
可以看到，其在网页上的显示极其方正。
除了文本内容大小写的转换，以及使其等宽这些操作外，我们还能够给这个文本加一些诸如“下划线”、“上划线”和“中划线”的装饰
文本的简单装饰
text-decoration 属性用于加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰。
text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。所以，我们在实际工作中可以使用这些属性值的组合来实现一些效果
我们先看看它有哪些值供我们使用
- none
- 取消已经存在的任何文本装饰
- underline
- 文本下划线；
- overline
- 文本上划线；
- line-through
- 穿过文本的线（中划线）
我们每个都写一遍，看看效果如何
文本添加阴影
text-shadow 属性用于给文本加些阴影，但它没有提供给我们直接用的值 需要我们手动的定义，而且要定义四个。
text-shadow的值比较特别，它需要 4 个独立的值来定义：
-
值1 用于定义阴影的基础颜色
-
值2 指定阴影与原始文本的水平偏移“距离”，这个值必须指定。
- 距离的长度可以使用大多数的 CSS 单位，但实际工作中用 px 最为合适。
- 正长度值向右偏移，负长度值向左偏移。
-
值3 指定阴影与原始文本的垂直偏移“距离”，这个值也必须指定。
- 正长度值向下偏移，负长度值向上偏移。
-
值4 指定阴影的“模糊半径”。
- 更高的值意味着阴影分散得更广泛。
- 这个值非必须指定，如果不指定此值，则默认为 0，即没有模糊。
我们使用一下该属性，看看效果如何
上图中的偏移半径写错了，应该是模糊半径，重新改图也挺麻烦的 各位自己手动纠正吧。
文本首行缩进
我们还可以使用 text-indent属性用于指定文本内容的第一行前面应该留出多少的水平空间。
这一操作没什么难度，应该都难不倒大家。
可以使用 em也可以使用px，一般都使用 em我这边为了演示 px就用了px。
文本水平对齐
我们可以使用 text-align属性来控制文本的对齐方式，该属性提供了一些值供我们使用。
- center
- 文本居中
- left
- 左对齐
- right
- 右对齐
我们仍然三种都使用，都看看效果
行高
line-height 属性用于设置文本每行之间的高。
当行与行之间拉开空间，正文文本的阅读体验会更好。
“高”可以接受大多数单位，但实际工作中我们常常设置一个无单位的值作为乘数。用无单位的值乘以 font-size 来获得 line-height 。推荐的行高大约是 1.5–2，即字体高度的 1.5 - 2 倍。
文本间距
设置文本字符串的间距我们一般使用 word-spacing 属性，而字母和字符的间距则使用 letter-spacing 属性。
需要注意的是word-spacing属性，也可以用于设置单词于单词之间的间距。（单词与单词之间使用空格分隔）
使用word-spacing 属性
使用 letter-spacing 属性
密恐福利（不是
处理空白符号
white-space 属性用于处理“字符串之间”和“文本之间”的空白符显示方式。
它提供了一些常用的值供我们调用
-
normal
- 和默认的一样，合并所有的空白符，并忽略换行符
-
pre
- 浏览器不会合并空白符，也不会忽略换行符
-
nowrap
- 不换行
-
pre-wrap
- 浏览器不仅会保留空白符并保留换行符，还允许自动换行
-
pre-line
- 浏览器会保留换行符，并允许自动换行，但是会合并空白符，这是与 pre-wrap 值的不同之处。
值还挺多的，就不一个一个写了，我们只写一个 nowrap就好
补充
我们还可以使用伪类中的 hover来做到鼠标悬停时为其添加一些效果
比如鼠标悬停时p标签中的文本内容会改变颜色和缩放大小
图片中我们鼠标是有放在第二行的 但截图会隐藏鼠标所以看不到。
背景
我们在日常生活中打开一个一个的网页，这些网页有时候不全是文本内容，还会存在背景这一元素。
背景可以是一个颜色，也可以是一张图片。
我们先来看看如何往我们的 html网页中添加一张图片作为背景
上图为 我之前放在项目文件夹中的图片，不难看出 该图片的高宽并不适合作为背景。
添加图片作为背景我们一般使用 background-image: 属性。
该属性有一个 url函数供我们使用，该函数用于指定我们图片资源的路径。该路径可以是项目资源的路径 也可以是远程资源的路径。
background-image: url("../../../resources/image/蕾塞.jpg");
网页中的效果：
虽然该图片不适合作为背景，但我们还是能够得到需要的效果。
不难看出，如果我们选中的图片无法铺满整个网页，那么就会是一个平铺的效果，这是 background-image属性的默认选项
我们也可以使其不平铺
background-image: url("../../../resources/image/蕾塞.jpg");
background-repeat: no-repeat;
追加一个 background-repeat属性参数即可
现在就是一个不平铺的效果。
除了设置它平铺与否，我们还可以设置让它水平平铺或者垂直平铺
当然了，在这之前我们需要将该图片等比例缩放一下，图片尺寸太大了展示不出效果。
我们先来看看水平平铺的效果：
background-repeat: repeat-x;
垂直平铺：
background-repeat: repeat-x;
我们还可以使用 background-position:属性来控制图片的水平与垂直的移动
该属性的第一个 css单位为 水平移动的值，第二个 css单位则是垂直移动的值。
我们使其水平移动100px，不垂直移动。
background-position: 100px 0px;
我们还可以将上述的这些零散的属性写到一个属性中。
background: url("../../../resources/image/蕾塞1.jpg") repeat-y 100px 0px;
/* 最前面省略了一个背景颜色的定义 */
该属性可以定义背景的颜色、背景图片和、平铺方式、xy移动的值。
这样写，会更方便代码也更简洁 但可读性会差一些。
我们还可以为其添加一个背景的颜色，该操作也很简单 我们直接在url前面追加一个颜色即可。
background: #ffdfd0 url("../../../resources/image/蕾塞1.jpg") repeat-y 100px 0px;
除了这种比较单一的背景颜色，我们还可以为其添加多个颜色 也就是所谓的渐变
关于渐变，审美和创造性不是很好的朋友可以移步该网站，该网站中有现成的渐变css。
我们随便选一个样式
复制到我们的 html代码中
background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 33%, #8de2c2 66%, #b8e4b3 100%);
大概就是这样一个效果
放松一下眼睛
夹带私货（不是
