css链接样式_CSS中的样式链接

最新推荐文章于 2024-04-19 12:52:58 发布

cumtb2002

最新推荐文章于 2024-04-19 12:52:58 发布

阅读量500

点赞数

文章标签： css html linux python js ViewUI

原文链接：https://www.includehelp.com/code-snippets/styling-links-in-css.aspx

版权

css链接样式

CSS样式链接 (CSS Styling Links)

The links in CSS can be styled in various ways to make our website more presentable and attractive. The links can also be styled depending on their states e.g. visited, active, hover, etc.

CSS中的链接可以通过各种方式设置样式，以使我们的网站更具外观和吸引力。也可以根据链接的状态来设置链接的样式，例如访问，活动，悬停等。

The four links states are,

四个链接状态为：

a:link: a normal, unvisited link
a：link ：一个普通的，未访问的链接
a:visited: a link that user has visited
a：visited ：用户访问过的链接
a:hover: a link the moment user mouses over it
a：hover ：用户将鼠标悬停在其上时的链接
a:active: a link when it is clicked
a：active ：单击时的链接

There are various methods to style our links, some of them are listed below,

链接的样式有多种方法，下面列出了其中的一些方法，

颜色 (Color)

The color of the links can be altered with whatever you decide to pick. As mentioned the links can be styled depending on their states.

链接的颜色可以根据您选择的内容进行更改。如前所述，可以根据链接的状态来设置链接的样式。

Syntax:

句法：

    a:link{
        color:red;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        a:link {
            background-color: red;
            color: white;
        }
        
        a:active {
            background-color: black;
        }
    </style>
</head>
<html>

<body>
    <a href="#">It's a link1</a>
    <br/>
    <a href="#">It's a link2</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
</body>

</html>

Output

输出量

The above code sets white color to the link.

上面的代码将白色设置为链接。

文字装饰 (Text Decoration)

The text-decoration is the most commonly used property when it comes to styling links.

当涉及样式链接时， 文本装饰是最常用的属性。

The text-decoration property is used to remove or set underlines on links. The possible values of text-decoration are: none, underline, overline, blink, line-through and inherit.

text-decoration属性用于删除或设置链接上的下划线。 文本修饰的可能值为： none ，下划线，上划线，闪烁，直通和继承。

Syntax:

句法：

    a:link{
        text-decoration:none;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        a:link {
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: overline;
        }
    </style>
</head>
<html>

<body>
    <a href="#">It's a link1</a>
    <br/>
    <a href="#">It's a link2</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
    <a href="#">It's a link3</a>
    <br/>
</body>

</html>

Output

输出量

The above code sets the decoration to the link and overline, when we hover on the link.

当我们将鼠标悬停在链接上时，上面的代码将装饰设置为链接和overline 。

背景颜色 (Background Color)

The background-color is yet another most commonly used property to set the background color of our links so that they appear flashy and once any visitor visits your site, they won’t be able to ignore that link.

background-color是设置链接背景色的另一个最常用的属性，以使它们显得浮华，一旦任何访问者访问您的站点，他们将无法忽略该链接。

Syntax:

句法：

    a:link{
        background-color:red;
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        a:link {
            background-color: red;
        }
        
        a:hover {
            background-color: pink;
        }
    </style>
</head>
<html>

<body>
    <a href="#">It's a link1</a><br/>
	<a href="#">It's a link2</a><br/>
	<a href="#">It's a link3</a><br/>
	<a href="#">It's a link3</a><br/>
</body>

</html>

Output

输出量

The above code sets the background-color to the link when we hover on the link.

当我们将鼠标悬停在链接上时，上面的代码将背景色设置为链接。

翻译自: https://www.includehelp.com/code-snippets/styling-links-in-css.aspx

css链接样式

cumtb2002

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css链接样式_CSS中的样式链接

css链接样式 CSS样式链接 (CSS Styling Links)The links in CSS can be styled in various ways to make our website more presentable and attractive. The links can also be styled depending on their states e.g. visi...
复制链接

扫一扫