css链接到另一个css_使用CSS创建时尚的链接

css链接到另一个css

基本CSS (Basic CSS)

In the early days of web, the blue and underlined text, interspersed among the black text and images on webpages was the standard for links.

在网络早期，链接的标准是蓝色和带下划线的文本，中间点缀在黑色文本和图像之间。

Nowadays, blue, underlined links may not fit the aesthetics of your design. We can style our underlined links with different colours, and in other ways too, such as buttons, text with icons and images.

如今，带有蓝色下划线的链接可能不适合您的设计美学。 我们可以为下划线的链接设置不同的颜色，也可以采用其他方式，例如按钮，带有图标的文字和图像。

Clean look versus clutter

干净的外观与混乱

In this article, I’ll take you through the default style of a link and then show you the common styles for links and how to create them in CSS:

在本文中，我将带您了解链接的默认样式，然后向您展示链接的常见样式以及如何在CSS中创建它们：

1. Default style
   默认样式
2. Links that look like any other text
   看起来像其他任何文本的链接
3. Buttons
   纽扣
4. Text accompanied with an icon
   带有图标的文字
5. Images as links
   图片作为链接

什么是链接？ (What is a link?)

Links connect one web resource to another.

链接将一个Web资源连接到另一个。

We use them to connect one website to another and navigate from one section to another on the same website. We also use links to trigger a new email draft on a user’s email client, a phone call, and file downloads.

我们使用它们将一个网站连接到另一个网站，并在同一网站上从一个部分导航到另一部分。 我们还使用链接在用户的电子邮件客户端，电话和文件下载上触发新的电子邮件草稿。

All these functionality depends on your HTML code. Details can be found in my article on The Anatomy of HTML links (which conveniently illustrates how a link looks in a Medium article).

所有这些功能取决于您HTML代码。 可以在我HTML链接剖析文章中找到详细信息(该文章方便地说明了Medium文章中链接的外观)。

Creating a link is as easy as writing a line in a HTML document.

创建链接就像在HTML文档中写一行一样容易。

<a href=”https://www.google.com”>Click me</a>

By default, browsers render the above link as underlined text in blue, which is a remnant style from the early days of web. Despite being that being the default style, we hardly see these traditional styled links on modern websites.

默认情况下，浏览器将上述链接呈现为带下划线的蓝色文本，这是Web早期的残余样式。 尽管这是默认样式，但在现代网站上我们几乎看不到这些传统样式的链接。

Unvisited link that’s hovered over

悬停的未访问链接

Active link

活动链接

Visited link

造访链接

The default style admittedly has the advantage of making a link obvious but the downside is that it results in visual clutter and can potentially overwhelm users. As users are now used to links that look like regular text by now, a clean design takes precedence over having obvious links.

当然，默认样式具有使链接显而易见的优点，但缺点是它会导致视觉混乱，并可能使用户不知所措。 现在，由于用户现在已经习惯于使用看起来像普通文本的链接，因此干净的设计优先于拥有明显的链接。

Ollie Williams, author on CSS Tricks, shares some examples:

CSS Tricks的作者Ollie Williams分享了一些示例：

popular websites have ditched underlines: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. When they removed underlines from their search results page in 2014, Google lead designer Jon Wiley argued that it created a cleaner look.

流行的网站都强调了以下内容：《纽约时报》，《纽约杂志》，《华盛顿邮报》，彭博社，亚马逊，苹果公司，GitHub，Twitter，维基百科。 Google首席设计师Jon Wiley于2014年从搜索结果页上删除了下划线时，辩称其外观更加简洁。

Screencap of 1990s Yahoo.com

1990年代Yahoo.com的屏幕截图

1.看起来像其他任何文本的链接 (1. Links that look like any other text)

加粗字体 (BOLD TEXT)

Medium is an example of a site that uses this particular style on the titles of articles on its homepage. 媒介是网站的示例，该网站在其首页的文章标题上使用了这种特定样式。

This can be created with the use of text-decoration, color and font-weight properties of the anchor tag:

这可以通过使用定位标记的text-decoration, color和font-weight属性来创建：

• Text-decoration is given a value of none to remove the underlined style on the anchor tag

  Text-decoration的值设置为none以删除锚标记上带下划线的样式

• Color: black and font-weight: bold colours the bolded text in black.

  Color: black和font-weight: bold将font-weight: bold为black 。

结果 (Result)

码 (Code)

https://www.google.com https://www.google.com

Note: This style has to be applied with care and with consistency. If used, it should only be reserved for links. Any content that needs to be emphasised should not be styled as bold text to avoid confusing users.

注意：必须谨慎且一致地应用此样式。 如果使用，则应仅保留用于链接。 任何需要强调的内容都不应设置为粗体，以免引起用户混淆。

Hence, it is important to ensure that the cursor shows up when the mouse hovers over it.

因此，重要的是要确保当鼠标悬停在光标上时光标会出现。

扩展文本 (SPACED OUT TEXT)

Google.com uses this style for its links in its header and footer, and this is a common web design. Underlined text is shown in its hover state (when the cursor touches the link). Google.com在页眉和页脚中使用此样式进行链接，这是一种常见的网页设计。 带下划线的文本将以其悬停状态显示(当光标触摸链接时)。

To create this style, use text-decoration, color, and margin:

要创建此样式，请使用text-decoration, color,和margin:

• ext-decoration and color to create black text that is not underline and

  ext-decoration和color创建非下划线的黑色文本，

• margin to create the spaces between the links.

  在链接之间创建空格的margin 。

• a:hover selector to add the underlined style to the plain text in hover state.

  a:hover选择器，用于将带下划线的样式添加到处于悬停状态的纯文本中。

