天天看点
返回

CSS3 基础知识CSS3

CSS3

CSS3 新增选择器

  • 子级选择器
  • 兄弟选择器
  • 结构伪类选择器
  • 伪元素选择器
  • 属性选择器

子级选择器

作用：用于选取具有父子关系，父元素的子元素

语法：

.box>p { color: red}

如果不是父子级关系，是祖父级或者其他，都不会生效

兄弟选择器

  • 相邻兄弟选择器
  • 其他兄弟选择器

相邻兄弟选择器

  • 书写：

    element1 + element2 { color: red}
    • 选择 element1 标签后紧邻的第一个 element2 标签,若是俩者之间有其他元素存在就不会生效
  • 可以选择一个同级元素之后的紧邻元素
  • 俩者要有相同父元素
  • 多种情况
    • 当我们书写一个

      p + p { color: red}

       
    <div class="box1">
  <h2>二级标题</h2>
  <p>段落0</p>
  <div>内容</div>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <p>段落4</p>
</div>
    段落2，3，4都会被选中，所以紧邻在某些情况下会选择多个满足条件的标签

其他兄弟选择器

书写：

element1 ~ element2 { color: red}

作用：选择同一个父元素中 在 element1 后所有 element2

  • 不再限制被紧邻

结构伪类选择器

  • E:first-child
    • 匹配父元素结构中第一个子元素
  • E:last-child
    • 匹配父元素结构中最后一个子元素
  • E:nth-child(n)
    • 匹配父元素结构中第n个子元素
  • E:first-of-type
    • 匹配父元素结构中同类型的第一个子元素
  • E:last-of-type
    • 匹配父元素结构中同类型的最后一个子元素
  • E:nth-of-type(n)
    • 匹配父元素结构中同类型第n个子元素

E:first-child

写法：

.box1 :first-child { color: red}

.box1 p:first-child { color: red}

加了 p 标签，若是 box1 第一个元素不是 p 标签就不会生效

E:last-child

写法：

.box1 :last-child { color: red}

.box1 p:last-child { color: red}

加了 p 标签，若是 box1 最后一个元素不是 p 标签就不会生效

E:nth-child(n)

写法：

.box1 p:nth-child(4)

选中 box1 结构中第四个标签，若这个标签是 p 标签就会生效 否则不生效 也可以不要 p

.box1 :nth-child(4)

选中 box1 结构中第四个标签

属性值

  • 数字
    • n 就是数字 写第几个就选第几个
  • 关键子
    • even 偶数
    • odd 奇数
  • 公式( n 从 0 开始,间距 1 递增)
    • 2n 偶数
    • 2n+1 奇数

    • -n + 5 前5个

      等等

  • 0 元素 或超出了元素个数就会忽略

E:first-of-type

写法：

.box1 h2:first-of-type

作用：选取 box1 中 标签为 h2 的第一个子元素

E:last-of-type

写法：

.box1 h2:first-of-type

作用：选取 box1 中 标签为 h2 的最后一个子元素

E:nth-of-type(n)

写法：

.box1 p:nth-of-type(4)

左右：选取 box1 中 标签为 p 的第四个子元素

与 E:nth-child(n) 区别 : nth-of-type 是现根据子元素标签类型分组，再排序。而 nth-child(n) 是不区分子元素类型直接按结构顺序排序

属性值

  • 数字
    • n 就是数字 写第几个就选第几个
  • 关键子
    • even 偶数
    • odd 奇数
  • 公式( n 从 0 开始,间距 1 递增)
    • 2n 偶数
    • 2n+1 奇数

    • -n + 5 前5个

      等等

  • 0 元素 或超出了元素个数就会忽略

伪元素选择器

  • E::before
    • 在 E 元素内部的第一行前面插入一个元素

    • div::before {content: "1";display: block;height: 50px;background-color: skyblue}
  • E::after
    • 在 E 元素内部的第后一行后面面插入一个元素

    • div::after {content: "1";display: block;height: 50px;background-color: skyblue}
  • E::first-letter
    • 选择 E 容器中的第一个字母（文字）

    • div::first-letter {color: red}
  • E::first-line
    • 选择 E 容器中的第一行文本

    • div::first-line {color: red}

注意：

  • 伪元素只能给双标签的元素添加
  • 书写时元素与伪类选择器之间不能有空格

    E ::before

     错
  • 伪元素必须加内容 content
  • before 和 after 创建的伪元素属于行内元素
  • DOM 里看不见这样创建的元素，故称为伪元素
  • div::before 和 div:before 都是可以的双冒号是H5的语法规范

属性选择器

  • 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 元素 
