CSS——字体背景（Font Background）

一、字体族

    1、字体的相关样式：

① color    用来设置字体颜色（前景颜色）

② font-size  字体的大小

                     和font-size相关的单位： em  相对于当前元素的一个font-size

                                                            rem 相对于根元素的一个font-size

③ font-family  字体族（字体的格式）       指定字体的类别，浏览器会自动使用该类别下的字体

                         可选值：   serif  衬线字体

                                         sans-serif   非衬线字体

                                         monospace   等宽字体

           font-family 可以同时指定多个字体，多个字体间用逗号（，）隔开，字体生效时优先使用第一个，第一个无法使用时则使用第二个，以此类推。

④ font-face  可以将服务器中的字体直接提供给用户去使用

                      问题：加载速度慢、版权问题、字体格式

                     格式：  @font-face{

                                                     font-family： ；    /*指定字体的名字*/

                                                     scr：url（    ）；   /*服务器中字体的路径*/

                                                     }

二、图标字体（iconfont）

    1、在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。

    2、用法：将all.css（即所有图标的样式文件）引入到网页中，然后直接通过类名来使用图标字体:  class=“fas  fa-bell”或者class=“fab  fa-accessible-icon”

                    其中，class里面的fas或者fab都是不能修改的，后面跟图标字体的名字。也可修改大小跟颜色。

    3、其他用法

 通过伪元素来设置图标字体：① 找到要设置图标的元素通过before或者after选中

                                                ② 在content中设置字体的编码

                                                ③ 设置字体的样式：

                                                                  fab类：font-family：‘Font Awesome 5 Brands’；

                                                                  fas类：font-family：‘Font Awesome 5 Free’；font-weight：900；

通过实体来使用图标字体：格式  ——   &#x图标字体的编码；

三、行高（line height）

    1、行高指的是文字占有的实际高度。

    2、可以通过line-height来设置行高，行高也可以指定一个大小（px  em），也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体的指定的倍数。

    3、行高经常还用来社会文字的行间距。

          行间距=行高-字体大小

    4、字体框：字体框就是字体存在的格子，设置font-size实际上就是设置字体框的高度。

    5、行高会在字体框中进行上下平均分配。

四、字体的简写属性

    1、font  可以设置字体相关的所有属性。

                    语法：font：字体大小/行高   字体族  【中间必须空格隔开，行高可以省略不写，如果不写则使用默认值】

    2、font-weight   字重，字体的加粗

                                可选值：normal   默认值，不加粗

                                              bold       加粗

    3、font-style   字体的风格

                             可选值： normal   正常的

                                            italic       斜体的

    五、文本的水平和垂直对齐

     1、text-align：文本的水平对齐

                            可选值：  left   左侧对齐

                                            right  右侧对齐

                                            center  居中对齐

                                            justify    两端对齐

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

                                   可选值： baseline   默认值，子元素和父元素基线对齐

                                                  top    顶部对齐

                                                  bottom   底部对齐

                                                  middle   居中对齐（与字母x的中点对齐）

                                                  也可以设置任意数值，正值向上对齐，负值向下对齐

       3、对于图片的垂直对齐问题，也会默认跟基线对齐，为了取消这种对齐方式，让图片跟基线之间没有缝隙，可以采用 vertical-align：top；或者vertical-align：bottom；或者vertical-align：middle；来进行设置，取消图片与基线之间的缝隙。

    六、其他的文本样式

     1、 text-decoration：设置文本修饰

                                      可选值： none   默认值，什么修饰都没有

                                                    underline    下划线

                                                    line-through   删除线

                                                    overline  上划线

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

                                 可选值：  normal   默认值，对空白部分不加处理

                                                 nowrap   不换行

                                                 pre  保留空白

    3、 overflow：hidden；    对溢出内容进行裁剪

         text-overflow：ellipsis；   对溢出内容用省略号表示

