CSS3 基础知识

最新推荐文章于 2022-12-31 20:18:24 发布

pop1mple

最新推荐文章于 2022-12-31 20:18:24 发布

阅读量276

点赞数 1

分类专栏：前端基础知识文章标签： css3 css

本文链接：https://blog.csdn.net/qq_36392801/article/details/118719961

版权

前端基础知识专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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 属性

pop1mple

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 基础知识

CSS3CSS3 新增选择器子级选择器兄弟选择器结构伪类选择器伪元素选择器属性选择器子级选择器作用：用于选取具有父子关系，父元素的子元素语法：.box>p { color: red}如果不是父子级关系，是祖父级或者其他，都不会生效兄弟选择器相邻兄弟选择器其他兄弟选择器相邻兄弟选择器书写：element1 + element2 { color: red}选择 element1 标签后紧邻的第一个 element2 标签,若是俩者之间有其他元素存在就不会生效
复制链接

扫一扫