outline属性有什么作用

原文链接 a{outline:none} do not do it

当用户使用tab键进行链接切换时,该属性会在当前选中的链接(获得焦点)使用该属性,一般来说是虚线框

的长方形。这对于没有使用鼠标输入的用户而言尤其有用,它可以作为视觉反馈来告知用户当前的输入。所以说

如果设置outline属性为none,则对这些人来说将会是很差的用户体验。

给链接元素设置获得焦点属性是非常有必要的,对任何使用键盘来操作用户界面的模式,焦点指示器需可见。

为什么有些开发者喜欢删除该属性

主要是由于涉及的虚荣心,或者是完全忘记了上述提到的这一点。

开发者常用的css reset往往将outline属性删除,Eric Meyers的css reset也是如此。但是Eric也说了,开发者

需要额外定义焦点样式。

/* remember to define focus styles! */
:focus {
outline:;
}

我们要记住注释的部分,一定要重新定义“焦点样式”。

如果要删除该属性,需要设置替换属性

尽量不要删除outline属性,但是也有一些其他方法来设置键盘获取焦点链接样式:

  • 设置背景颜色。如:#test1 a:focus { background: #FFFF00; }
  • 设置字体样式。 如: #test2 a:focus { color: #FF6600; }
  • 设置outline属性。 如:#test3 a:focus { outline: #FF0000 dotted medium; }
  • 设置高亮属性。 如:#test4 a:focus { color: #FFFFFF; background: #FF0000; }

不要给<a>设置outline:none的更多相关文章

  1. Zend Studio 12.0.2正式版发布和破解方法,zend studio 12.0.1汉化,相式设置为Dreamweaver,空格缩进为4个, 代码默认不折叠的设置,Outline中使用的图形标志,代码颜色之eot设置。

    背景:zend studio 12.0.2 修复了一个12.0.1的:  Fixed problem with referenced variables marked as undefined,我都说 ...

  2. css去掉a标签点击后的虚线框,outline,this.blur()

    css去掉a标签点击后的虚线框,outline,this.blur() outline是css3的一个属性,用的很少.声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outl ...

  3. outline的兼容性及使用限制

    outline 和 border的区别: outline不占据文档空间,border占据文档空间. outline无法单独设置上下左右,只要设置outline,必须所有的边都设置:border可以设置 ...

  4. Android Studio 一些方便使用的设置

    相信非常多使用Eclipse的朋友,開始用Android Studio都是认为不是特别方便, a:比方怎样使鼠标放到方法上面,就有提示用法; b:怎样设置字体大小,和背景色; c:还有怎么查看Outl ...

  5. 一次 outline 去除经验(非继承属性,看着像继承)

    情况描述: 目前维护的老项目是通过 easyui 生成的 html,嵌套结构非常多,当点击元素后,会有个边框???非常影响页面美观,这是啥迷惑点击交互??? 经验告诉我,这是 css 的 outlin ...

  6. 1366分辨率其实是1368分辨率,firefox a标签点击有虚线

    1,通过intel 集成显卡的软件自定义一个1366分辨率,发现是1368的分辨率,@media screen and (max-deivce-width:1368px)才有效果,并且在同事电脑默认分 ...

  7. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  8. css div要点汇总

    1.子元素选择两种 h1 strong{color:red}意思是所有后代只要是strong就变成红色 h1>strong{color:red}效果同上但只对第一代后代元素有效 相邻兄弟元素 h ...

  9. 14.allegro.PCB设计前工作[原创]

    一.设置板子大小 -- ----- 板子边框 2种设置outline方法,创建2个KI,两个keepin,,r:允许布线区:p允许摆放元件的区域 法一:直接添加线 ①Board Geometry(最外 ...

随机推荐

  1. setView的AlertDialog在受到二次点击后出错

    错误报告: 10-21 13:11:16.009: E/AndroidRuntime(27937): FATAL EXCEPTION: main10-21 13:11:16.009: E/Androi ...

  2. Python之路【第二篇】python基础 之基本数据类型

    运算符 1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算: name = "yehaoran " # in 判断ye是否在name里面 在的话返回ok ...

  3. Untiy3D开发小贴士 OnEnabled与OnDisabled

    设某个组件为NewBehaviour OnEnabled被调用的情况: 1.GameObject添加组件的时候,即AddComponet<NewBehaviour> : 2.包含3.已添加 ...

  4. Apache服务器在80端口配置多域名虚拟主机的方法

    我们在配置一台服务器的时候,如果只运行一个站点,往往过于浪费资源.Nginx和Apache都可以通过配置虚拟主机实现多站点.配置虚拟主机的方式主要有两种,一种是多个不同端口对应的多个虚拟主机站点,一种 ...

  5. 华为oj 挑7

    #include<iostream> using namespace std; bool ishave_7(int n); int main(){ int num,k=0; cin> ...

  6. 并联机构逆运动学用MapleSim符号来解决

    在多体机械中,平台的运动学分析(运动学问题)可以分为两类:正向运动学问题和逆向运动学问题.所谓正向运动学是指研究机构中一点(例如,机械手臂上终端操作机构或由并联机械操纵器支持的平台的中心)在空间中的位 ...

  7. iOS 开发快速导引:TableView 和 CoreData【草】

    所有列表式的数据都是用 TableView 显示的 预览 待补充 原料 NSFetchedResultsController 用来操作 NSFetchRequst,有执行查询,监听变化,数据缓存等功能 ...

  8. Python黑帽编程2.2 数值类型

    Python黑帽编程2.2  数值类型 数值类型,说白了就是处理各种各样的数字,Python中的数值类型包括整型.长整型.布尔.双精度浮点.十进制浮点和复数,这些类型在很多方面与传统的C类型有很大的区 ...

  9. IIS发布站点错误收集(持续更新)

    本文主要收集IIS在发布站点过程中遇到的错误,并提供解决办法.并亲测可行.如果您也在使用IIS发布站点的过程中遇到了一些问题,欢迎留言提问. (1.) HTTP错误500.21-Internal Se ...

  10. 当MyEclipse突然异常关闭

    今天的博文主要记录一个问题,就是当MyEclipse异常关闭后,再次开启环境,导致Tomcat无法启动的问题解决方案 问题描述:在MyEclipse启动或者是tomcat启动的时候出现:Address ...