文本样式
text-align 文本的水平对齐
可选值：
left：左侧对齐right：右侧对齐center：居中对齐justify：两端对齐
vertical-align 设置元素垂直对齐的方式
可选值：
baseline默认值 基线对齐top：顶部对齐bottom：底部对齐middle：居中对齐
**注:**只针对于行内元素和行内块元素
text-decoration 设置文本修饰
可选值：
none：默认值，什么都没有underline：下划线·overline：上划线line-through删除线
可以为修饰设置样式
text-decoration：underline red doteed;注：ie不支持
white-space 设置网页如何处理空白
可选值：
normal正常nowrap不换行pre保留空白/原格式
text-shadow:用来设置文本阴影
text-shadow: h-shadow v-shadow blur color;h-shadow:必需，水平阴影的位置，允许负值v-shadow:必需，垂直阴影的位置，允许负值blur：可选，模糊距离color： 可选，阴影颜色
text-indent:文本缩进
- 注：允许使用负值。如果使用负值，那么首行会被缩进到左边。
- 可选值：
- 定义固定的缩进值，默认为 0
- 百分比，基于父元素宽度的百分比
letter-spacing: 字符间距
- 每一个汉字，和每一个字母都是一个字符
word-spacing: 字间距（字以空格为分隔符）
text-transform: 大小写转换
行高（line-height）：指定文字占有的实际高度
可以用line-height来设置行高
行高可以直接指定一个大小（px,em) 也可直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定倍数
字体框
- 定义：就是字体存在的格子，设置font-size实际上就是设置字体框的高度
- 行高会在字体框的上下平均分配
应用
- 可以将行高设置为高度一样的值，使单行的文字在一个元素中垂直居中
- 行高经常还用来设置文字的行间距
行间距=行 减 字体大小
设置文本省略号
方式一 (可能存在兼容问题)
.box2 {
width:200px;
/*不换行*/
white-space:nowrap;
/* 裁剪掉溢出的文本*/
overflow:hidden;
/* 文本裁剪，显示。。。*/
text-overflow:ellipsis;
}
方式二
.content .container .item h3{
width：300px;
/* 多余文本使用...代替 */
/* 溢出隐藏 */
overflow: hidden;
/* 设置盒子类型 伸缩盒子 */
display: -webkit-box;
/* 设置显示几行 */
-webkit-line-clamp: 1;
/* 设置里面的元素的对齐方式 */
-webkit-box-orient: vertical;
}
字体样式
color：用来设置字体的颜色
font-size：字体大小
相关单位：
rem相当于根元素的一个font-size
em相当于当前元素的一个font-size
像素
font-family：字体族(字体样式)
可选值：
serif衬线字体sans-serif非衬线字体monospace等宽字体指定字体类别，浏览器会自动使用该类别下的字体
font-family:"courier New","courier",monospace;
**注：字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推 **
- 多种字体使用逗号隔开
- 字体名中有中文或多个英文单词时需要使用引号包裹，单双引号均可
@font-face
- 可以将服务器中的字体直接提供给用户使用
/* 引入字体文件*/
@font-face{
font-family: ' 字体名称 ' ;
src:url("服务器中的字体路径") ,
url("服务器中的字体路径");
}
p {
/* 使用字体文件*/
font-family: 字体名称 ;
}
- 一种类型字体文件需要使用一个
@font-face - 字体文件可以引入多种格式，为了保证不同浏览器的兼容性问题，中间使用逗号隔开
- 字体文件格式不能直接更改后缀名，借助第三方工具转换
- 字体文件需要放在项目文件中
字体风格
font-style
可选值：
normal默认值，正常的italic斜体oblique：倾斜
font-weight：
- 可选值：
- 数值100-900 无单位
normal不加粗 默认值bold加粗bolder更加粗lighter比正常字体更细
字体的简写属性：
font可以设置字体相关的所有属性- 语法：字体大小/行高 字体族
图标字体（iconfont）
- 在网页中经常需要使用一些图标，可通过图片来引入图标， 但图片大小本身比较大，并且非常不灵活
- 将图标直接设置为字体，通过font-face的形式进行引入
font awesome图标字体
使用方式一
将all.css引入到目录中
在html中直接使用类名来使用图标字体
<i class="fas fa-bell"></i>
使用方式二
通过伪元素来设置图标字体
- 找到设置的元素通过before 或after 选中
- 在content中设置字体的编码
- 设置字体样式
IcoMoon图标字体
使用步骤
打开网址，点击图中所示位置
进入图中页面，选择所需要的图标字体
进入页面之后点击右下角Download下载压缩包
将压缩包解压，找到文件中的fonts文件夹，将此文件夹放在要使用的网页的根目录下
找到解压文件中的style.css 复制其中的 @font-face 中的内容添加到所需的页面中，如图
在页面中使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?z9byv6'); src: url('fonts/icomoon.eot?z9byv6#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?z9byv6') format('truetype'), url('fonts/icomoon.woff?z9byv6') format('woff'), url('fonts/icomoon.svg?z9byv6#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } span { font-family: 'icomoon'; font-size: 300px; color: saddlebrown; } </style> </head> <body> <div> <span></span> / </div> </body> </html>span标签中的内容，找到demo.html文件