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 链接属性及其功能: - **a**: 控制所有超链接的基本样式。 - **a:link**: 设置未访问链接的样式。 - **a:visited**: 设置已访问链接的样式。 ...
在CSS(层叠样式表)中,`<a>`元素用于创建超链接,它能够将文本或图像与其他网页、文件或页面内的位置关联起来。...同时,根据网页设计的需要,也可以结合其他CSS选择器和属性来实现更加复杂和个性化的链接效果。
这份“语言程序设计资料:DIV_CSS常用的css属性大全.doc”涵盖了HTML基础标签的使用以及CSS中的一些基本属性,旨在帮助开发者更好地理解和应用这些元素。下面我们将深入探讨其中的关键知识点。 1. HTML基础标签: ...
### CSS 属性速查表概览 #### B-1 文本样式 文本样式是网页设计中最基本也是最重要的组成部分之一。合理的文本样式不仅能够提升页面的美观度,还能够提高用户体验。 - **`font-family`**: 设置文本所使用的字体...
### 常用的CSS属性详解与应用技巧 在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,它负责控制页面的布局、颜色、字体等视觉表现,使网页更加美观和易读。本文将深入探讨一些常用的CSS属性,包括文字...
以下是一些常见的CSS属性及其详细解释,帮助你全面理解并掌握它们的用法。 一、HTML基本样式 在HTML中,一些基础样式可以通过标签来实现,如`<pre>`用于预格式化的文本,`<div>`作为内容的容器,`<font>`用于控制...
* CSS选择器:标签选择器、类选择器、ID选择器、属性选择器 * CSS颜色与度量单位:颜色表示、度量单位 * CSS文本样式:字体、文字颜色、文字装饰、文字对齐 * CSS盒模型:盒模型、border、padding、margin * CSS边框...
10. CSS超链接和设置光标属性:CSS可以设置超链接的样式,包括链接的颜色、背景颜色、文字装饰、hover效果等。也可以设置光标属性,包括cursor、pointer-events等。 11. CSS列表:CSS列表可以设置列表的样式,包括...
### CSS常用属性一览表 #### 一、CSS文字属性 CSS中的文字属性是网页设计中最基本也是最常用的属性之一,这些属性能够帮助我们调整文本的显示效果,使其更加美观和易于阅读。 - **color**: 设置文字的颜色。例如...
### CSS常用属性详解 #### 一、CSS文字属性 CSS中的文字属性可以帮助我们调整文本的显示方式,使得页面上的文字更加美观和易于阅读。 - **color:** 用于设置文本的颜色。例如:`color:#999999;` 将文本颜色设置为...
本文将整理一些常见的CSS属性,帮助开发者更好地理解和应用CSS。 1. 字体和文本样式: - font-family: 指定元素的字体,可以指定多个字体作为回退方案。 - font-style: 指定字体样式,包括normal(正常)、italic...
3. CSS选择器与属性: - `class`选择器:用于选择具有特定类名的元素,可添加多个类名,如`.class1.class2`。 - 通配符`*`:匹配所有元素。 - 优先级:内联样式>内部样式表>外部样式表,ID选择器>类选择器>标签...
在CSS(层叠样式表)中,我们经常需要对网页中的超链接进行样式定义,以实现不同的视觉效果。超链接有四个不同的状态,每个状态对应不同的用户交互情况。正确理解和应用这四个状态的顺序至关重要,因为不正确的顺序...
### CSS各种属性代码大全 #### 文字属性 在网页设计中,文字的样式与呈现方式对用户体验至关重要。CSS提供了丰富的属性来控制文字的各种外观特性。 - **颜色**: 使用`color`属性来设置文本的颜色,例如:`color: ...
### CSS属性一览 #### 文字属性 在前端开发过程中,CSS的文字属性是非常基础且重要的部分。下面我们将逐一介绍这些属性: - **color**: 设置文本的颜色。例如:`color:#999999;` 表示将文本颜色设置为十六进制值#...
若要添加其他装饰,如虚线,可设置为`text-decoration: underline dotted;`。 2. **伪类选择器** - `a:link`:未访问的链接,可以设置其初始状态的样式,如`a:link {color: #008000;}`。 - `a:visited`:已访问的...
综上所述,这个CSS默写标准文档涵盖了CSS的基本语法、选择器、文本样式、背景属性、定位技巧等多个关键知识点,是学习和复习CSS时的重要参考资料。熟练掌握这些内容将有助于构建美观、响应式的网页设计。
CSS中的`text-decoration`属性用于设置文本的装饰,如下划线、上划线或删除线。要移除下划线,我们将其值设置为`none`: ```css a { text-decoration: none; } ``` 这将全局应用到所有超链接,使其不再显示...
- **装饰超链接**: - `a:link`: 未访问的链接样式。 - `a:visited`: 已访问的链接样式。 - `a:hover`: 鼠标悬停时的链接样式。 - `a:active`: 链接被激活时的样式。 #### 4. “容器”属性 - **边距属性**: ...
为了实现这个目标,我们需要关注以下几个CSS属性: 1. **`padding`**:设置内边距。这决定了链接周围的空间大小,有助于创建一个类似按钮的填充效果。 2. **`border`**:定义边框的宽度、样式和颜色。在这里,我们...