a标签的伪类选择器
作用:
a标签的伪类选择器是专门用来修改a标签不同状态的样式的
a标签的状态:
默认状态, 从未被访问过
被访问过的状态
鼠标长按状态
鼠标悬停在a标签上状态
格式:
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
-
例子:
<a href="#">taobao</a>
<a href="#">jd</a>a:link{ color: green; } a:visited{ color: green; } a:hover{ color: orange; } a:active{ color: pink; }
注意:
a标签的伪类选择器可以单独出现也可以一起出现
a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
编写的顺序必须遵守爱恨原则 love hate:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上
如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写
<a href="#">taobao</a>
<a href="#">jd</a>
a{
color: green;
}
a:hover{
color: orange;
}
a:active{
color: pink;
}在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
在企业开发中和a标签文字/背景相关的都写在伪类选择器中
过渡模块
作用:为某个属性做过渡动画的
格式:
transition-property 告诉系统哪个属性需要执行过渡效果
transition-duration 告诉系统过渡效果持续的时长
transition-delay 告诉系统延迟多少秒之后才开始过渡动画
-
transition-timing-function 告诉系统过渡动画的运动的速度
- 取值:
linear 匀速
ease 逐渐慢
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
- 取值:
-
例子:
<div></div>div{ width: 100px; height: 50px; background-color: red; transition-property: background-color; transition-duration: 5s; } div:hover{ background-color: blue; }
过渡三要素:
1.必须要有属性发生变化(上述背景颜色属性变成了蓝色)
2.必须告诉系统哪个属性需要执行过渡效果(背景颜色属性要执行transition-property: background-color;)
3.必须告诉系统过渡效果持续时长(transition-duration: 5s;)
注意:
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;过渡连写格式:
transition: 过渡属性(property) 过渡时长(duration) 运动速度(timing-function) 延迟时间(delay);
过渡连写注意点:
和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为transition:all 0s;
编写过渡套路:
不要管过渡, 先编写基本界面
修改我们认为需要修改的属性
再回过头去给被修改属性的那个元素添加过渡即可