七、背景

    1、background-color   设置背景颜色

    2、background-image   设置背景图片

                                             语法：  background-image：url（）     【括号里面写图片的路径，可添加双引号也可以没有双引号】

    3、可以同时设置背景颜色和背景图片，这样背景颜色将会成为图片的背景色。

    4、如果背景图片大小小于元素的大小，则背景图片会自动在元素中平铺将元素铺满。

    5、如果背景图片大于元素，则会有一部分背景图片无法完全显示。

    6、如果背景图片和元素一样大，则会直接正常显示。

    7、background-repeat   用来设置背景图片的重复方式

                                            可选值：   repeat  默认值，背景图片会沿着x轴、y轴双方向重复

                                                             repeat-x   沿着x轴方向重复

                                                             repeat-y   沿着y轴方向重复

                                                             no-repeat   背景图片不重复

    8、background-position   用来设置背景图片的位置

               设置方式：① 通过  top 、left 、right 、bottom 、center 几个表示方位的词来设置背景图片的位置。使用方位词必须指定两个值，如果只写一个则第二个默认是center。

                                 ② 通过偏移量来指定背景图片的位置：水平方向的偏移量  垂直方向的偏移量

 9、background-clip   设置背景的范围

                                        可选值：  border-box    默认值，背景只会出现在边框的下边

                                                        padding-box   背景不会出现在边框，只会出现在内容区和内边距

                                                        content-box     背景只会出现在内容区

   10、background-origin   背景图片的偏移量计算的原点

                                            可选值：    padding-box   默认值，background-position从内边距处开始计算

                                                              content-box   背景图片的偏移量从内容区处开始计算

                                                              border-box     背景图片的变量从边框处开始计算

   11、background-size   设置背景图片的大小

                                         可选值：  第一个值表示宽度    第二个值表示高度     【如果只写一个，则第二个默认是auto】

                                                        cover    图片的比例不变，将元素铺满

                                                        contain   图片的比例不变，将图片在元素中完整显示

   12、background-attachment     设置背景图片是否跟着元素移动

                                                        可选值： scroll    默认值，背景图片跟随元素移动

                                                                       fixed   背景图片固定在页面中，不会跟随元素移动

   13、background    背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，没有顺序要求，也没有哪个属性是必须写的。

                                  注意：① background-size必须写在background-position后面并且中间用/隔开，即background-position/background-size

                                            ② background-origin必须写在background-clip前面

   八、按钮练习

  九、雪碧图

雪碧图的使用步骤：

  ① 先确定要使用的图标

  ② 测量图标的大小

  ③ 根据测量结果创建一个元素

  ④ 将雪碧图设置为元素的背景图片

  ⑤ 设置一个偏移量以显示正确的图片

雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验。

   十、线性渐变

（1）通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

（2）渐变是图片，需要通过background-image来设置

（3）线性渐变【 linear-gradient（）】：颜色沿着一条直线发生变化

                         语法 ：background-image：linear-gradient（方向，颜色1 ，颜色2）

        例如：  linear-gradient（red，yellow）    表示红色在开头，黄色在结尾，中间是过渡区域

       线性渐变的开头，我们可以指定一个渐变的方向：   to left  向左渐变

                                                                                         to right      向右渐变

                                                                                         to bottom  向下渐变

                                                                                         to top        向上渐变

                                                                                         xxxdeg      deg表示度数

                                                                                         xxxturn      turn表示圈

（4）渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况，颜色后面加入像素即可。

（5）repeating-linear-gradient（）   可以平铺的线性渐变

  十一、径向渐变

（1）radial-gradient（）   径向渐变（放射性的效果）

（2）默认情况下径向渐变的形状根据元素的形状来计算：

                                                                                       正方形——>圆形

                                                                                       长方形——>椭圆形

       也可以手动指定渐变的位置，语法： radial-gradient（大小   at 位置，颜色1    位置，颜色2   位置，······）     【注：大小、位置可省略不写】

                                                   其中，① 大小的可选值：

                                                                                        circle   圆形

                                                                                        ellipse   椭圆形

                                                                                        closest-side    距离原点最近的边（近边）

                                                                                        closest-corner   距离原点最近的角（近角）

                                                                                        farthest-side     远边

                                                                                        farthest-corner   远角

                                                              ② 位置的可选值：top    right  left  center   bottom

本文分享就到这里，欢迎大家一同讨论学习，下一篇跟大家补充一下HTML的表格和表单的内容。