HTML+CSS（二）

字体

字体样式

• color 设置字体颜色
• ont-size 设置字体的大小
  • em 相当于当前元素的一个font-size
  • rem 相对于根元素的一个font-size
• font-family 字体族（字体的格式）
  • 可选值：指定字体的类别，浏览器会自动使用该类别下的字体
    • serif 衬线字体
    • sans-serif 非衬线字体
    • monospace 等宽字体
• font-family 可以同时指定多个字体，多个字体间使用,隔开,字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
• 行高
  • 行高指的是文字占有的实际高度,可以通过line-height来设置行高,行高可以直接指定一个大小（px em）,也可以直接为行高设置一个整数,如果是一个整数的话，行高将会是字体的指定的倍数。
  • 行高经常还用来设置文字的行间距：行间距 = 行高 - 字体大小
  • 字体框:字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度,行高会在字体框的上下平均分配.
• text-align 文本的水平对齐
• vertical-align 设置元素垂直对齐的方式
• text-decoration 设置文本修饰
  • none：无样式
  • underline：下划线
  • line-through：中划线
  • overline：上划线
• white-space 设置网页如何处理空白
  • normal：正常
  • nowrap：不换行
  • pre：保留空白

图标字体（iconfont）

• 简介：在网页中经常需要使用一些图标，可以通过图片来引入图标,但是图片大小本身比较大，并且非常的不灵活,所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入,这样我们就可以通过使用字体的形式来使用图标。
• fontawesome 使用步骤：
  1. 下载：https://fontawesome.com/
  2. 将下载的压缩包进行解压
  3. 讲css和webfonts移动到项目中
  4. 讲all.css引入到网页中
  5. 使用图标字体：
     • 直接通过类名来使用图标字体
       • class=“fas fa-bell”
       • class=“fab fa-accessible-icon”

背景

背景颜色

• background-color 设置背景颜色

背景图片

• background-image 设置背景图片
• 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
• 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
• 如果背景的图片大于元素，将会一个部分背景无法完全显示
• 如果背景图片和元素一样大，则会直接正常显示
• background-repeat 用来设置背景的重复方式
  • repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
  • repeat-x 沿着x轴方向重复
  • repeat-y 沿着y轴方向重复
  • no-repeat 背景图片不重复
• background-position 用来设置背景图片的位置
  • 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置,使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
  • 通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量
• 设置背景的范围
  • background-clip
    • border-box 默认值，背景会出现在边框的下边
    • padding-box 背景不会出现在边框，只出现在内容区和内边距
    • content-box 背景只会出现在内容区
  • background-origin 背景图片的偏移量计算的原点
    • padding-box 默认值，background-position从内边距处开始计算
    • content-box 背景图片的偏移量从内容区处计算
    • border-box 背景图片的变量从边框处开始计算
• background-size 设置背景图片的大小
  • 第一个值表示宽度 ,第二个值表示高度;如果只写一个，则第二个值默认是 auto
  • cover 图片的比例不变，将元素铺满;contain 图片比例不变，将图片在元素中完整显示
• backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有哪个属性是必须写的
  • 注意：background-size必须写在background-position的后边，并且使用/隔开,background-position/background-size;background-origin background-clip 两个样式 ，orgin要在clip的前边

动画

过渡*（transition）*

• 简介
  • 通过过渡可以指定一个属性发生变化时的切换方式
  • 通过过渡可以创建一些非常好的效果，提升用户的体验
• 相关方法：

