`
mrstanglu
  • 浏览: 41168 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
社区版块
存档分类
最新评论

CSS属性:装饰超链接

阅读更多

CSS属性:装饰超链接

※装饰超链接

  网页默认的链接方式是这样的:未访问过的链接是蓝色文字并带蓝色的下划线,访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式,是不是很单调呢?

  其实,利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。我们先看下面的这段代码:

  <html>
   <title>link css</title>
   <head>
   <style>
   <!--

   //*定义伪类元素(a:),大括号内定义了前景色属性和文本装饰属性,
   hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*//

   a:link{color:green;text-decoration:none}
   //*未访问时的状态,颜色为绿色(green),文本装饰属性(text-decoration)值
   为没有(none)*//

   a:visited{color:red;text-decoration:none}
   //*访问过的状态,颜色为红色(red),文本装饰属性值为没有*//
   a:hover{color:blue;text-decoration:overline;font-size:20pt}
   //*鼠标激活的状态,颜色为蓝色(blue), 文本装饰属性值为上划(overline),
   字体大小为20pt*//

   -->
   </style>
   </head>
   <body>
   <p style=“font-family:行书体;font-size:18pt”>
   <a href=“http://www.hongen.com”>未访问的链接</a></p>

   //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*//
   <p> <a href=“http://www.hongen.com”>访问过的链接</a></p>
   <p> <a href=“http://www.hongen.com”>鼠标激活的链接</a></p>
   </body>
   </html>

  您如果想看上述代码的效果,请点击这里

  我们从例子中看到没有访问过的链接以绿色显示,并且去掉了下划线;而访问过的链接以红色且没有下划线显示;另外,当鼠标激活链接时,链接以蓝色显示,并且加上了上划线。这种效果是怎么实现的呢?它除了运用了文本属性中的text-decoration属性,而且采用了伪类元素。
  通过上面的代码注释,相信您应该对伪类元素有一个大概认识。实际上我们用到的这种伪类应当称之为“锚伪类”,它规定了链接不同状态下的效果。

  怎么样,是不是很简单的就可以实现动态链接的效果,赶紧自己动手试一试吧!下一节我将向您介绍“容器”属性。

分享到:
评论

相关推荐

    css 属性一览表

    CSS 链接属性用于控制超链接的不同状态下的外观。以下是一些常用的 CSS 链接属性及其功能: - **a**: 控制所有超链接的基本样式。 - **a:link**: 设置未访问链接的样式。 - **a:visited**: 设置已访问链接的样式。 ...

    Css——超链接样式

    在CSS(层叠样式表)中,`&lt;a&gt;`元素用于创建超链接,它能够将文本或图像与其他网页、文件或页面内的位置关联起来。...同时,根据网页设计的需要,也可以结合其他CSS选择器和属性来实现更加复杂和个性化的链接效果。

    语言程序设计资料:DIV_CSS常用的css属性大全.doc

    这份“语言程序设计资料:DIV_CSS常用的css属性大全.doc”涵盖了HTML基础标签的使用以及CSS中的一些基本属性,旨在帮助开发者更好地理解和应用这些元素。下面我们将深入探讨其中的关键知识点。 1. HTML基础标签: ...

    CSS 属性速查表PDF

    ### CSS 属性速查表概览 #### B-1 文本样式 文本样式是网页设计中最基本也是最重要的组成部分之一。合理的文本样式不仅能够提升页面的美观度,还能够提高用户体验。 - **`font-family`**: 设置文本所使用的字体...

    常用的css属性大全电脑技巧

    ### 常用的CSS属性详解与应用技巧 在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,它负责控制页面的布局、颜色、字体等视觉表现,使网页更加美观和易读。本文将深入探讨一些常用的CSS属性,包括文字...

    常用的CSS属性大全

    以下是一些常见的CSS属性及其详细解释,帮助你全面理解并掌握它们的用法。 一、HTML基本样式 在HTML中,一些基础样式可以通过标签来实现,如`&lt;pre&gt;`用于预格式化的文本,`&lt;div&gt;`作为内容的容器,`&lt;font&gt;`用于控制...

    李炎恢HTML_CSS教程.pdf

    * CSS选择器:标签选择器、类选择器、ID选择器、属性选择器 * CSS颜色与度量单位:颜色表示、度量单位 * CSS文本样式:字体、文字颜色、文字装饰、文字对齐 * CSS盒模型:盒模型、border、padding、margin * CSS边框...

    Web前端设计与开发技术-课件-第10章-CSS基础完整.pptx

    10. CSS超链接和设置光标属性:CSS可以设置超链接的样式,包括链接的颜色、背景颜色、文字装饰、hover效果等。也可以设置光标属性,包括cursor、pointer-events等。 11. CSS列表:CSS列表可以设置列表的样式,包括...

    CSS常用属性一览表

    ### CSS常用属性一览表 #### 一、CSS文字属性 CSS中的文字属性是网页设计中最基本也是最常用的属性之一,这些属性能够帮助我们调整文本的显示效果,使其更加美观和易于阅读。 - **color**: 设置文字的颜色。例如...

    css常用属性

    ### CSS常用属性详解 #### 一、CSS文字属性 CSS中的文字属性可以帮助我们调整文本的显示方式,使得页面上的文字更加美观和易于阅读。 - **color:** 用于设置文本的颜色。例如:`color:#999999;` 将文本颜色设置为...

    CSS常用属性整理.pdf

    本文将整理一些常见的CSS属性,帮助开发者更好地理解和应用CSS。 1. 字体和文本样式: - font-family: 指定元素的字体,可以指定多个字体作为回退方案。 - font-style: 指定字体样式,包括normal(正常)、italic...

    最新HTML、CSS基础知识整理.docx

    3. CSS选择器与属性: - `class`选择器:用于选择具有特定类名的元素,可添加多个类名,如`.class1.class2`。 - 通配符`*`:匹配所有元素。 - 优先级:内联样式&gt;内部样式表&gt;外部样式表,ID选择器&gt;类选择器&gt;标签...

    CSS定义超链接四个状态的正确顺序L-V-H-A

    在CSS(层叠样式表)中,我们经常需要对网页中的超链接进行样式定义,以实现不同的视觉效果。超链接有四个不同的状态,每个状态对应不同的用户交互情况。正确理解和应用这四个状态的顺序至关重要,因为不正确的顺序...

    CSS各种属性代码大全

    ### CSS各种属性代码大全 #### 文字属性 在网页设计中,文字的样式与呈现方式对用户体验至关重要。CSS提供了丰富的属性来控制文字的各种外观特性。 - **颜色**: 使用`color`属性来设置文本的颜色,例如:`color: ...

    CSS属性一览

    ### CSS属性一览 #### 文字属性 在前端开发过程中,CSS的文字属性是非常基础且重要的部分。下面我们将逐一介绍这些属性: - **color**: 设置文本的颜色。例如:`color:#999999;` 表示将文本颜色设置为十六进制值#...

    CSS:A标记样式

    若要添加其他装饰,如虚线,可设置为`text-decoration: underline dotted;`。 2. **伪类选择器** - `a:link`:未访问的链接,可以设置其初始状态的样式,如`a:link {color: #008000;}`。 - `a:visited`:已访问的...

    CSS默写标准文档

    综上所述,这个CSS默写标准文档涵盖了CSS的基本语法、选择器、文本样式、背景属性、定位技巧等多个关键知识点,是学习和复习CSS时的重要参考资料。熟练掌握这些内容将有助于构建美观、响应式的网页设计。

    html超链接去掉下划线

    CSS中的`text-decoration`属性用于设置文本的装饰,如下划线、上划线或删除线。要移除下划线,我们将其值设置为`none`: ```css a { text-decoration: none; } ``` 这将全局应用到所有超链接,使其不再显示...

    css入门教程-v1.0

    - **装饰超链接**: - `a:link`: 未访问的链接样式。 - `a:visited`: 已访问的链接样式。 - `a:hover`: 鼠标悬停时的链接样式。 - `a:active`: 链接被激活时的样式。 #### 4. “容器”属性 - **边距属性**: ...

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

    为了实现这个目标,我们需要关注以下几个CSS属性: 1. **`padding`**:设置内边距。这决定了链接周围的空间大小,有助于创建一个类似按钮的填充效果。 2. **`border`**:定义边框的宽度、样式和颜色。在这里,我们...

Global site tag (gtag.js) - Google Analytics