>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25839 个阅读者 刷新本主题
 * 贴子主题:  CSS 链接(link) 的样式 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-10 21:44:32     消息  查看  搜索  好友  邮件  复制  引用

  

CSS  链接的样式

   不同的链接可以有不同的样式。                    

链接样式

     链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。

     特别的链接,可以有不同的样式,这取决于他们是什么状态。

    这四个链接状态是:    
  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

范例

a :link   { color: #000000  ; }        /*  未访问链接 */
a :visited   { color: #00FF00  ; }    /*  已访问链接  */
a :hover   { color: #FF00FF  ; }    /*  鼠标移动到链接上  */
a :active   { color: #0000FF  ; }    /*  鼠标点击时  */

             当设置为若干链路状态的样式,也有一些顺序规则:    
  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

常见的链接样式

     根据上述链接的颜色变化的例子,看它是在什么状态。

     让我们通过一些其他常见的方式转到链接样式:    

文本修饰

     text-decoration 属性主要用于删除链接中的下划线:                    

范例

a :link   { text-decoration: none  ; }
a :visited   { text-decoration: none  ; }
a :hover   { text-decoration: underline  ; }
a :active   { text-decoration: underline  ; }

背景颜色

     背景颜色属性指定链接背景色:                    

范例

a :link   { background-color: #B2FF99  ; }
a :visited   { background-color: #FFFF85  ; }
a :hover   { background-color: #FF704D  ; }
a :active   { background-color: #FF704D  ; }

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-03-07 12:46:22 重新编辑]
  Java面向对象编程-->图形用户界面(下)
  JavaWeb开发-->Web运作原理(Ⅰ)
  JSP与Hibernate开发-->JPA API的高级用法
  Java网络编程-->安全网络通信
  精通Spring-->Vue组件开发基础
  Vue3开发-->组合(Composition)API
  07、手把手教Vue--路由「Vue-router」 - TigerChain
  Vue3.0 ref、reactive、toRef、toRefs、customRef的区别
  Node.js操纵Mongodb数据据
  20分钟带你掌握JavaScript Promise和 Async/Await
  加快 Vue 项目的开发速度
  JS 循环删除数组
  前端图片压缩库images-quickly-compress
  jQuery 遍历过滤:缩小搜索元素的范围
  jQuery 遍历DOM 树中的同胞元素
  JavaScript Date 对象
  CSS3 文本效果
  HTML5 语义元素
  HTML5 内联 SVG
  JavaScript prototype(原型对象)
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。