/* 
transition-property:指定过渡的属性，多个属性之间用，隔开。如果所有属性都需要过渡，则使用all关键字，大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡。
*/
transition-property: height , width;
/* 
	transition-duration:指定过渡效果的持续时间
	时间单位：s和ms  1s=1000ms
*/
transition-duration: 2s;

 /*
	transition-timing-function:过渡效果的时序函数，用来指定过渡的执行方式
	可选值：
		ease：默认值，慢速开始，先加速，再减速
		linear 匀速运动
        ease-in 加速运动
        ease-out 减速运动
        ease-in-out 先加速 后减速
        cubic-bezier() 来指定时序函数
        https://cubic-bezier.com
        steps() 分步执行过渡效果，可以设置一个第二个值：
            end ， 在时间结束时执行过渡(默认值)
            start ， 在时间开始时执行过渡
		
*/
transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
transition-timing-function: steps(2, start);
/* 过渡效果的延迟，等待一段时间后在执行过渡  */
transition-delay: 2s;
/* transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);

动画

• 简介：
  • 动画和过渡类型类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。
  • 设置动画效果必须先设置一个关键帧，关键帧设置了动画执行的每个步骤。
• 方法简介：

/* 关键帧 */
@keyframes test {
    /* from表示动画的开始位置 也可以使用 0% */
    from{
        margin-left: 0;
        background-color: orange;
    } 
    /* to动画的结束位置 也可以使用100%*/
    to{
        background-color: red;
        margin-left: 700px;
    }
}
 .box2{
     background-color: #bfa;
     /* 设置box2的动画 */
     /* animation-name: 要对当前元素生效的关键帧的名字 */
     animation-name: test;
     /* animation-duration: 动画的执行时间 */
     animation-duration: 4s;
     /* 动画的延时 */
     animation-delay: 2s;
     /* animation-timing-function: ease-in-out; */
     /* 
     animation-iteration-count 动画执行的次数 
         可选值：
             次数
             infinite 无限执行
     */
     animation-iteration-count: 1;
     /*
     animation-direction
     指定动画运行的方向
     可选值：
         normal 默认值  从 from 向 to运行 每次都是这样 
         reverse 从 to 向 from 运行 每次都是这样 
         alternate 从 from 向 to运行 重复执行动画时反向执行
         alternate-reverse 从 to 向 from运行 重复执行动画时反向执行
     */
     animation-direction: alternate-reverse;
     /* 
     animation-play-state: 设置动画的执行状态 
         可选值：
             running 默认值 动画执行
             paused 动画暂停
     */
     animation-play-state: paused;
     /* 
     animation-fill-mode: 动画的填充模式
     可选值：
         none 默认值 动画执行完毕元素回到原来位置
         forwards 动画执行完毕元素会停止在动画结束的位置
         backwards 动画延时等待时，元素就会处于开始位置
         both 结合了forwards 和 backwards
     */
     animation-fill-mode: both;
     animation: test 2s 2 1s alternate;
}

变形

• 简介：变形就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局,不会脱离文档流

• 常用方法：

   html{
       /* 设置当前网页的视距为800px，人眼距离网页的距离 */
       perspective: 8000px;
  }
  /* 
     	transform 用来设置元素的变形效果
          - 平移：
              translateX() 沿着x轴方向平移
              translateY() 沿着y轴方向平移
              translateZ() 沿着z轴方向平移
          - 平移元素，百分比是相对于自身计算的
  */
  transform: translateY(-100px); 
  transform: translateX(100%);
  /* 
  z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
  距离越大，元素离人越近
  z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
  必须要设置网页的视距
  */
  body:hover .box1{
      transform: translateZ(800px);
  }
  /*
      通过旋转可以使元素沿着x y 或 z旋转指定的角度
      rotateX()
      rotateY()
      rotateZ()
  */
  transform: rotateZ(.25turn);
  transform: rotateY(180deg) translateZ(400px);
  transform: translateZ(400px) rotateY(180deg) ;
  transform: rotateY(180deg);
  /* 是否显示元素的背面 */
  backface-visibility: hidden;
   /* 
  对元素进行缩放的函数：
      scaleX() 水平方向缩放
      scaleY() 垂直方向缩放
      scale() 双方向的缩放
  */
  transform:scale(2)
  
  

less

简介

• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性：像对变量的支持、对mixin的支持… …
• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

语法

// less中的单行注释，注释中的内容不会被解析到css中

/*
    css中的注释，内容会被解析到css文件中
*/
.box1{
    background-color: #bfa;

    .box2{
        background-color: #ff0;

        .box4{
            color: red;
        }
    }

    .box3{
        background-color: orange;
    }
}

//变量，在变量中可以存储一个任意的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法： @变量名
@a:200px;
@b:#bfa;
@c:box6;

.box5{
    //使用变量是，如果是直接使用则以 @变量名 的形式使用即可
    width: @a;
    color:@b;
}

//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

@d:200px;
@d:300px;

div{
    // 变量发生重名时，会优先使用比较近的变量
    @d:115px;
    width: @d;
    height: @e;
}

//可以在变量声明前就使用变量
@e:335px;


