css链接样式有几种（CSS设置链接的样式）

：暂无数据 2026-05-04 19:20:03 ：0

曾几何时，我也觉得css链接样式有几种高不可攀，尤其CSS设置链接的样式更是一头雾水。后来才发现，只是没找对方法，希望我的经验能帮到你。

本文目录

CSS设置链接的样式
利用css设置四种不同样式超链接的方法
CSS中设置文字链接的样式主要是设置链接的四种状态，分别为什么
创建CSS样式表的三种方式
css链接样式怎么设置
CSS决定网页样式,样式添加可以通过单独文件链接样式、嵌入样式、行内样式几种
在DW,CSS样式中link，visited，hover，active这四个分别表示什么意思
CSS选择器中,什么是伪类,请写出超链接伪类四种形态

CSS设置链接的样式

链接是从一个网页到另一个网页的连接，CSS可通过不同属性以各种不同方式来设置链接的样式。下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法，希望对大家有所帮助。

在讨论CSS属性之前，先了解链接的状态是非常重要的。链接可以存在于不同的状态，并且可以使用伪类进行样式设置。

下面给出了四种链接状态：

●　a：link =》这是一个正常的，未访问过的链接。

●　a：visited =》这是用户至少访问过一次的链接

●　a：hover =》当鼠标悬停在它上面时，这是一个链接

●　a：active =》这是一个刚刚点击的链接。

语法：

color_name可以采用任何格式，如颜色名称（green）、十六进制值（#5570f0）或RGB值-rgb(25, 255, 2)。还有另一个状态“a:focus”，用于在用户使用Tab键浏览链接时进行聚焦。

链接的默认值：

●　默认情况下，创建的链接带有下划线。

●　当鼠标悬停在链接上方时，它会变为手形图标。

●　正常/未访问的链接为蓝色。

●　访问过的链接有紫色。

●　活动链接为红色。

●　链接聚焦时，它周围有一个轮廓。

例：

效果图：

CSS如何设置链接的样式？

下面是链接的一些基本CSS属性：

●　color属性

●　font-family属性

●　text-decoration属性

●　background-color属性

1、color属性：此CSS属性用于更改链接文本的颜色。

语法：

例：

效果图：

2、font-family属性：此属性用于使用font-family属性更改链接的字体类型。

语法：

3、text-decoration属性：此属性主要用于向链接删除或添加下划线等修饰。

语法：

例：

效果图：

4、background-color属性：此属性用于设置链接的背景颜色。

语法：

例：使用以下css属性

效果图：

更多 web前端知识，请查阅 HTML中文网！！

利用css设置四种不同样式超链接的方法

html超链接样式包括：正在连接、访问过、鼠标盘旋，各个文本字体样式设置如下
《style type="text/css"》
《!-- 超链接文本字体设置--》
A {
FONT-SIZE: 16px; FONT-FAMILY: 宋体
}
《!-- 超链接正在连接的文本字体设置--》
A:link {
COLOR: #0055bb; TEXT-DECORATION: none
}
《!-- 超链接访问过的文本字体设置--》
A:visited {
COLOR: #0077bb; TEXT-DECORATION: none
}
《!-- 超链接鼠标盘旋的文本字体设置--》
A:hover {
COLOR: #ff0000; TEXT-DECORATION: none
}
《/style》

CSS中设置文字链接的样式主要是设置链接的四种状态，分别为什么

