WonderCSS

与 tab 按键相关的代码集合

在网页浏览的过程中,点击键盘中的 Tab 按键会依据页面中的热点(如锚链接)移动。比如网页里有10个链接,依次单击 tab 键会循着代码的先后按顺序逐一移动,到最后一个链接后会循环到第一个链接。在网页代码的编写中,我们可以通过代码的编写来让这一用户体验变得更好。

利用 tabindex 指定 tab 键的顺序

对于用户单击Tab键这一行为,我们可以为他做出更好的选择,更合理的选择。因为有时候复杂的页面中,锚链接会极其混乱众多,这时候作为网页设计者就要考虑到哪些重要,放到前面。哪些不重要的链接,放到后面。HTML 5 新推出的全局属性 tabindex (规定元素的 tab 键控制次序)为我们解决了这一问题。

如下面的代码,在正常的情况下连续按动 tab 键顺序是 “WonderCSS > 关于 > 下载” 但由于设置了 tabindex 顺序后,再连按 tab 键顺序是 “关于 > 下载 > WonderCSS” 。需要注意的是 “1” 是 tab 键控制顺序的起始。


<nav>
     <a href="/" tabindex="3">Wonder CSS</a>
     <a href="/about/" tabindex="1">关于</a>
     <a href="/download/" tabindex="2">下载</a>
</nav>

利用 outline 更改 tab 激活状态的样式

在样式表中与 tab 相关 的标签是 outline (轮廓),是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。在应用上与 border 相似,可以逐一设置 “color style width” 三个效果,也可以连在一起使用,如:outline:#00FF00 dotted thick;

outline-style 参考属性值

描述
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

outline-width 参考属性值

描述
thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。

应用如下:


a:focus {
     outline:#fc0 thin dotted;
}

By 于湛 发布于 2013.03.18 2,981 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注