`

A标签的css样式

 
阅读更多
  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控制A标签CSS样式的实现方法 在前端开发中,使用JQuery库来操作DOM元素的样式是一种常见的做法。本文将详细介绍如何利用JQuery控制动态`&lt;a&gt;`标签的CSS样式,包括鼠标悬停、点击等交互效果的实现。 #### ...

    a标签样式 和 a标签属性写法

    a标签样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括: 总: a 表示所有状态下的连接 如 .mycls a{color:red} ① a:link:...

    a标签连接样式表css

    a标签连接样式表 a标签样式 是页面变得随心所欲

    android TextView 支持CSS样式

    但通过`TextView`的`setText`方法结合`Html.fromHtml()`函数,可以实现基本的HTML标签渲染,并且通过一些开源库或自定义处理方式,可以进一步扩展其功能,使其支持更多的CSS样式。 #### 二、基础知识 ##### 1. ...

    a标签的css样式四个状态LVHA的设计

    设计a标签的CSS样式时,需要遵循这个顺序,以确保样式被正确应用。 1. a:link状态表示一个未被用户访问过的链接,它代表了a标签的默认状态。在这个状态下,我们通常会定义链接的正常外观,包括字体大小、颜色、...

    实现css样式的方式

    内部样式表是将 CSS 代码写在 `&lt;head&gt;` 标签中,使用 `&lt;style&gt;` 标签来定义样式表。这种方式只对当前网页有效。格式如下: ``` &lt;style type="text/css"&gt; /* CSS 代码 */ ``` 其中,`type="text/css"` 指定了样式表...

    HTML标签的默认CSS样式汇总

    了解HTML标签的默认CSS样式对于高效编写代码至关重要,因为这能帮助我们避免重复定义已存在的样式,从而简化CSS代码,提高工作效率。 首先,让我们来看看一些常见的HTML标签及其默认的CSS样式: 1. **段落(p)**...

    css样式初始化.zip

    "css样式初始化.zip"这个压缩包文件很可能包含了一组用于初始化CSS样式的代码,帮助开发者快速建立一个干净、一致的样式起点。初始化CSS样式的主要目的是消除浏览器之间的默认样式差异,确保在不同浏览器上呈现一致...

    Css样式 -实例练习

    ### CSS样式实例练习详解 #### 实例一:创建与应用CSS样式 在这一部分,我们将通过几个具体的步骤来实现对CSS样式的创建、导出以及应用。首先,我们需要在`1.htm`网页中新建一个CSS样式表,目标是将网页的文字内容...

    css样式美化菜单 css

    在网页设计中,CSS(Cascading Style Sheets)是...通过精心设计和调整CSS样式,可以创建出既美观又实用的网页菜单,提升用户体验。在实际项目中,还可以运用响应式设计,确保菜单在不同设备和屏幕尺寸上都能正常显示。

    用css把a链接模拟成button的样子的方法

    通过使用适当的CSS属性和伪类,我们可以轻松地将一个普通的`&lt;a&gt;`标签模拟成按钮样式。这种方法不仅能够提升网页的整体美观性,还能够增强用户的交互体验。希望本文能够帮助你更好地理解和掌握这一技巧。

    易语言CSS链接样式

    2. **复制样式**:在易语言中实现CSS样式的复制,可能需要编写函数或方法来读取和写入文本,将CSS代码从一个地方复制到另一个地方。这涉及到字符串操作和内存管理的知识。 3. **颜色值转换**:颜色在CSS中可以表示...

    通用css样式

    根据给定文件的信息,我们可以总结出以下关于“通用CSS样式”的关键知识点: ### CSS样式的基础配置 #### 1. **重置默认样式** - 为了确保不同浏览器间的一致性,通常会在CSS文件的开头处对全局元素的`margin`和`...

    CSS样式漂亮Tab页

    "CSS样式漂亮Tab页"指的是利用CSS来创建美观且功能完善的Tab切换效果。Tab页是一种常见的用户界面元素,它允许用户在多个相关但独立的内容面板之间进行切换,而无需加载新的页面。 首先,我们需要理解CSS的基本概念...

    网页常用html标签与css样式.pdf

    根据提供的文件内容,这篇文档主要讲述了网页开发中常用的HTML标签和CSS样式。下面将详细说明这些标签和样式的知识点: 首先,HTML标签是网页内容的骨架,它定义了网页的结构和内容。例如: - `&lt;a&gt;` 标签用于定义...

    DIV标签中应用CSS样式设计.pdf

    在网页设计中,`DIV`标签和CSS样式设计是构建现代网页布局的基础。`DIV`是一种HTML元素,用于分组其他HTML元素,创建页面的布局结构。在CSS(Cascading Style Sheets)的帮助下,我们可以对`DIV`进行样式定义,实现...

    新闻栏目设计css 样式

    综上所述,新闻栏目设计CSS样式涉及到字体选择、颜色搭配、布局管理、文本对齐等多个方面。通过巧妙运用这些CSS属性和技巧,我们可以创建出专业、美观且易读的财经新闻页面,提升用户的浏览体验。在实际开发过程中,...

    course_css样式_

    例如,我们可以使用"*"通配符选择所有元素,".class_name"选择具有特定类名的元素,"#id_name"选择具有特定ID的元素,以及"tag_name"选择特定类型的标签,如"p"用于段落或"a"用于链接。 接着,我们要掌握CSS属性和...

    .net Menu控件动态绑定数据库(C#)css样式

    本文将详细讲解如何使用C#语言,结合数据库和CSS样式,实现.NET Menu控件的动态绑定。 首先,理解Menu控件的基本概念。Menu控件是一个用于构建多级导航结构的控件,它可以自动生成HTML代码,如和元素,以呈现层次化...

Global site tag (gtag.js) - Google Analytics