input[name] {
  width: 30px;
  height: 30px;
}
input[type="radio"] {
  width: 30px;
  height: 30px;
}
input[class^="icon"] {
  width: 30px;
  height: 30px;
}
input[class$="dan"] {
  width: 30px;
  height: 30px;
}
input[type*="o"] {
  width: 30px;
  height: 30px;
}
...
<input type="radio" name="sex" class="icon-dan"> 男性

新增选择器的权重变化

伪类选择器，属性选择器的权重等于类选择器。

伪元素选择器的权重等于标签选择器。

CSS3 盒模型

CSS3 中可以通过 box-sizing 来这指定盒模型

属性值分别是

  • content-box (Standard 模式)
    • 内容区域(width + height)固定,设置 padding 和 border 后扩展整个盒子的实际大小，内容区域大小不变
  • border-box (Quirks 模式)
    • 实体化区域不变(width + height + padding + border)固定, 设置 padding 和 border 后整个盒子的实体化区域大小不变，内容区域缩减

我们盒模型一般默认是 content-box

CSS3 新增属性

  • border-radius 边框圆角
  • text-shadow 文字阴影
  • box-shadow 盒子阴影

边框圆角 border-radius

作用：设置边框圆角

属性值：可以是像素或百分比，百分比参考盒子整体宽度，高度百分比。

  • x-radius / y-radius 水平方向和垂直方向
  • radius 整体

当盒子是一个正方形时，若是想整个圆形就设置 radius 为宽高的 50%。

单一属性：以盒子的顶点方向来划分

  • border-top-left-radius: 值
  • border-top-right-radius:
  • border-bottom-left-radius:
  • border-bottom-right-radius:

注意 ：top 跟 left 不能互换位置来写，违反语法规定

简写：

  • 四值法 按顺时针方向来写
    • 左上，右上，右下，左下
  • 三值法
    • 左上，右上和左下，右下
  • 二值
    • 左上和右下，右上和左下
  • 一值
    • 四值相同

特殊的 /

border-radius: x / y

x 也可用四值法或其它几值写法单独写

y 同理

x 与 y 分开计算互不影响。

例：

border-radius: 10px 20px 30px / 40px 50px

兼容问题：ie8 和它以下不支持 border-radius属性

文字阴影 text-shadow

作用：可以给文本设置阴影

属性值

  • h-shadow
    • 水平阴影的位置，必填，可为负值
  • v-shadow
    • 垂直阴影的位置，必填，可为负值
  • blur
    • 模糊距离 选填
  • color
    • 阴影颜色 选填

写法：水平值 + 垂直值 + 模糊值 + 颜色

text-shadow: 2px 2px 2px red;

多层阴影用逗号隔开连续书写

text-shadow: 2px 2px 2px red,3px 3px 3px blue;

盒子阴影 box-shadow

作用: 给盒子边框添加阴影

属性值：

  • h-shadow
    • 水平阴影的位置，必填，可为负值
  • v-shadow
    • 垂直阴影的位置，必填，可为负值
  • blur
    • 模糊距离 选填
  • spred
    • 阴影尺寸 选填
  • color
    • 阴影颜色 选填
  • inset
    • 将默认值外部阴影改为内部阴影

书写顺序

水平值 + 垂直值 + 模糊值 + 尺寸 + 颜色 + 是否设为内部阴影

box-shadow: 3px 3px 2px 1px yellow inset;

多层阴影写法跟文字阴影一样，用逗号隔开

box-shadow: 3px 3px 2px 1px yellow inset,5px 5px 3px 1px blue inset;

注意 ： 外部阴影为默认值，不需要设置啥；先写阴影压盖后写的

CSS3 过度属性 transition

作用：当元素有条属性发生变化时，例如宽度，我们使用 transition 就可以实现平滑的过度效果

属性值：

  • 监测的属性
    • 就是元素里某个属性值会发生变化
  • 过度时间
    • 从状态开始变化到结束的时间
  • 运动曲线
    • 变化过程中快慢速度
  • 延时时间
    • 延迟多久再让属性的发生变化

书写顺序

transition: 属性 过度时间 过度曲线 延时时间;

transition: all 2s ease 0s; ``transition: all 2s cubic-bezier(0.29, 0.3, 0.25, 1) 0s;

单一属性写法

  • transition-property
    • 过渡的 CSS 属性名称
    • none 表示没有
    • all 表示所有变化属性都过渡
    • 多个过渡属性名中间用逗号隔开
  • transition-duration
    • 过渡花费的时间 默认 0
    • 秒 s 为单位
  • transition-timing-function
    • 过渡效果的时间曲线 默认"ease"
    • linear 从开始到结束都是相同时间
    • ease 开始到结束：慢-快-慢
    • ease-in 开始到结束：慢-快
    • ease-out 开始到结束：快-慢
    • ease-in-out 开始到结束：慢-快-慢
    • cubic-bezier(x1,y1,x2,y2) 自己定义开始到结束的快慢 参考谷歌浏览器控制中的调试效果 又名：贝塞尔曲线
  • transition-delay
    • 过渡效果多久后开始 默认是0
    • 秒 s 为单位

