打码日常6day-html5+css3（font+bg）

css3

字体相关的样式

• color 用来设置字体颜色

• font-size 字体的大小

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

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

• font-family 字体族（字体的格式）

  可选值：

  ​ serif 衬线字体

  ​ sans-serif 非衬线字体

  ​ monospace 等宽字体

  • 指定字体的类别，浏览器会自动使用该类别下的字体
  • font-family 可以同时指定多个字体，多个字体间使用,隔开
  • 字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

	p{
      color: coral;
      font-size: 20px;
      font-family: '微软雅黑';
    }

图标字体

• 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活

• 所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入

• 这样我们就可以通过使用字体的形式来使用图标

  1.fontawesome 使用步骤
        1.下载 https://fontawesome.com/
        2.解压
        3.将css和webfonts移动到项目中
        4.将all.css引入到网页中
        5.使用图标字体
          \- 直接通过类名来使用图标字体
            class="fas fa-bell"
            class="fab fa-accessible-icon"
            
            <i class="fas fa-bell fa-rotate-90"></i>
     		  <i class="fas fa-spinner"></i>
     		  
  2. 通过伪元素来设置图标字体
  	 1.找到要设置图标的元素通过before或after选中
       2.在content中设置字体的编码
       3.设置字体的样式
         fab
         font-family: 'Font Awesome 5 Brands';
         
         fas
         font-family: 'Font Awesome 5 Free';
         font-weight: 900; 
         
          li::before{
              content: '\f1b0';
               /* font-family: 'Font Awesome 5 Brands'; */
               font-family: 'Font Awesome 5 Free';
               font-weight: 900;
               color: coral;
               margin: 10px;
          }
         
  3.通过实体来使用图标字体：
  	 &#x图标的编码;
  	 <span class="fas">&#xf0f3;</span>
  

行高

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

• 可以通过line-height来设置行高

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

• 行高经常还用来设置文字的行间距（行间距 = 行高 - 字体大小）

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

• 字体框：

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

• 行高会在字体框的上下平均分配

  div {
        font-size: 30px;
        line-height: 100px;
        border: 1px orange solid;
        }
  

文本的水平和垂直居中

• text-align 文本的水平对齐

  可选值：

       left 左侧对齐
  

  ​ right 右对齐

  ​ center 居中对齐

  ​ justify 两端对齐

  text-align: justify;
  

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

  可选值：

      baseline 默认值 基线对齐
  

  ​ top 顶部对齐

  ​ bottom 底部对齐

  ​ middle 居中对齐

   vertical-align: top;
  

其他文本样式

• text-decoration 设置文本修饰

  可选值：

  ​ none 什么都没有

  ​ underline 下划线

  ​ line-through 删除线

  ​ overline 上划线

• white-space 设置网页如何处理空白

  可选值：

  ​ normal 正常

  ​ nowrap 不换行

  ​ pre 保留空白

• 设置文本很长结尾变成省略号

  span{
        width: 100px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
  

  背景

• backgroundh-color 设置背景颜色

• background-image 设置背景图片

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

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

• 如果背景的图片大于元素，将会一个部分背景无法完全显示

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

   background-image: url(./img/dog1.jpg);
  

• background-repeat 用来设置背景的重复方式

  • 可选值：

    ​ repeat 默认值 ， 背景会沿着x轴 y轴双方向重复

    ​ repeat-x 沿着x轴方向重复

    ​ repeat-y 沿着y轴方向重复

    ​ no-repeat 背景图片不重复

    background-repeat: no-repeat;
    

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

  • 设置方式：

    • 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置

    • 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

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

    background-position: center;
     background-position: -300px 100px;
    

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

• 第一个值表示宽度, 第二个值表示高度

• 如果只写一个，则第二个值默认是 auto

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

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

  background-size: contain;
  

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

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

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

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

  background-origin: content-box;
  

• background-clip 设置背景的范围

  • border-box 默认值，背景会出现在边框的下边

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

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

     background-clip: content-box;
    

• background-attachment 背景图片是否跟随元素移动

• scroll 默认值 背景图片会跟随元素移动

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

   background-attachment: scroll;
  

• backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置,并且该样式没有顺序要求，也没有哪个属性是必须写的

  • 注意：

    background-size必须写在background-position的后边，并且使用/隔开

    	background-position/background-size
    

    background-origin background-clip 两个样式 ，orgin要在clip的前边

雪碧图

• 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载（link会首先加载，而hover和active会在指定状态触发时才会加载）

• 雪碧图解决图片闪烁的问题（将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片）

• 雪碧图的使用步骤：

  1.先确定要使用的图标

  ​ 2.测量图标的大小

  ​ 3.根据测量结果创建一个元素

  ​ 4.将雪碧图设置为元素的背景图片

  ​ 5.设置一个偏移量以显示正确的图片

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

渐变

• 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果！！渐变是图片，需要通过background-image来设置

  • linear-gradient() 线性渐变，颜色沿着一条直线发生变化

  • linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域

  • 线性渐变的开头，我们可以指定一个渐变的方向

    to left
    to right
    to bottom
    to top
    deg deg表示度数
    turn 表示圈

  • 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况

    background-image: linear-gradient(red,yellow,#bfa,orange); 
    
    background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
    

  • repeating-linear-gradient() 可以平铺的线性渐变

  background-image: repeating-linear-gradient(to right ,red, yellow 50px);
  

  • radial-gradient() 径向渐变(放射性的效果)

    • 默认情况下径向渐变的形状根据元素的形状来计算的

      正方形 --> 圆形
      长方形 --> 椭圆形

    • 我们也可以手动指定径向渐变的大小

      circle
      ellipse

    • 也可以指定渐变的位置

      语法：radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)

      大小：

      ​ circle 圆形
      ​ ellipse 椭圆
      ​ closest-side 近边
      ​ closest-corner 近角
      ​ farthest-side 远边
      ​ farthest-corner 远角

      位置：

      ​ top right left center bottom

       background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)
      

渐变参考