CSS — 字体和背景

目录

一、字体

  1.color

  2.font-size

  3.font-family 字体族（字体的格式）

  4.font-face

  5.图标字体（iconfont）

  6.行高（line height）

  7.字体的简写 

  8.文字的样式 

        (1).text-align 文本的水平对齐

        (2).vertical-align设置元素垂直对齐的方式

        (3).text-decoration 设置文本修饰

        (4).white-space 设置网页如何处理空白

二、背景 

  1.background-color

  2.background-image

  3.background-repeat

  4.background-position

  5.background-clip

  6.background-origin

  7.background-size

  8.background-attachment

  9.background 背景相关的简写属性

  10.线性渐变

  11.径向渐变（放射性的效果）

---

一、字体

  1.color

                color 用来设置字体颜色

color: tomato;

  2.font-size

                font-size字体的大小

                和font-size相关的单位有em,rem

                        em 相当于当前元素的一个font-size

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

font-size: 40px;

 

  3.font-family 字体族（字体的格式）

                        serif   衬线字体

                        sans-serif  非衬线字体

                        monospace   等宽字体

        指定字体的类别，浏览器会自动使用该类别下的字

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

font-family: monospace,serif,sans-serif;

  4.font-face

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

            存在的问题：

                (1).加载速度慢

                (2).版权问题

        @font-face{
            /* 指定字体的名字 */
            font-family: 'myfont';
            /* 服务器中字体的路径 format字体格式 */
            src: url(XXX) format('truetype');
        }

 

  5.图标字体（iconfont）

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

        可以在 https://www.iconfont.cn/ 网站寻找并使用合适的图标。

  6.行高（line height）

        行高指的是文字占有的实际高度，可以通过line-height来设置行高。

        行高也可以指定一个大小（px em），也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体指定的倍数

        行高还经常用来设置文字的行间距

                        行间距 = 行高 - 字体大小

        可以将行高设置为和高度一样，使单行文字在一个元素中垂直居中

字体框是什么？

        字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框的上下平均分配

  7.字体的简写 

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

                语法：

                        font:字体大小/行高 字体族

        行高可以省略不写，如果不写则设置为默认值；字重和字体的样式同理

font:bold italic 50px sans-serif,'Times New Roman', Times, serif;

font-weight 字重