CSS链接–如何自定义链接样式

CSS Link – How to customize styles of your links Today I will tell you about CSS again. But we will talk not about properties today – but about link elements. Link is part of document, linking to other element (text, image, block) in same document or to another object (as example file or other document). As we all know, default color of links is blue (in all browsers). But of course, we can style our links with CSS properties (as example choose another color, font, background, visual text effects, etc) for all states. For links, HTML using tag <a>, with defined link it will looks like <a href="link_url">link caption</a>. As I told before, link can have 4 states:

CSS链接–如何自定义链接样式今天，我将再次向您介绍CSS。 但是，我们今天将不谈论属性，而是谈论链接元素。 链接是文档的一部分，链接到同一文档中的其他元素(文本，图像，块)或另一个对象(例如文件或其他文档)。 众所周知，链接的默认颜色是蓝色(在所有浏览器中)。 但是当然，我们可以为所有状态使用CSS属性(例如，选择其他颜色，字体，背景，可视文本效果等)来设置链接样式。 对于链接，使用标记<a>且定义了链接HTML看起来像<a href="link_url">链接标题</a>。 如前所述，链接可以具有4种状态：

• active – this state describing link in moment when mouse down and over our link.
  活动-此状态描述了当鼠标向下和我们的链接上方时的链接。
• hover – this state describing link in moment when mouse only over our link.
  悬停–当鼠标仅悬停在我们的链接上时，此状态描述了链接。
• link – this state for usual unvisited links.
  链接-通常未访问的链接的状态。
• visited – this state for already visited links.
  已访问-已访问链接的状态。

Also present few rules that we should define ‘hover’ properties after defining ‘link’ and ‘visited’, and also need to have ‘active’ after ‘hover’ So, in result – here are order of styles which we can have:

还提出了一些规则，我们应该在定义“链接”和“访问”之后定义“悬停”属性，并且还需要在“悬停”之后保持“活动”状态，因此，这是我们可以拥有的样式顺序：

a:link { /* styles for unvisited link */ }
a:visited { /* styles for visited link */ }
a:hover { /* styles for hover link */ }
a:active { /* styles for active link */ }

a:link { /* styles for unvisited link */ }
a:visited { /* styles for visited link */ }
a:hover { /* styles for hover link */ }
a:active { /* styles for active link */ }

Ok, lets create first sample where we will use different font size and colors for different states

好，让我们创建第一个示例，在此示例中，我们将为不同的状态使用不同的字体大小和颜色

样品1 (Sample 1)

First sample link 第一个示例链接

#sample1 a:link { font-size:14px;color:red; }
#sample1 a:visited { font-size:15px;color:green; }
#sample1 a:hover { font-size:16px;color:blue; }
#sample1 a:active { font-size:17px;color:black; }

#sample1 a:link { font-size:14px;color:red; }
#sample1 a:visited { font-size:15px;color:green; }
#sample1 a:hover { font-size:16px;color:blue; }
#sample1 a:active { font-size:17px;color:black; }

<div id="sample1"><a href="https://www.script-tutorials.com/about/">First sample link</a></div>

<div id="sample1"><a href="https://www.script-tutorials.com/about/">First sample link</a></div>

That was fine, but, commonly we can define really many different styles: font-family, font-weight, text-transform, white-space, and, one of interesting and important properties is: text-decoration. It can allow you to set custom decoration: we can remove underline, force underline, put line over link (overline), put line through text (line-through), and even set blinking (blink). More, we can combine these decorations (with splitting by space).

很好，但是通常我们可以定义很多不同的样式：字体系列，字体粗细，文本转换，空白，并且有趣而重要的属性之一是：文本装饰。 它可以让您设置自定义装饰：我们可以删除下划线，强制下划线，在链接上放置行(上划线)，在文本中放置行(直通)，甚至设置闪烁(闪烁)。 此外，我们可以结合使用这些装饰(按空间划分)。

样品2 (Sample 2)

Second sample link 第二个样本链接

#sample2 a:link { text-decoration:none; }
#sample2 a:visited { text-decoration:line-through; }
#sample2 a:hover { font-weight:bold;text-decoration:underline overline; }
#sample2 a:active { font-weight:bold;text-transform: uppercase; }

#sample2 a:link { text-decoration:none; }
#sample2 a:visited { text-decoration:line-through; }
#sample2 a:hover { font-weight:bold;text-decoration:underline overline; }
#sample2 a:active { font-weight:bold;text-transform: uppercase; }

<div id="sample2"><a href="https://www.script-tutorials.com/about/">Second sample link</a></div>

<div id="sample2"><a href="https://www.script-tutorials.com/about/">Second sample link</a></div>

A little about CSS3, Commonly, nothing changed here since first version of CSS (for links), here are same states: link,visited,active,hover. We can just use more different styles to customize our links. Like rounded corners, text shadow, text rotation etc.

关于CSS3的知识，通常，自CSS第一个版本(用于链接)以来，这里没有任何更改，这里的状态相同：链接，访问，活动，悬停。 我们可以使用更多不同的样式来自定义链接。 像圆角，文字阴影，文字旋转等。

结论 (Conclusion)

I hope that our new css article was interesting and useful for your projects. Good luck!

我希望我们的新CSS文章对您的项目很有趣并且有用。 祝好运！

翻译自: https://www.script-tutorials.com/css-link-how-to-customize-styles-of-your-links/