美文网首页h5
a标签伪类选择器和过度模块

a标签伪类选择器和过度模块

作者: 白的吓人 | 来源:发表于2017-01-09 20:24 被阅读0次

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、再回过头去给被修改属性的哪个元素添加过渡即可。

谁更具体 谁的优先级更高

相关文章

  • a标签伪类选择器和过度模块

    1.有状态 修改a标签不同状态的样式 a:link{} 修改从未被访问过状态下的样式 a:visited{} 修改...

  • CSS3--过渡

    a标签的伪类选择器 什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的 格式::li...

  • 过度模块

    a标签的伪类选择器 作用: a标签的伪类选择器是专门用来修改a标签不同状态的样式的 a标签的状态: 默认状态, 从...

  • css3新特性-新增选择器

    类选择器,属性选择器,伪类选择器权重为10 伪元素选择器,标签选择器权重为1 1.属性选择器 2.结构伪类选择器 ...

  • 常用标签和css

    input标签 下拉和多行文本域 div标签 认识CSS CSS选择器 伪类选择器 homework

  • HTML和CSS

    表单标签 表单标签(下拉菜单和多行文本域) 空白标签 认识css css选择器 伪类选择器

  • css选择器和文本标签

    1、css选择器 标签选择器 id选择器 类选择器 层级选择器 组选择器 伪类选择器 文本标签 em标签用于表示一...

  • HTML常用标签和CSS

    表单标签 下拉菜单和多行文本域 空白标签 认识CSS CSS选择器 伪类选择器

  • css选择器、伪元素

    关于伪类选择器 a标签的伪类选择器顺序:a:link->a:visited(点击后的样式)->a:hover(鼠标...

  • a标签伪类选择器

    1.什么是a标签的伪类选择器? a标签的伪类选择器是专门用来修改a标签不同状态的样式的 2.格式 :link 修改...

网友评论

    本文标题:a标签伪类选择器和过度模块

    本文链接:https://www.haomeiwen.com/subject/swvhbttx.html