页面单位

长度单位

  • 像素是网页中使用最多的单位。一个像素相当于我们屏幕的一个小点
  • 百分比设置即为父元素的百分比。创建一个自适应的页面，经常使用
  • em和百分比类似，它是相对于当前元素的字体大小来计算的
    • 1em=1 font-size
    • 当字体大小发生改变时，em也会随之改变
    • 当设置字体相关样式时，经常会使用em

颜色单位

可通过rgb(,,,)设置颜色样式
也可写入浓度0%表示0，100%表示255
用#开头也可写入16进制，三组两位的16进制，00 - ff。比如红色ff0000。两两重复的可以简写
用截图工具取颜色

字体

字体样式

  • color设置字体颜色
  • font-size实际是字体的大小
    • 相关单位：
      • em当前元素的一个font-size
      • rem根元素的font-size
  • font-family设置字体族，该样式可以同时指定多个字体，浏览器先使用前面。浏览器使用的字体就是计算机中的
  • font-face可以将服务器中的字体直接提供给用户使用。font-family指定字体的名字，src填写路径
  • font-style设置字体斜体
    • normal正常的
    • italic斜体
  • font-weight设置加粗效果
    • normal默认值不加粗
    • bold加粗
    • 100-900九个级别，基本没什么用
  • font-variant用来设置小型大写字母
  • font统一设置字体样式，不同值用空格隔开。
    • font：字体大小/行高 字体族
    • 斜体 加粗 小大字母没有顺序要求，可写可不写。
    • 文字的大小和字体必须写，而且字体必须放最后。这样写性能会比较好

图标字体

  • 在网页中经常需要使用一些图标，可以通过图片来引入，但是图片大小本身比较大，并且非常不灵活，
  • 所以在使用图标时，还可以将图标直接设置为字体，然后通过font-face的形式来进行引入
  • FontAwesome使用步骤
    • 下载库并解压
    • 将css和webfonts移动到项目中
    • 将all.css引入到网页中
    • 使用图标字体
      • 直接通过类名来使用 classs=’fas或fab 图标名’
      • 通过伪元素设置图标字体：1、找到设置图标的元素通过before或after选中。2、在content中设置字体的编码（文档中查询）前面加反斜杠。3、设置字体的样式，font-family（fab或fas的样式）

  • Iconfont

    行高

  • 行高指的是文字占有的实际高度

  • 通过line-height来设置，可以直接接收一个像素大小，也可以接受一个百分数（占字体大小的），也可以接受一个整数（字体大小的倍数）
  • 字体框
    • 字体存在的格子，通过font-size设置的是字体框高度
    • 行高会在字体框的上下平均分配
  • 对于单行文字来说，可以将行高设置为和父元素高度一致，这样可以使单行文本在父元素中垂直居中。因为文字默认在行高居中的
  • 行高还经常用来设置文字的行间距。行间距=行高-字体大小

文本样式

  • text-transform设置文本大小写
  • text-decoration设置文本的修饰
    • none
    • underline下划线
    • line-through删除线
    • overline上划线
  • letter-spacing设置字符间距
  • word-spacing设置词之间空格大小（英文比较有用）
  • text-align设置文本对齐方式
    • left左对齐
    • right右对齐
    • center居中对齐
    • justify两段对齐
  • vertical-align设置元素垂直对齐方式
  • text-indent设置首行缩进，一般可以设为2em