div{
    width: 300px;
    // 新版的语法
    // height: $width;
}
.box1{
    .box2{
        color: red;
    }

    >.box3{
        color: red;

        &:hover{
            color: blue;
        }
    }

    //为box1设置一个hover
    //& 就表示外层的父元素
    &:hover{
        color: orange;
    }

    div &{
        width: 100px;
    }
}

.p1{
    width: 100px;
    height: 200px;
}

//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}

.p3{
    //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin 混合
    .p1();
}

// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
}

.p5{
    .p4;
}

//混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    //调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);
    .test(300px);
    // .test(@bg-color:red, @h:100px, @w:300px);
}

span{
    color: average(red,blue);
}

html{
    width: 100%;
    height: 100%; 
}
body {
    width: 100%;
    height: 100%;
    background-color: #bfa;
}

body:hover{
    background-color: darken(#bfa,50%);
}

浮动

弹性盒

• flex(弹性盒、伸缩盒)：是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
• flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
• 弹性容器
  • 要使用弹性盒，必须先将一个元素设置为弹性容器
  • 我们通过 display 来设置弹性容器
    • display:flex 设置为块级弹性容器
    • display:inline-flex 设置为行内的弹性容器
• 弹性元素
  • 弹性容器的子元素是弹性元素（弹性项）
  • 弹性元素可以同时是弹性容器

/* 
    弹性元素的属性：
        flex-grow 指定弹性元素的伸展的系数
            - 当父元素有多余空间的时，子元素如何伸展
            - 父元素的剩余空间，会按照比例进行分配
        flex-shrink 指定弹性元素的收缩系数
       	 	- 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩
*/
flex-grow: 1;

弹性容器的样式

ul {
    width: 800px;
    border: 10px red solid;
    /* 设置ul为弹性容器 */
    display: flex;
    /* flex-direction: column; */
    /* flex-wrap: 
    设置弹性元素是否在弹性容器中自动换行
        可选值：
            nowrap 默认值，元素不会自动换行
            wrap 元素沿着辅轴方向自动换行
            wrap-reverse 元素沿着辅轴反方向换行
    */
    /* flex-wrap: wrap-reverse; */
    /* flex-flow:  wrap 和 direction 的简写属性 */
    /* flex-flow: row wrap; */
    /*  
    justify-content
        - 如何分配主轴上的空白空间（主轴上的元素如何排列）
        - 可选值：
            flex-start 元素沿着主轴起边排列
            flex-end 元素沿着主轴终边排列
            center 元素居中排列
            space-around 空白分布到元素两侧
            space-between 空白均匀分布到元素间
            space-evenly 空白分布到元素的单侧
    */
    /* justify-content: center; */
}
ul{
    width: 600px;
    height: 800px;
    border: 10px red solid;
    /* 设置ul为弹性容器 */
    display: flex;
    lex-direction: column;
    /* flex-wrap: 
    设置弹性元素是否在弹性容器中自动换行
        可选值：
            nowrap 默认值，元素不会自动换行
            wrap 元素沿着辅轴方向自动换行
            wrap-reverse 元素沿着辅轴反方向换行
    */
    flex-wrap: wrap-reverse; 
    flex-flow:  wrap 和 direction 的简写属性 
    flex-flow: row wrap;
    /*  
    justify-content
        - 如何分配主轴上的空白空间（主轴上的元素如何排列）
        - 可选值：
            flex-start 元素沿着主轴起边排列
            flex-end 元素沿着主轴终边排列
            center 元素居中排列
            space-around 空白分布到元素两侧
            space-between 空白均匀分布到元素间
            space-evenly 空白分布到元素的单侧

    */
    justify-content: center;
    /*
    align-items: 
        - 元素在辅轴上如何对齐
        - 元素间的关系
        - 可选值：
            stretch 默认值，将元素的长度设置为相同的值
            flex-start 元素不会拉伸，沿着辅轴起边对齐
            flex-end 沿着辅轴的终边对齐
            center 居中对齐
            baseline 基线对齐
    */
    justify-content: center; 
    align-items: flex-start;
    /* align-content: 辅轴空白空间的分布 */
    align-content: space-between;
}

弹性元素的样式

<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul{
        width: 900px;
        border: 10px red solid;
        /* 设置弹性盒 */
        display: flex;

    }

    li{
        width: 200px;
        height: 100px;
        background-color: #bfa;
        font-size: 50px;
        text-align: center;
        line-height: 100px;

        /* 
        弹性的增长系数
        */
        /* flex-grow: 1; */

        /* 
        弹性元素的缩减系数
            - 缩减系数的计算方式比较复杂
            - 缩减多少是根据 缩减系数 和 元素大小来计算
        */
        /* flex-shrink: 1; */

        /* 
        元素基础长度

        flex-basis 指定的是元素在主轴上的基础长度
            如果主轴是 横向的 则 该值指定的就是元素的宽度
            如果主轴是 纵向的 则 该值指定的是就是元素的高度
                - 默认值是 auto，表示参考元素自身的高度或宽度
                - 如果传递了一个具体的数值，则以该值为准
        */
        /* flex-basis: auto; */

        /* 
        flex 可以设置弹性元素所有的三个样式
        flex 增长 缩减 基础;
        initial "flex: 0 1 auto".
        auto  "flex: 1 1 auto"
        none "flex: 0 0 auto" 弹性元素没有弹性
        */
        flex: initial;


    }
    li:nth-child(1){
        /* order 决定弹性元素的排列顺序 */
        order: 2;
    }

    li:nth-child(2){
        background-color: pink;
        /* flex-grow: 2; */
        order: 3;
    }

    li:nth-child(3){
        background-color: orange;
        /* flex-grow: 3; */
        order: 1;
    }
</style>

移动端布局

简介

• 在不通的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰,智能手机的像素点 远远小于 计算机的像素点
• 问题：一个宽度为900px的网页在iphone6中要如何显示呢？
  • 默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页
  • 移动端像素查看：https://material.io/resources/devices/
  • 所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页

像素

• 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
• 分辨率：1920 x 1080 说的就是屏幕中小点的数量
• 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
• 物理像素，上述所说的小点点就属于物理像素
• CSS像素，编写网页时，我们所用像素都是CSS像素
  • 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
  • 一个css像素最终由几个物理像素显示，由浏览器决定：默认情况下在pc端，一个css像素 = 一个物理像素

vw适配

• 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，比如在iphone6中 375就是全屏，而到了plus中375就会缺一块，所以在移动端开发时，就不能再使用px来进行布局了
• vw 表示的是视口的宽度（viewport width）
  • 100vw = 一个视口的宽度
  • 1vw = 1%视口宽度
  • vw这个单位永远相当于视口宽度进行计算

视口

• 视口就是屏幕中用来显示网页的区域
• 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
• 默认情况下：
  • 视口宽度 1920px（CSS像素）,1920px（物理像素）
  • 此时，css像素和物理像素的比是1:2
• 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

响应式布局

• 移动端默认的视口大小是980px(css像素)，默认情况下，移动端的像素比就是 ：980/移动端宽度 （980/750）,如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小
• 可以通过meta标签来设置视口大小，每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口。

<!-- 将网页的视口设置为完美视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 结论：以后再写移动端的页面，就把上边这个玩意先写上 -->

• 响应式布局
  • 网页可以根据不通的设备或窗口大小呈现出不同的效果
  • 使用响应式布局，可以使一个网页适用于所有设备
  • 响应布局的关键就是 媒体查询
  • 通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式

<style>
/*
    使用媒体查询 
        语法： @media 查询规则{}
            媒体类型：
                all 所有设备
                print 打印设备
                screen 带屏幕的设备
                speech 屏幕阅读器
                - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

        可以在媒体类型前添加一个only，表示只有。
        only的使用主要是为了兼容一些老版本浏览器
*/
    @media only screen {
        body{
        	background-color: #bfa;
        }
    }
</style>
媒体 查询二：

 <style>
        /*
             媒体特性：
                width 视口的宽度
                height 视口的高度

                min-width 视口的最小宽度（视口大于指定宽度时生效）
                max-width 视口的最大宽度（视口小于指定宽度时生效）
         */

         /* @media (max-width: 500px){
             body{
                background-color: #bfa;
             }
         } */

/* 
         样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
         一般比较常用的断点

         小于768 超小屏幕 max-width=768px
         大于768 小屏幕   min-width=768px
         大于992 中型屏幕 min-width=992px
         大于1200 大屏幕  min-width=1200px

*/
         @media only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }
</style>