兼容问题

IE9及以下不支持 transition 属性

苹果浏览器 Safari 需要前缀 -webkit-

-webkit-transition: all 2s ease 0s;

Chrome Firfox Opera 都支持

2D转换 transform

作用:对元素进行移动、缩放、转动、拉伸或拉长

属性值：很多

  • translate() 移动
    • translate(x,y) x,y 分别为水平方向和垂直方向移动距离，可以是 px 和百分比
    • translate(x) 只有一个数值,表示水平方向位移
  • scale() 缩放
    • scale(x,y) x,y 分别是元素宽度和高度缩放的倍数
    • scale(n) 元素宽度和高度等比例缩放 n 倍
    • scaleX(n) 缩放元素宽度
    • scaleY(n) 缩放元素高度
  • rotate() 旋转
    • rotate(数字+deg)
    • 正数顺时针旋转，负数逆时针
    • 注意： 元素旋转后，坐标轴也发生了旋转。所以移动和旋转的先后顺序不同，最后元素所在的位置是完全不同的
  • skew() 倾斜
    • skew(数字+deg,数字+deg) 俩个值分别表示水平和垂直方向的倾斜，值可以正，可以负，第二个值不写默认0

设置基准点 transform-origin

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

属性值：

  • x
    • 定义 X 轴的原点在何处。left、center、right、像素值、百分比
  • y
    • 定义 Y 轴的原点在何处。top、center、bottom、像素值、百分比

例：

transform-origin: left top;

3D 转换-透视 perspective

要想看 3D 效果必须设置一个透视属性 perspective

  • perspective
    • 作用：设置在 Z 轴方向上的观察位置，实现 3D 查看效果
    • 属性值：px 值越大，观察点距离 Z 轴原点越远，效果越好
    • 注意：透视属性需要设置给 3D 变化元素的父级

3D 转换-旋转

属性名：transform

属性值：

  • rotateX(数字+ deg) 沿 3D X轴方向旋转
  • rotateY(数字+ deg) 沿 3D Y轴方向旋转
  • rotateZ(数字+ deg) 沿 3D Z轴方向旋转

正数顺势针旋转，负数逆时针

3D 转换-位移

属性名：transform

属性值：为像素或是百分比，正值向正方向移动，负值向负方向移动

  • translateX(x) 设置X轴位移值
  • translateY(y) 设置Y轴位移值
  • translateZ(z) 设置Z轴位移值

注意：同 2D 一样旋转或移动的先后顺序，会改变原点，最后得到的图形并不一致

transform-style 属性

作用：用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素保留自己的 3D 转换坐标轴。

属性值：

  • flat :所有元素在 2D 平面呈现
  • preserve-3d ：保留 3D 空间

兼容问题

IE10，Firefox，Opera 支持 transform 属性

Chrome 和 Safari 需要前缀 -webkit-

IE9 需要前缀 -ms-

动画

1.创建动画

2.绑定动画

  • @keyframes 规则
    • 作用： @keyframes 用于创建动画，让元素由一种样式变成另一种，不限样式不限次数
    • 用百分比或 from 和 to 来表示开始到结束。from 等价于 0%，to 等价于 100%
    • 书写方法： 
    @keyframs 动画名称 {
  from {
    /* 开始样式最好和原始样式一致，避免动画不连贯 */
    样式1 
  }
  to {
    样式2
  }
}
@keyframs 动画名称 {
  0% {
    样式1
  }
  25% {
    样式2 可以任意添加细节
  }
  40% {
    样式3
  }
  100% {
    样式4
  }
}
  • animation 属性
    • 作用：用于把动画绑定到对应元素上
    • 语法：其中必须设置动画名称和过度时间，其他不是必填 
    div {
  animation: 动画名称 过度时间 速度曲线 动画次数 延时时间
}
    • 单一属性
      • animation-name 动画名称
      • animation-duration 花费时间
      • animation-timing-function 动画速度曲线，默认"ease"
      • animation-delay 延时时间
      • animation-iteration-count 动画播放次数 默认1 infinite 表示循环播放

兼容问题

IE10，Firefox，以及Opera 支持 @keyframs 规则和 animation 属性

Chrome 和 Ssfari 需要前缀 -webkit-

IE9 及一下 不支持 @keyframs 规则和 animation 属性

前端基础知识 css3 css
上一篇: redhat6使用163 yum源
下一篇: css属性：hover 伪元素 :before :after

继续阅读