[前端开发] CSS基础知识 [下]

• 上篇:CSS 基础知识 [上]
  

  CSS基础知识 [下]

  • • CSS 新特性
    • 媒体查询
    • 雪碧图
    • 字体图标

CSS 新特性

• 圆角 (border-radius)

  • 通过 border-radius 属性为元素添加圆角。
  • 类型:
    • border-radius: a b c d: 四个值分别为左上|右上|右下|左下角
    • border-radius: a b c : 三个值分别为左上|右上和左下|右下
    • border-radius: a b : 两个值分别为左上和右下|右上和左下
    • border-radius: a : 一个值代表四个角

• 阴影 (box-shadow)

  • 通过 box-shadow 属性为元素添加阴影效果。
    • box-shadow: h-shadow v-shadow blur color
    • h-shadow: 必填, 水平阴影的位置(负值就往左边, 正值往右边)
    • v-shadow: 必填, 垂直阴影的位置(负值就往上边, 正值往下边)
    • blur: 可选, 模糊距离
    • color: 可选, 阴影颜色

• 动画 (animation)

  • 使用 @keyframes 创建动画，然后通过 animation 属性将动画应用到元素上。

  • 使元素从一种样式逐渐变化为另一种样式的效果

    • 用 from 或 0% 表示动画开始
    • 用 to 或 100% 表示动画完成

  • @keyframes 创建动画

    @keyframes name{
           
    from|0%{
           
    css样式
    }
    percent{
           
    css样式
    }
    to|100%{
           
    css样式
    }
    }
    

    • name: 动画的名称
    • percent: 百分比, 可以添加多个百分比值

  • animation 执行动画

    • animation: name duration timing-function delay iteration-count direction;
    • name: 设置动画名称
    • duration: 设置动画持续时间
    • 注意要加上单位 秒(s)
    • timing-function: ease|linear|ease-in|ease-out|ease-in-out|

  • 设置动画效果的速率

    • ease:逐渐变慢(默认)
    • linear: 匀速
    • ease-in: 加速
    • ease-out: 减速
    • ease-in-out: 先加速后减速

  • delay: 设置动画开始时间(延时)

    • 注意要加上单位 秒(s)
    • iteration-count: 设置动画循环次数(infinite为无限循环)
    • direction: normal|alternate

  • 设置动画播放方向

    • normal: 正向(默认)
    • alternate: 在第偶数次向前播放, 第奇数次向反方向播放

  • animation-play-state: 控制动画播放状态(running为播放, paused为停止)

媒体查询

• 设置 meta 标签
  • 在 HTML 文件的头部添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置视口参数，以确保在不同设备上显示良好。
• 媒体查询语法
  • 使用 @media 查询不同设备大小，并根据条件加载相应的 CSS 样式，以实现响应式布局。

雪碧图

• 雪碧图是一种将多个小图片合并成一张大图的技术，通过减少页面的 http 请求来提高页面加载速度。
• 优点
  • 减少图片的字节
  • 减少页面的http请求,从而大大提高页面的性能
• 原理
  • 通过 background-image 引入背景图片
  • 通过 background-position 把背景图片移动到自己需要的位置

字体图标

• 常用字体图标库: 阿里字体图标库 https://www.iconfont.cn/
• 使用方式
  • 注册登录
  • 选择图标
  • 添加购物车
  • 下载代码(也可以添加到项目,然后下载压缩包)
  • 将下载的文件放在网页代码文件所在的目录下
  • 选择 font-class 引用(可以打开下载的文件里的.html文件查看使用方式)