CSS3

Devil
694 阅读12分钟

css3新增子级选择器(5个)

  • 注：如何判断一个元素是行内元素还是块级元素？答：加背景颜色查看一下就知道了！

  1. 子级选择器

    • 含义： 子级选择器用于选择带有特定父元素的元素。
    • 书写语法：Element1 > Element2
    • 注意事项：必须满足父子级关系才能选中标签。(区别于：后代选择器)

  2. 兄弟选择器

    • 两种书写语法

      选择器简介
      element1+element2匹配同一个父元素中紧跟在element1后面的一个element2元素
      element1~element2匹配同一个元素中在element1后面的所有element2元素

    • 相邻兄弟选择器

      • 含义：相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素(只有一个)，而且二者有相同的父元素。
      • 注意：
        1. 只能选中紧跟在后面的一个E2元素
        2. 如果后面紧跟的元素不是所写的标签，则样式不会生效
        3. +符号前后可以添加空格书写
        4. 两者有相同的父元素

    • 其他兄弟选择器

      • 含义：匹配同一个父元素中在element1后面的所有的element2元素。
      • 书写语法：element1~element2
      • ~前后可以添加空格书写

    • 总结：(满足两个条件)

      1. 同一个爸爸
      2. 兄弟为element2类型的(紧跟的1个/不必紧跟的多个)

  3. 结构伪类选择器

    • 选择器简介：

      选择器简介
      E:first-child匹配父元素中的第一个子元素E
      E:last-child匹配父元素中的最后一个子元素E
      E:nth-child(n)匹配父元素中的第n个子元素E
      E:first-of-type指定类型E的第一个
      E:last-of-type指定类型E的最后一个
      E:nth-of-type(n)指定类型E的第n个

    • nth-child(n)

      • n可以是：数字、关键字(even偶数、odd奇数)、公式
      • 常见的公式如下图所示
      • 如果是公式，则从0开始计算，n是从0,1,2,3...一直递增
      • 但是第0元素或者超出了元素的个数会忽略

    • E:nth-child(n)和E:nth-of-type(n)的区别

      • 区别：
        1. 第n个元素是E元素的选中
        2. 为E元素的第n个
      • 实例

  4. 伪元素选择器

    • 新增伪元素

      选择器介绍
      E::before在E元素内部的前面插入一个元素
      E::after在E元素内部的后面插入一个元素
      E::first-letter选择到了E容器内的第一个字母
      E::first-line选择到了E容器内的第一行文字

    • h5写法和传统写法区别

      1. 单冒号E:before
      2. 双冒号E::before
      3. 浏览器对以上写法都能识别，双冒号是h5的语法规范。

    • 伪元素的注意事项

      1. 伪元素只能给双标签添加，不能给单标签添加
      2. 伪元素的冒号前不能有空格，如E ::before这个写方法是错误的
      3. 伪元素里面必须写上属性content:""
      4. before和after创建一个元素，但是属于行内元素 注：如何判断一个元素是行内元素还是块级元素？答：加背景颜色查看一下就知道了！
      5. 因为在js的DOM里面看不见刚才创建的元素，所以我们称为伪元素

  5. 属性选择器

    • 含义：用来选择包含指定属性的标签
      选择器简介
      E[att]选择具有att属性的E元素
      E[att="val"]选择具有att属性且属性值等于val的E元素
      E[att^="val"]选择具有att属性且属性值以val开头的E元素
      E[att$="val"]选择具有att属性且属性值以val结尾的E元素
      E[att*="val"]匹配具有att属性且属性值中包含val的E元素
  • 选择器权重
    • 基础选择器：id选择器 > 类选择器 > 标签选择器 > *
    • 伪类选择器、属性选择器的权重等于类选择器
    • 伪元素选择器的权重等于标签选择器 注：高级选择器的权重计算：id个数、类选择器个数、 标签选择器个数