Note: The text-decoration is removed in all states before we add it back to the hover state using the a:hover selector.

注意：在使用a:hover选择器将其重新添加到悬停状态之前，所有状态下的文本修饰都会被删除。

结果 (Result)

码 (Code)

Note: While padding gives us the same visual effect, we use margin to create spaces between HTML elements.

注意：虽然padding为我们提供了相同的视觉效果，但我们使用边距在HTML元素之间创建空格。

2.看起来像按钮的链接 (2. Links that looks like a button)

Creating a button-like link can be simple or complex, depending on whether you want to throw in a pressed button effect.

创建一个类似按钮的链接可能很简单，也可能很复杂，具体取决于您是否想按下按钮效果。

Afternote: A reader alerted me that we should include role=”button” in the html for clickable elements that trigger a response when activated by the user. This will make an element appear as a button control to a screen reader. For details, please read MDN documentation on ARIA: button role.

后记：一位读者警告我，我们应该 在html中 包含 role=”button” ，以包含可点击的元素，这些元素在用户激活时会触发响应。 这将使元素显示为屏幕阅读器的按钮控件。 有关详细信息，请阅读 有关ARIA的MDN文档：按钮角色 。

悬停时更改背景颜色 (CHANGES BACKGROUND COLOUR WHEN HOVERED)

Medium uses a simple style for its button. The bright green darkens when the mouse hovers over it.

中号的按钮使用简单的样式。 当鼠标悬停在上面时，亮绿色变暗。

To create this effect,

为了产生这种效果，

• remove the underlined text using text-decoration: none,

  使用text-decoration: none删除带下划线的文本text-decoration: none ，

• add space within the button using padding,

  使用padding在按钮内添加空间，

• change the background-color,

  更改background-color,

• add a darker background-color in its hover state.

  在其悬停状态background-color添加较深的background-color 。

font-family and border-radius are set just to make the link look more like those on Medium.

font-family和border-radius只是为了使链接看起来更像Medium。

结果 (Result)

码 (Code)

悬停时更改字体颜色 (CHANGES FONT COLOUR WHEN HOVERED)

Booking.com has a link that changes the font colour of its link when hovered.

Booking.com的链接在悬停时会更改其链接的字体颜色。

To create the effect, you only need to change the value of the color property of a:hover selector. The rest of the changes are similar to the previous example albeit with tweaks to make it look more like the links on Booking.com.

要创建效果，只需更改a:hover选择器的color属性值即可。 其余更改与前面的示例相似，但是进行了一些调整，使其看起来更像Booking.com上的链接。

结果 (Result)

码 (Code)

3.带有图标的链接 (3. Links with an icon)

Apple uses a link accompanied with a chevron icon for its product navigation links. Apple使用带有人字形图标的链接作为其产品导航链接。

We can create a link with an icon using the icons from Font Awesome. Like before, we need to remove the underlined text on the link, and then add back to the a:hover selector.

我们可以使用Font Awesome中的图标创建带有图标的链接。 和以前一样，我们需要删除链接上带下划线的文本，然后再添加回a:hover选择器。

To create this effect,

为了产生这种效果，

• add the icon to the html file (using the html code stated on Font Awesome),

  将图标添加到html文件(使用Font Awesome上说明的html代码)，

• remove the underlined text using text-decoration: none,

  使用text-decoration: none删除带下划线的文本text-decoration: none ，

• add space between the text and icon with margin,

  在文本和图标之间加margin ，

• change the text color,

  更改文字color,

• add back the underline style in its hover state.
  在其悬停状态下添加下划线样式。

结果 (Result)

码 (Code)

4.图片作为链接 (4. Images as links)

Another often used style is to surround an image with an anchor tag, thus creating a link out of an image. Strictly speaking, this isn’t really a style as we don’t need CSS to create this style.

另一种常用的样式是用锚标签将图像包围起来，从而创建图像之外的链接。 严格来说，这并不是真正的样式，因为我们不需要CSS来创建这种样式。

For this, instead of text being used as the source anchor (the content between the <a></a>, we add an image instead.

为此，我们添加一个图像代替使用文本作为源锚( <a></a>之间的内容)。

Microsoft. Microsoft 。

To create this effect, you only need to add an img element in the HTML document, and the image will become clickable.

要创建此效果，只需在HTML文档中添加一个img元素，该图像将变为可单击的。

结果 (Result)

码 (Code)

作者注 (Author’s note)

Photo by Luca Onniboni on Unsplash

Luca Onniboni在 Unsplash上 拍摄的照片

The link styles in this article are commonly seen on websites. Although they may not look like traditional blue and unlined text links, we have become so used to such design that usability is no longer an issue as we can easily tell a link apart from normal text based on its context.

本文中的链接样式在网站上很常见。 尽管它们看起来不像传统的蓝色和无衬线的文本链接，但是我们已经习惯了这种设计，以至于可用性不再是问题，因为我们可以根据上下文轻松区分与普通文本不同的链接。

I deliberately left out the styling of the active and visited state of a link as I seldom come across them these days. But if you do want to style them, you can always target the states using the following pseudo classes:

这些天，我很少碰到它们，所以特意省去了链接的活动状态和访问状态的样式。 但是，如果确实要设置样式，则可以始终使用以下伪类来定位状态：

• a:link: an unvisited, unclicked link

  a:link ：未访问，未单击的链接

• a:visited: a visited, clicked link

  a:visited ：访问过的，单击的链接

• a:hover: a link when the user’s mouse is over it

  a:hover ：用户鼠标a:hover在其上时的链接

• a:active: a link when it is clicked

  a:active ：单击时的链接

翻译自: https://blog.prototypr.io/create-stylish-links-with-css-983d33102f5a

css链接到另一个css