1.有状态
修改a标签不同状态的样式
a:link{} 修改从未被访问过状态下的样式
a:visited{} 修改被访问过状态下的样式
a:hover{} 修改鼠标悬停在a标签上状态下的样式
a:active{} 修改鼠标长按状态下的样式注意点:
1、a标签的伪类选择器可以单独出现也可以同时一起出现
2、a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写顺序必须要遵守爱恨原则 love hate
l(link)ov(visited)e h(hover)a(active)te
3、如果默认状态的样式和被访问过状态的样式一样,那么可以缩写 a:link{color:green;} a:visited{color:green;}
------>可简写为 a{color:green;}伪类选择器练习ul>(li>a)*5 快速创建按住tab键
1.在实际开发中编写a标签的伪类选择器最好写在标签选择器的后面
2.在实际开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
3.在实际开发中和a标签文字/背景相关的都写在伪类选择器中
过度模块
:hover这个还可以用在其他的任何标签上
transition-property:width; 告诉系统哪个属性需要执行过度效果
transition-duration:5s;告诉系统过度效果持续的时长
过渡三要素 1、必须要有属性发生变化
2、必须告诉系统哪个属性需要执行过渡效果
3、必须告诉系统过渡效果持续时长
注意点:当多个属性需要同时执行过渡效果时用逗号隔开即可
其它属性
transition-delay:2s;告诉系统延迟多少秒之后才开始过度动画
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out 告诉系统过渡动画的运动的速度
linear:匀速
ease:逐渐慢下来
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速
连写
transition:property(过渡属性) duration(过渡时长) timing-function(运动速度) delay(延迟时间);
连写注意点:
1、多个属性要过渡时用,隔开
transition:property duration timing-function delay,property duration timing-function delay;
2、连写的时候可以省略后面的2个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素。
3、如果多个属性运动的速度/延迟时间/持续时间都一样,那么可以简写为
transition:all 0s;
改变margin 水平方向的值可以实现弹簧效果
修改了谁的属性 就在谁里面添加过渡
编写过渡套路:1、不要管过渡,先编写基本的界面。
2、修改我们认为需要修改的属性。
3、再回过头去给被修改属性的哪个元素添加过渡即可。
谁更具体 谁的优先级更高
网友评论