css3盒模型

  • css3边框圆角属性

    • 属性名: border-radius

    • 属性值：像素值或者百分比，百分比参考的是盒子整体宽度、高度的百分比

      属性值说明
      x-radius/y-radius前面是水平半径，后面为垂直半径，得到的是椭圆角
      radius一个属性值，则水平和垂直都设置为同一个值，得到的是圆角

    • 单一属性(注：先写垂直方向再写水平方向)

      • border-top-left-radius:半径;
      • border-top-right-radius:半径;
      • border-bottom-left-radius:半径;
      • border-bottom-right-radius:半径;

    • 简写方法

      • border-radius 类似于padding也可以有四种值的写法。
      • 左上角 右上角 右下角 左下角
      • 左上角 右上角和左下角 右下角
      • 左上角和右下角 右上角和左下角
      • 四个角相同

    • /的属性值写法 border-radius属性值中出现了/斜线，那么/前面可以设置水平方向四种值的写法，/后面可以设置垂直方向四种值的写法。 实例： 水平方向：三值法；垂直方向：两值法

    • 浏览器兼容 IE8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

    • 实际应用

      1. 正圆：border-radius设置为宽高的一半，宽与高相等
        div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 70px;
  }

  • css3文字阴影

    • 作用：text-shadow可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离以及阴影的颜色。

      属性值简介
      h-shadow必需。水平阴影的位置，允许负值。
      v-shadow必需。垂直阴影的位置，允许负值。
      blur可选。模糊的距离
      color可选。阴影的颜色

    • 文字阴影语法

        h1 {
    text-shadow: 4px 4px 5px #ccc;
  }

    • 多层阴影

      • 作用：可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 注：多阴影中，先写的阴影压盖在后写的阴影上。

  • css3盒子阴影

    • 作用：box-shadow属性用于对盒子边框添加阴影。

      属性值简介
      h-shadow必需。水平阴影的位置。允许负值
      v-shadow必需。垂直阴影的位置，允许负值
      blur可选。模糊距离
      spread可选。阴影的尺寸
      color可选。阴影的颜色
      inset可选。将外部阴影改为内部阴影

    • 多层阴影

      • 可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。注意：多阴影中，先写的阴影压盖在后写的阴影上。

  • 总结

    • 不论是文字阴影还是盒子阴影，属性值中的负值与正值都需要遵循x、y轴的坐标

  • css3过渡属性

    • 属性名：transition

    • 作用：在不使用Flash或者JavaScript的情况下，使用transition可以实现补间动画(过渡效果)，并且当前元素只要有“属性”发生变化时即存在两种状态(用A和B代替)，那么A和B之间就可以实现平滑的过渡动画效果。

    • 语法格式

        transition: 过渡的属性 过渡时间 运动曲线 延时时间;

    • 单一属性写法

      属性描述
      transition简写属性
      transition-property规定应用过渡的CSS属性的名称
      transition-duration定义过渡效果花费的时间。默认是0
      transition-timing-function规定过渡效果的时间曲线。默认是"ease"
      transition-delay规定过渡效果何时开始。默认是0

      1. transition-property过渡的属性

        • none表示没有属性过渡
        • all表示所有变化的属性都过渡
        • 属性名使用具体的属性名，多个属性名中间逗号分隔

      2. 时间

        • 必需以s为单位，0s也必须加单位。

      3. tansition-timing-function 时间曲线

        值描述
        linear规定以相同速度开始至结束的过渡效果。
        ease慢速开始，然后变快，最后慢速结束
        ease-in慢速开始
        ease-out慢速结束
        ease-in-out慢速开始和结束
        cubic-bezier(x1,y1,x2,y2)在函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标。

      4. 贝塞尔曲线

    • 浏览器兼容

      • IE10、Firefox、Chrome以及Opera支持transition属性
      • Safari需要前缀-webkit-
      • 注意：IE9以及更早的版本不支持和transition属性

