CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是:
:link
:visited
:hover
:active
因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下:
a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。
示例:
a:link {
color:#FF0000;
text-decoration:underline;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:none;
}
a:active {
color:#FFFFFF;
text-decoration:none;
}
上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。
如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义:
a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active {
color:#000000;
text-decoration:none;
}
链接定义的顺序
没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。
定义局部链接样式
在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。
示例:
#sidebar a:link,
#sidebar a:visiteid {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color:#000000;
text-decoration:underline;
}
调用方法:
<div id="sidebar"><a href="aa.aspx" target="_blank">链接到aa页面<a></div>
class的定义方法和id相同,只要将#sidebar改为.sidebar就行了,还有一种方法是直接定义链接的样式,那样更直接,不过调用时比较麻烦,需要给每个特定的链接加上定义的代码。
示例:
a.redlink a:link,
a.redlink a:visiteid {
color:#FF0000;
text-decoration:none;
}
a.redlink a:hover,
a.redlink a:active {
color:#000000;
text-decoration:underline;
background:#FFFFFF;
}
调用方法:
<div><a href="bb.aspx" target="_blank" class="redlink" >链接bb页面<a></div>
分享到:
相关推荐
### JQuery控制A标签CSS样式的实现方法 在前端开发中,使用JQuery库来操作DOM元素的样式是一种常见的做法。本文将详细介绍如何利用JQuery控制动态`<a>`标签的CSS样式,包括鼠标悬停、点击等交互效果的实现。 #### ...
a标签样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括: 总: a 表示所有状态下的连接 如 .mycls a{color:red} ① a:link:...
a标签连接样式表 a标签样式 是页面变得随心所欲
但通过`TextView`的`setText`方法结合`Html.fromHtml()`函数,可以实现基本的HTML标签渲染,并且通过一些开源库或自定义处理方式,可以进一步扩展其功能,使其支持更多的CSS样式。 #### 二、基础知识 ##### 1. ...
设计a标签的CSS样式时,需要遵循这个顺序,以确保样式被正确应用。 1. a:link状态表示一个未被用户访问过的链接,它代表了a标签的默认状态。在这个状态下,我们通常会定义链接的正常外观,包括字体大小、颜色、...
内部样式表是将 CSS 代码写在 `<head>` 标签中,使用 `<style>` 标签来定义样式表。这种方式只对当前网页有效。格式如下: ``` <style type="text/css"> /* CSS 代码 */ ``` 其中,`type="text/css"` 指定了样式表...
了解HTML标签的默认CSS样式对于高效编写代码至关重要,因为这能帮助我们避免重复定义已存在的样式,从而简化CSS代码,提高工作效率。 首先,让我们来看看一些常见的HTML标签及其默认的CSS样式: 1. **段落(p)**...
"css样式初始化.zip"这个压缩包文件很可能包含了一组用于初始化CSS样式的代码,帮助开发者快速建立一个干净、一致的样式起点。初始化CSS样式的主要目的是消除浏览器之间的默认样式差异,确保在不同浏览器上呈现一致...
### CSS样式实例练习详解 #### 实例一:创建与应用CSS样式 在这一部分,我们将通过几个具体的步骤来实现对CSS样式的创建、导出以及应用。首先,我们需要在`1.htm`网页中新建一个CSS样式表,目标是将网页的文字内容...
在网页设计中,CSS(Cascading Style Sheets)是...通过精心设计和调整CSS样式,可以创建出既美观又实用的网页菜单,提升用户体验。在实际项目中,还可以运用响应式设计,确保菜单在不同设备和屏幕尺寸上都能正常显示。
通过使用适当的CSS属性和伪类,我们可以轻松地将一个普通的`<a>`标签模拟成按钮样式。这种方法不仅能够提升网页的整体美观性,还能够增强用户的交互体验。希望本文能够帮助你更好地理解和掌握这一技巧。
2. **复制样式**:在易语言中实现CSS样式的复制,可能需要编写函数或方法来读取和写入文本,将CSS代码从一个地方复制到另一个地方。这涉及到字符串操作和内存管理的知识。 3. **颜色值转换**:颜色在CSS中可以表示...
根据给定文件的信息,我们可以总结出以下关于“通用CSS样式”的关键知识点: ### CSS样式的基础配置 #### 1. **重置默认样式** - 为了确保不同浏览器间的一致性,通常会在CSS文件的开头处对全局元素的`margin`和`...
"CSS样式漂亮Tab页"指的是利用CSS来创建美观且功能完善的Tab切换效果。Tab页是一种常见的用户界面元素,它允许用户在多个相关但独立的内容面板之间进行切换,而无需加载新的页面。 首先,我们需要理解CSS的基本概念...
根据提供的文件内容,这篇文档主要讲述了网页开发中常用的HTML标签和CSS样式。下面将详细说明这些标签和样式的知识点: 首先,HTML标签是网页内容的骨架,它定义了网页的结构和内容。例如: - `<a>` 标签用于定义...
在网页设计中,`DIV`标签和CSS样式设计是构建现代网页布局的基础。`DIV`是一种HTML元素,用于分组其他HTML元素,创建页面的布局结构。在CSS(Cascading Style Sheets)的帮助下,我们可以对`DIV`进行样式定义,实现...
综上所述,新闻栏目设计CSS样式涉及到字体选择、颜色搭配、布局管理、文本对齐等多个方面。通过巧妙运用这些CSS属性和技巧,我们可以创建出专业、美观且易读的财经新闻页面,提升用户的浏览体验。在实际开发过程中,...
例如,我们可以使用"*"通配符选择所有元素,".class_name"选择具有特定类名的元素,"#id_name"选择具有特定ID的元素,以及"tag_name"选择特定类型的标签,如"p"用于段落或"a"用于链接。 接着,我们要掌握CSS属性和...
本文将详细讲解如何使用C#语言,结合数据库和CSS样式,实现.NET Menu控件的动态绑定。 首先,理解Menu控件的基本概念。Menu控件是一个用于构建多级导航结构的控件,它可以自动生成HTML代码,如和元素,以呈现层次化...