CSS 设置链接样式

使用标签定义了一个超链接，点击其中的文本可以跳转到蚂蚁部落首页。

链接是HTML中最为重要的元素之一，犹如一个超时空飞船，实现了页面之间或者站点之间的跳转。

所以对于超链接样式的设置也是比较重要的操作，可以提示浏览者当前链接处于一个什么状态，比如是否处于点击状态，或者是否已经访问过等，下面通过代码实例分别做一下介绍。

一.超链接四种状态：

（1）.a:link：设置链接的初始样式，也就是未被点击的样式。

（2）.a:visited：设置链接被点击后的样式。

（3）.a:hover：设置当鼠标悬浮于链接之上的样式。

（4）.a:active：设置当链接被激活时的状态，也就是鼠标按键在链接上按下且未松开时的状态。

二.代码实例如下：
<!doctype html>

状态分析如下：

（1）.当链接从未点击状态下，字体颜色为红色。

（2）.当链接被点击后，字体颜色为蓝色。

（3）.当鼠标悬浮于链接之上，字体颜色为绿色，并带有中划线。

（4）.当鼠标按于链接之上且未松开的时候，字体颜色为粉红色。

三.顺序的重要性：

链接的这四个状态的顺序非常重要，如果顺序不对，那么就可能无法获取预期效果。

正确顺序如下：

（1）.link。

（2）.visited。

（3）.hover。

（4）.active。

CSS 设置链接样式相关推荐

css 鼠标悬浮样式_【技术】CSS设置链接鼠标（失效）不能点样式
css关键代码: <style type="text/css">.add-link{color: #358753;}.link-notallowd{opacity: . ...
css链接样式_如何在CSS中设置链接样式
css链接样式样式链接 (Styling Links) Links can be styled with any CSS property, such as color, font-family, ...
CSS设置链接的样式
链接是从一个网页到另一个网页的连接,CSS可通过不同属性以各种不同方式来设置链接的样式.下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法,希望对大家有所帮助. 在讨论CSS属性之前,先了解链接 ...
html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式属性有很多可以自己去试:circle,disc,decimal ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
【Web应用开发】实验三：利用CSS设置网页内容样式
文章目录一.实验目的二.实验内容三. 网页效果展示四.小结一.实验目的了解CSS的基本含义及其基本用法: 掌握CSS样式应用的四种方法:行内样式.内嵌式.链接式.导入式: 了解CSS选择器 ...

CSS 设置链接样式

CSS 设置链接样式相关推荐

最新文章

热门文章