2D转换

  • 理解什么是2D转换

    • 属性名：transform
    • 作用：对元素进行移动、缩放、旋转、拉长或拉伸。 配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash实现的效果。

  • 位移translate()

    • 书写语法 | 值 | 说明 | | translate(x) | 只有一个数值，表示水平方向的位移 | translate(x,y) | x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负

  • 缩放scale()

    • 书写语法：
      值说明
      scale(x,y)x,y分别为改变元素的宽度和高度的倍数
      scale(n)只有一个值，表示宽度和高度同时缩放n倍
      scaleX(n)改变元素的宽度
      scaleY(n)改变元素的高度

  • 旋转rotate()：找中心点进行旋转

    • 书写语法：rotate(数字deg)
    • deg为度数单位，正数表示顺时针选转，负数表示逆时针旋转。2D旋转只有一个属性值。
    • 注意：元素旋转后，坐标轴也跟着发生转变。因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异。
    • 实例：先设置旋转还是先设置位移是有区别的 css .box img { <!-- 先旋转后位移 --> <!-- 此时: 先旋转后，x轴变成斜向右下方的，因此位移的时候，也要往右下方走，而不是正右方。 --> transform: rotate(30deg) translate(50px); }

  • 倾斜skew()

    • 书写语法：transform: skew(数字deg,数字deg);
    • 两个属性值分别表示水平和垂直方向的倾斜角度。属性值可以为正可以为负，第二个数值不写默认0

  • 总结

    • 角度正负：顺时针、逆时针
    • px值正负：x、y 轴

  • transform-origin(基准点)属性

    • 类似于background-position

    • 作用：调整元素的水平和垂直方向原点的位置

    • 属性值：两个，中间用空格分隔

      属性值说明
      x定义x轴的原点在何处。可能的值:left、center、right、像素值、百分比
      y定义y轴的原点在何处。可能的值:top、center、bottom、像素值、百分比

    • 实例：改变基准点

3D转换

  • transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x、y轴组成的平面效果多了一条z轴，如下图所示

  • 透视

    • 含义：透视可以将一个2D平面，在转换的过程当中，呈现3D效果
    • 特点：近大远小
    • 透视属性perspective
      1. 作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果。
      2. 属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
      3. 注意：透视属性需要设置给3D变化元素的父级

  • 3D旋转

    • 需要分别对三个方向的旋转角度值

      属性值说明
      rotateX(angle)定义沿着X轴的3D旋转
      rotateY(angle)定义沿着Y轴的3D旋转
      rotateZ(angle)定义沿着Z轴的3D旋转

    • 注意：属性值的角度区分正负。

      1. 正数表示沿对应坐标轴顺时针方向旋转
      2. 负数表示沿对应坐标轴逆时针方向旋转

  • 3D位移

    • 属性值
      值说明
      translateX(x)设置X轴的位移
      translateY(y)设置y轴的位移
      translateZ(z)定义3D位移，设置Z轴的位移值
    • 属性值为像素值或百分比，正负表示位移的方向。
      1. 正值向对应轴的正方向移动
      2. 负值向对应轴的负方向移动

  • 3D正方体案例

  • transform-style属性

    • 作用：设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
    • 属性值： flat: 所有子元素在2D平面呈现 preserve-3d: 保留3D空间

  • 浏览器兼容

    • IE10、Firefox以及Opera支持transform属性
    • Chrome和Safari需要前缀-webkit-
    • IE9需要前缀-ms-

动画

  • 作用：css3中提供了自己的动画制作方法，这可以在与多页面中取代动画图片、Flash动画以及JavaScript.

  • css3的动画制作分为两步：创建动画、绑定动画

    • 创建动画
      • @keyframes规则：能创建从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
        1. 规则：需要使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是的动画开始，100%是动画的完成。
        2. 书写方法
          @keyframes 动画名称 {
    动画过程，可以添加任意百分比的动画细节
  }
    • 绑定动画

      • animation属性：将@keyframes中创建的动画绑定到某个选择器，否则不会产生动画效果

        1. 语法
          <!-- 其中必须设置 动画名称 和 过渡时间，其他的属性可以根据需求设置 -->
  div {
    animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
  }
        1. 单一属性列表
          属性描述
          animation-name动画名称
          animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是0
          animation-timing-function规定动画的速度曲线，默认是ease
          animation-delay规定动画何时开始，默认是0
          animation-iteration-count规定动画被播放的次数，默认是1.infinite表示无限次播放

  • 浏览器兼容

    1. IE10、Firefox以及Opera支持@keyframes规则和animation属性
    2. Chrome和Safari需要前缀-webkit-
    3. IE9以及更早的版本，不支持@keyframes规则或animation属性。
avatar
文章
阅读
粉丝