`

html中css样式的a标签

    博客分类:
  • html
阅读更多
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;
    }



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/tian_fang/archive/2009/11/12/4802552.aspx
分享到:
评论

相关推荐

    android TextView 支持CSS样式

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

    HTML标签的默认CSS样式汇总

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

    css 样式表 标签

    本教程将深入探讨CSS样式表和相关标签的使用。 1. **CSS基本概念** - **选择器与声明**:CSS的核心是选择器和声明。选择器定位HTML元素,声明则定义样式,由属性和值组成。 - **层叠原则**:CSS名称中的...

    HTML——CSS样式表教程

    **HTML与CSS样式表教程** 在网页设计领域,HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)是两个至关重要的技术。HTML用于构建网页的结构,而CSS则负责美化这些结构,使网页呈现出丰富的视觉...

    清除修改删除Vue自带的CSS样式

    清除删除修改Vue自带的CSS样式,在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色,后来发现是Vue自带了默认的CSS样式导致的,只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。

    实现css样式的方式

    内嵌样式也称为内联样式表,是将 CSS 代码写在 HTML 标签中,只对该标签有效。格式如下: ``` <tag style="CSS 代码">内容 ``` 示例如下: ``` ; text-align: center; font-size: 15pt;">全来网的 CSS 内嵌样式示例...

    HTML标签默认样式重置文件reset.css

    每一个HTML标签都有它的默认样式,例如标签有上下边距,body自带外边距等等。这些默认样式在不同的浏览器中可能会不一样,这就导致浏览器默认样式会给我们带来很大的麻烦,从而影响开发效率,所以最好的解决方案就是...

    CSS样式表个人总结

    CSS 样式表是网页设计中不可或缺的一部分,它定义了如何显示 HTML 元素,从而使网页更加美观和易用。下面是 CSS 样式表的个人总结,希望对学习 CSS 的朋友有用。 一、CSS 基础知识 CSS 全称为层叠样式表...

    jsp页面中插入css样式的三种方法总结.docx

    jsp页面中插入css样式的三种方法总结 jsp页面中插入css样式的三种方法是开发中常见的需求,本文将对三种方法进行总结介绍,并对每种方法的使用场景和优缺点进行分析。 外部样式 外部样式表是将css代码写入到一个...

    SharePoint 的CSS样式

    描述中提到的"MOSS2007的CSS样式大全"暗示了这是一个包含SharePoint 2007所有可用CSS样式的参考资料。这个PDF文件,即“CSS Reference Chart for SharePoint 2007 (Microsoft Office SharePoint Server 2007 and ...

    Bootstrap3.3.6 中文手册-全局CSS样式

    下面将详细介绍Bootstrap 3.3.6中关于全局CSS样式方面的知识点。 首先,Bootstrap的文档类型应该设置为HTML5,这是因为Bootstrap使用了某些只在HTML5中定义的元素和CSS属性。在文档的部分,开发者需要添加viewport...

    易语言CSS链接样式

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

    css样式模板_css_

    压缩包中的“css样式模板.doc”很可能包含了预定义的类选择器和ID选择器,这些可以直接应用到HTML元素上,为网页快速赋予统一的视觉风格。模板可能涵盖了上述提到的一些常见样式,也可能包含了一些特定的设计模式,...

    css样式初始化.zip

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

    邮件内css样式的引用规则

    正确的做法是将CSS样式直接内联到HTML标签中,这样可以确保样式被大多数邮件客户端解析。例如: ```html ”font-family:’宋体’; font-weight:bold; “> 活动促销 ”font-family:’宋体’; font-weight:bold; “>...

    网页表格经典css样式

    本资源"网页表格经典css样式"提供了一系列经典的表格设计样式,适合初学者学习和参考。 首先,我们要理解表格的基本HTML结构。一个基本的表格由`<table>`标签开始,包含`<tr>`(行)标签,每一行中又有`<td>`...

    html标签样式重置reset.css文件

    html标签样式重置reset.css文件,取消标签原来特殊样式方便自定义,例如a标签下划线,span标签前面的小圆点,清除浮动解决塌陷的兼容样式

    最新整理CSS样式表.pdf

    在HTML5中,可以通过简单的标签来链接外部的CSS样式表,如下所示: ```html <link rel="stylesheet" type="text/css" href="style.css"> ``` 其中,rel属性用于定义文档与链接文档之间的关系,type属性定义链接...

    形考任务四活动1:采用CSS样式来设置背景、标题和段落的颜色。.zip

    形考任务四 - CSS样式应用 body { background-color: blue; } h1 { color: red; } p { color: green; } 这是一个红色的一级标题 这是一个绿色的段落。 </html> ``` 通过这种方式,我们能够有效地控制...

    html之css样式

    3. 嵌入、内部和外部样式表:CSS可嵌入到HTML文档中(`<style>`标签),也可以作为内部样式表(`<head>`中的`<style>`标签)或外部样式表(单独的.css文件)。 二、盒模型 理解CSS盒模型对于布局至关重要。盒模型...

Global site tag (gtag.js) - Google Analytics