`

css超链接样式

    博客分类:
  • Css
css 
阅读更多
1. css超链接样式

1) 使用css伪类别来设置超链接样式

链接的四种状态:
a:link:普通的、未被访问的链接
a:visited:用户已访问的链接
a:hover:鼠标指针位于链接的上方
a:active:链接被点击的时刻

<style type="text/css">
    a:LINK {
        color: red;
        text-decoration: none;
    }
    a:VISITED {
        color: green;
        text-decoration: none;
    }
    a:HOVER {
        background-color: yellow;
        text-decoration: none;
    }
</style>
</head>
<body>
<a href="http://www.123.com">超链接</a>
</body>


2) 创建按钮式超链接

<style type="text/css">
    body{
        margin: 20px;
    }
    a{
        font-family: Arial;
        margin: 5px;
    }
    a:LINK,a:VISITED {
        color:#A62020;
        padding:4px 10px 4px 10px;
        background-color:#DDD;
        text-decoration: none;
        border-top: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
        border-bottom: 1px solid #717171;
        border-right: 1px solid #717171;
    }
    a:HOVER {
        color: #821818;
        padding: 5px 8px 3px 12px;
        background-color: #CCC;
        border-top: 1px solid #717171;
        border-left: 1px solid #717171;
        border-bottom: 1px solid #EEEEEE;
        border-right: 1px solid #EEEEEE;
    }
</style>
</head>
<body>
<a href="http://www.baidu.com">Java</a>
<a href="http://www.baidu.com">Php</a>
<a href="http://www.baidu.com">.Net</a>
</body>
分享到:
评论

相关推荐

    Css——超链接样式

    这里我们将深入探讨CSS中的超链接样式及其四个关键状态。 1. `a:link` - 链接平常的状态 当用户尚未点击链接时,`a:link`用于定义超链接的初始样式。这通常包括颜色、文字装饰(如下划线)和字体大小等。例如,...

    css控制超链接(css超链接样式)

    【CSS控制超链接样式】是Web前端开发中的一个重要部分,它允许我们自定义HTML中`&lt;a&gt;`标签的外观和行为。以下是对这个主题的详细解释: ### 一、CSS伪类 伪类是CSS中一种特殊的声明,用于指定元素在特定状态下的...

    CSS改变超链接属性

    在这个场景中,我们需要使用CSS来改变超链接的属性,从而实现特定的视觉效果和交互体验。 首先,我们要了解超链接的基本结构。在HTML中,`&lt;a&gt;`标签用于创建超链接,其`href`属性定义了链接的目标URL。例如,将...

    jQuery+CSS实现淡入效果的超链接样式

    在这里,我们将利用CSS为超链接定义基础样式,并通过jQuery来控制这些样式的动态变化,实现淡入效果。 要实现淡入效果,我们需要设置超链接的初始透明度。在CSS中,我们可以使用`opacity`属性来控制元素的透明度,...

    css伪类(超链接)

    css伪类 超链接 连接的用法 描述 link的样式说明

    CSS常用样式表快速查询

    CSS超链接样式可以控制超链接的样式。常见的超链接样式包括: * A:link:未被访问的链接样式 * A:visited:已被访问过的链接样式 * A:hover:鼠标悬浮在链接上时的样式 * A:active:鼠标正在按下时链接文字的样式 ...

    css通过伪类来设置超链接样式附示例

    css设置超链接样式是通过伪类来实现的 (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover:设置对象在其鼠标悬停时的样式表属性。 (4...

    js和CSS3鼠标悬停超链接展示图片特效

    4. `css` 文件夹 - 包含了实现动画效果的CSS样式表。 5. `img` 文件夹 - 存储了用于展示的图片资源。 6. `js` 文件夹 - 包含了实现特效的JavaScript脚本,可能包括对jQuery库的引用和自定义的JavaScript代码。 通过...

    7款CSS3超链接下划线动画特效代码

    HTML可能用于创建超链接结构,而CSS3则负责样式和动画效果。 【压缩包内容】 根据文件名"index.html"和"css",我们可以推测压缩包包含了一个HTML文件和一个CSS文件。"index.html"通常为网页的主文件,包含了HTML...

    jQuery-CSS-实现澹入效果的超链接样式.rar

    在本项目"jQuery-CSS-实现澹入效果的超链接样式.rar"中,主要涉及到的是如何使用jQuery库和CSS技术来为网页中的超链接添加动态的澹入效果,提升用户体验。接下来,我们将深入探讨这两个核心知识点。 首先,jQuery是...

    20种样式不一的创意超链接

    超链接的基本原理是利用HTML的`&lt;a&gt;`标签来创建连接,但通过CSS(层叠样式表)我们可以定制其外观和交互效果。以下是一些关于创意超链接设计的关键知识点: 1. **颜色与状态**:创意超链接通常会根据不同的状态(如...

    使用CSS样式美化超链接和鼠标指针PPT学习教案.pptx

    使用 CSS 样式美化超链接和鼠标指针 PPT 学习教案 本资源主要介绍如何使用 CSS 样式美化超链接和鼠标指针,内容涵盖了超链接的基本概念、CSS 伪类的应用、鼠标指针样式的设置等多方面的知识点。 知识点一:超链接...

    css 浮雕式超链接

    利用CSS,我们可以实现各种视觉效果,包括创建浮雕式的超链接,这使得网页元素更具交互性和吸引力。在本主题中,我们将深入探讨如何使用CSS创建浮雕效果的超链接,并分享一些实用技巧。 首先,让我们理解浮雕效果。...

    CSS层叠样式表学习指南

    它的作用简单的说:就是可以使你在同一页面里使用不同的超链接样式。  更神奇的是,用CSS,仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为网页样式表的强大和...

    7款CSS3鼠标滑过超链接动画特效.zip

    "css样式"标签则直接点明了主题,即这个资源是关于CSS样式的,特别是与超链接相关的CSS3特效。 【文件名称列表】 由于提供的信息只有一个数字"1544",这可能是一个错误或者遗漏,通常压缩包内的文件名会包含更具体...

    CSS定义超链接样式的顺序及四个伪类的用法示例介绍

    在CSS中,定义超链接样式是网页设计的基本要素之一,主要通过四个伪类来实现不同的链接状态。这四个伪类是`:link`、`:visited`、`:hover`和`:active`,它们按照“爱恨”原则(LVHA)排列,即Link、Visited、Hover、...

    CSS3自定义样式超链接按钮 鼠标滑过带动画特效

    解压密码:RJ4587 超链接和按钮在网页中是最为基本的元素了,我们可以通过设置CSS样式将链接外观做一些简单的调整,比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮,并且鼠标滑过...

    [ CSS-CSS3 ] 史上最全CSS样式一览表

    CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...

    Dreamweaver8系列DIV+CSS教程超链接伪类.pdf

    本教程主要探讨了超链接的四种样式及其伪类,以及如何利用CSS进行更高级的样式控制,如将链接转换为块状元素,创建自定义CSS按钮,以及实现首字下沉的效果。 一、超链接的四种样式及伪类 超链接伪类是CSS中用于定义...

Global site tag (gtag.js) - Google Analytics