《精通CSS》对链接应用样式

CSS的链接伪类选择器:

  :link --- 用来选择没有被访问过的链接

  :visited --- 用来选择被访问过的链接

  :hover --- 用来选择鼠标悬停的元素

  :active --- 用来选择被激活的元素,对于链接来说,激活发生在链接被点击时

大多数人最初使用这些选择器的目的之一是去掉链接下面的下划线,然后在鼠标停留在链接上或者点击时再打开下划线。实现的方法是将未访问的和已访问的链接的text-decoration属性设置为none,将鼠标停留和激活的链接的text-decoration设置为underline:

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

在前面的实例中,选择器的次序非常重要,如果次序反过来,鼠标停留和激活的样式就不起作用了:

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

这是由层叠造成的:当两个规则具有相同的特殊性时,后定义的规则优先。所以正确的顺心应该是:a:link,a:visited,a:hover,a:active。

《精通CSS》对链接应用样式,布布扣,bubuko.com

时间: 2024-10-12 03:12:31

《精通CSS》对链接应用样式的相关文章

读《精通css》--第五章对链接应用样式

一. 基于层叠对链接选择器进行排序: L :link     V :visited    H :hover    F :focus    A a:active 锚链接选择器:L.V.只适用于锚点. 动态选择器:H.F.A.兼容性问题考虑. 选择器的次序之所以重要是由CSS的层叠引起的,当两个选择器具有相同的特殊性时,后定义的会覆盖前面的. 二. 创建应用了样式的链接下划线: 1.简单的:加粗.加下划线.自定义下划线的样式(变成虚线) 2.奇特的:添加背景图片. 三. 使用属性选择器对外部链接应用

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

《精通CSS高级web标准解决方案》——第一章、第二章(为样式找到应用目标)即选择器

2015-04-16 08:49:35 1.“多类症”:classitis.   “多div”:症. 第二章 为样式找到应用目标(选择器) 1.有效且结构良好的文档为你要应用的样式提供了一个框架. 2.选择器:1.类型选择器(即元素选择器) 2.后代选择器 3.类选择器 4.ID选择器 3.不要给这些元素指定不同的类,而应将一个类货ID应用于他们的祖先,然后使用后代选择器来定位他们. 4.有时我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态.这要使用伪类选择器来完成.

css学习之-对链接应用样式

1.简单的链接样式 对链接应用样式最容易的方式是使用锚类型选择器,但是锚类型选择器也不总是理想的,因为它既可以作为内部引用,又可以作为外部链接. 锚的伪类选择器,:link,:visited,:hover,:focus,:active 大多数人最初使用锚选择器做的第一件事是去掉链接的下划线,text-decoration:none,添加下划线,text-decoration:underline 2.简单的链接修饰 a.使用边框创建不太影响美观的下划线 b.使用图像创建链接下划线 3.为已访问链接

读《精通CSS:高级Web标准解决方案》

因为最近在看<精通CSS:高级Web标准解决方案>,做了一些记录. 因为很多开发人员对于XHTML2的开发不满,于是出现了WHATWG和W3C的分裂,WHATWG决定开发自己的规范,也就是HTML5,而W3C的XHTML2标准已被放弃,HTML5成为了W3C的正式标准.XHTML和HTML的区别就是XHTML严格遵守XML编码规定,浏览器会依据文档的MIME类型来解析文档,如果不遵循规范会导致错误,而HTML却是很宽松的. Doctype类型和浏览器模式,DTD(文档定义类型)是一组机器可读的

《精通CSS:高级Web标准解决方案》学习笔记01

对我来说,CSS算得上是一个很难的东西.因为它不像JavaScript那么有趣,对记忆的要求太高,而我对浏览器兼容性.各种CSS Hack真的一点都不感冒.琐碎的.非理论化的知识,真的很烦人呐~ 鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐碎的布局知识集合的话,那这本书只能说是更加琐碎了,因为这只是一本纯纯的经验分享.而且随着前端技术的快速发展,明显能

为链接应用样式

1 为目标链接应用样式 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>为链接目标设定样式</title> <style> <!--不是目标链接的div框的样式--> .comment{ margin-top: 20px; background-color:#d3ff99; bor

web的各种前端打印方法之CSS控制网页打印样式

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措.如果你也有这种现象,那么我告诉你吧,在W3school查到CSS的midia的作用. midia 定义和用法: media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. 原来用到media来指定css的媒体类型,它的