8、前端开发：CSS知识总结——文本样式

 

字体设置也是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。

目录

一、行高    

 1、行高（line height）

  line-height:

 2、单行文本在父元素中垂直居中

 3、font中也可以指定行高

 二、文本样式

 1、text-transform 可以用来设置文本的大小写

 2、text-decoration 可以用来设置文本的修饰

3、lerrer-spacing 可以指定字符间距

4、 word-spacing 可以设置单词之间的距离

5、text-align 用于设置文本的对齐方式

6、 text-indent 设置首行缩进

 7、 white-space：； 设置网页如何处理空白

 8、 text-overflow：文本溢出包含元素时发生的事情

9、 设置文本的阴影

10、设置元素的阴影

三、图片三像素的问题

四、如何设置元素水平垂直居中 

一、行高    

 1、行高（line height）

            文字占有的实际高度

            行高=上间距+文字的大小+下间距

            默认情况下，上间距=下间距

  line-height:

               可选值

                 1、直接是一个大小  line-height:50px;

                 2、可以放一个倍数   line-height:2;

                     是当前字体的倍数

                 3、可以放一个百分比   是当前字体的百分比

 2、单行文本在父元素中垂直居中

设置文本的高度跟父元素高度一致即可

 3、font中也可以指定行高

语法：

 font:字体的大小/行高 字体;

 二、文本样式

font-family：设置字体；
font-style：设置字体的风格，例如倾斜、斜体等；
font-weight：设置字体粗细；
font-size：设置字体尺寸；
font-variant：将小写字母转换为小型大写字母；
font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；
font：字体属性的缩写，可以在一个声明中设置多个字体属性。 

 1、text-transform 可以用来设置文本的大小写

可选值

 nome默认值  文本正常显示

 uppercase 文本大写

 lowercas  文本小写

 capitalize 单词首字母大写

text-transform:capitalize;

 2、text-decoration 可以用来设置文本的修饰

 可选值

 nome 默认值 文本正常显示

 underline  下划线

 overline   上划线

 line-through   删除线

   

         text-decoration:line-through;

3、lerrer-spacing 可以指定字符间距

4、 word-spacing 可以设置单词之间的距离

      letter-spacing: 20px;

                word-spacing: 20px; 

5、text-align 用于设置文本的对齐方式

可选值

 left 文本向左 默认值

 right  文本向右

 justify  两端对齐

             text-align: center

 

6、 text-indent 设置首行缩进

常用的 em单位

              text-indent: 2em;

 7、 white-space：； 设置网页如何处理空白

   可选值 nowarp 不换行

 8、 text-overflow：文本溢出包含元素时发生的事情

设置单行文本省略号的写法  ：

先设置宽固定的宽度  ：width: 300px;         

设置不换行 ：white-space:nowrap;

设置省略号：text-overflow: ellipsis;

裁剪多余的内容/溢出的内容：overflow: hidden;

9、 设置文本的阴影

 text-shadow： h-shadow v-shadow bulr color；

参数：

        第一个参数：阴影的水平位移距离   （必填）正值向右 负值向左

        第二个参数：阴影的垂直位移距离    （必填） 正值向下  负值向下

        第三个参数：阴影的模糊半径

        第四个参数：阴影的颜色  （默认字体颜色)

 h1{

            color: red;

            text-shadow:10px 30px 15px rgba(0, 0, 0, .5);

        }

10、设置元素的阴影

         box-shadow： h-shadow v-shadow bulr color；

  参数：

           第一个参数：阴影的水平位移距离   （必填）正值向右 负值向左

           第二个参数：阴影的垂直位移距离    （必填） 正值向下  负值向下

           第三个参数：阴影的模糊半径

           第四个参数：阴影的颜色  （默认黑色)

三、图片三像素的问题

解决图片三像素的问题：

               1、vertical-align:;非baseline默认值即可

               2、将图片转成块元素（副作用：独占一行）

               3、在父元素，将font-size设置0（副作用：父元素里面的所有的字都没有）

               4、让元素脱离文档流，就不会再区分块元素，行内元素，行内块元素

                   （副作用：可能会让你的布局混乱） 

四、如何设置元素水平垂直居中 

vertical-align  设置元素垂直对齐的方式

设置图文对齐方式

可选值：baseline  基线对齐  默认值

top  bottom   middle