在当今的网页制作中，几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，有些书上把它译为 “层叠样式表”。有了CSS的控制，我们的网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。一、看下面的样式：
a:link { text-decoration: none} //a:link 指正常的未被访问过的链接
a:active { text-decoration: none } //a:active 指点击链接的瞬间出现的链接情况
a:visited { text-decoration: none } //a:visited 指已经访问过的链接
a:hover { text-decoration: none; } //a:hover 指鼠标放上去链接出现的情况
　　hover是一个经常会被混淆的属性，一般大家都认为链接是三个属性：link,active,visited，而且一般的网页制作软件里也只有这三个设置，但是hover其实也是一个非常重要的属性，它还可以在链接上加上背景色（BACKGROUND:#ccffcc;），其它的设置与上面三个一样，所以大家现在可以记住，链接上可以做四个属性设置，分别是：link,active,visited,hover　　text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线。还有一个是blink参数，顾名思义是闪烁效果，但是他要在NetScape浏览器上才能显示。
二、使粗体文字加上删除线。　　粗体文字使用的代码是：B { text-decoration: line-through }　　使粗体文字中所有的字母大写。使用代码： B { text-transform: uppercase }（这个在NS中才显示出来，IE没有相应效果显示）　　产生既大写，又有颜色，又有删除线的效果的代码是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF} 。另外，用lowercase使所有字母小写显示，capitalize 使每个单词的首字母大写显示。
三、产生链接变色效果：　　经过在对链接的几个属性进行颜色设置后，可以使具有link,active,visited属性的链接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。
a:link { text-decoration: none ; color: green } //正常链接文字显示绿色
a:active { text-decoration: none ; color: yellow } //点击瞬间的链接显示黄色
a:visited { text-decoration: none ; color: red } //已经访问过的链接显示红色　　要想产生鼠标放上去产生变色效果，就要用到另一个属性了,这就是 hover。如：a:hover { text-decoration: none ; color: yellow；background:white; } 表示鼠标移动到链接文字上时，文字修饰风格为“无”，同时链接文字显示黄色，链接文字的底色显示为白色。四、看一下下面链接设置的总体运用情况：
a:link { text-decoration: none ; color: blue ; font-size: 9pt }
a:active { text-decoration: underline ; color: yellow;font-size: 10pt }
a:visited { text-decoration: none ; color: red;font-size: ***** }
a:hover { text-decoration: underline; color: green ; font-size: 11pt;background:white; }上面这样设置含义为：
　　a:link 链接文字没有下划线，蓝色（blue）显示，字为9pt大小；
　　a:active鼠标点击链接的瞬间文字再现下划线，颜色变成黄色（yellow），并且文字大小变成10pt；
　　a:visited 访问过的链接没有下划线，文字变成红色（red），同时文字大小变成*****；
　　a:hover鼠标放到链接上时出现下划线，颜色为绿色（green），字符大小11pt，同时文字上出现一个白色（white）的背景区域。

创建CSS样式表的三种方式

主要探讨HTML5中CSS（层叠样式表），它是用来对HTML文档外观的表现形式进行排版和格式化。

使用CSS

CSS样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

《p style="color:red;font-size:50px;"》这是一段文本《/p》

解释：style是行内样式属性。color是颜色属性，red是颜色属性值；font-size是字体大小属性，50px是字体大小属性值。

三种方式

创建CSS样式表有三种方式：1.元素内嵌样式；2.文档内嵌样式；3.外部引入样式。

1.元素内嵌样式

《p style="color:red;font-size:50px;"》这是一段文本《/p》

解释：即在当前元素使用style属性的声明方式。

2.文档内嵌样式

《styletype="text/css"》

color:blue;

font-size:40px;

}

《/style》

《p》这是一段文本《/p》

解释：在《head》元素之间创建《style》元素，通过选择器的方式调用指定的元素并设置相关CSS。

3.外部引用样式

《linkrel="stylesheet"type="text/css"href="*****"》

//*****

@charset"utf-8";

color:green;

font-size:30px;

}

解释：很多时候，大量的HTML页面使用了同一个组CSS。那么就可以将这些CSS样式保存在一个单独的.css文件中，然后通过《link》元素去引入它即可。@charset"utf-8"表明设置CSS的字符编码，如果不写默认就是utf-8。北京电脑培训认为如果有多个.css文件，*****文件。只不过，性能不如多个《link》链接。

css链接样式怎么设置

css可以使用下面的几种伪类来设置链接样式：
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，要按照如下规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

CSS决定网页样式,样式添加可以通过单独文件链接样式、嵌入样式、行内样式几种

有外部式，内嵌式，行内样式。
1、外部式：
（1）用法：当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。
（2）举例：通常外部样式表以 .css 做为文件扩展名，例如 *****。然后在需要此样式的页面中将其链接进来。
2、内嵌式：
（1）用法：当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的标记符内。嵌入的样式表中的样式只能在同一网页上使用。
（2）举例：在 MicrosoftFrontPage2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性。
3、行内样式：
行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。