CSS 如何将外部链接样式设置成像 Wikipedia 那样

在本文中，我们将介绍如何使用 CSS 样式将外部链接设置成像维基百科（Wikipedia）那样。维基百科是全球知名的在线百科全书网站，它使用了一种独特的样式来突出显示外部链接，这样可以提醒读者该链接指向的是外部网站。

阅读更多：CSS 教程

选择外部链接

首先，我们需要确定哪些链接是外部链接。在 HTML 中，可以使用 target="_blank" 属性来指示链接在新窗口中打开。外部链接通常会在新窗口或新标签页中打开以避免用户离开当前网页。

<a href="http://example.com" target="_blank">外部链接示例</a>

在上面的示例中，target="_blank" 属性告诉浏览器在新窗口中打开链接。

使用伪类选择器

要为外部链接设置样式，我们可以使用 CSS 伪类选择器 :external。这个伪类选择器可以选中所有的外部链接，并对其应用特定的样式。为了使用 :external，我们需要使用 JavaScript 或者使用 rel="external" 属性标记外部链接。

<a href="http://example.com" rel="external">外部链接示例</a>

请注意，在 JavaScript 中使用 :external 选择器需要一些额外的代码，而使用 rel="external" 属性则更简单。

样式设置

接下来，我们可以使用 CSS 来设置外部链接的样式。通常，维基百科使用了以下样式来突出显示外部链接：

a:external {
  background-color: #FFFFE0;
  color: #228B22;
  font-weight: bold;
  text-decoration: underline;
}

上述 CSS 代码将为外部链接设置了黄色背景色，绿色字体颜色，加粗的字体权重和下划线的文本装饰。

示例

为了更好地理解如何设置外部链接样式，我们来看一个具体的示例。

假设我们有以下 HTML 代码：

<p>
  了解更多信息，请访问 <a href="http://example.com" rel="external">示例网站</a>。
</p>
<p>
  <a href="http://wikipedia.org" rel="external">维基百科链接</a>
</p>

可以看到，第一个链接拥有 rel="external" 属性，而第二个链接则没有。

接下来，我们可以在 CSS 中使用 a:external 伪类选择器来对这些链接进行不同的样式设置：

a:external {
  background-color: #FFFFE0;
  color: #228B22;
  font-weight: bold;
  text-decoration: underline;
}

a:link:not([href^="http://"]) {
  color: #0000EE;
  text-decoration: none;
}

上述 CSS 代码首先为外部链接设置了黄色背景色，绿色字体颜色，加粗的字体权重和下划线的文本装饰。

同时，我们还使用了 :not 伪类选择器和属性选择器 [href^="http://"] 来选择所有非外部链接，并将其颜色设置为蓝色，并取消下划线的装饰。

上述代码可以将示例中的两个链接分别设置成不同的样式。

总结

通过使用 CSS，我们可以很容易地将外部链接样式设置成像维基百科那样。通过选择外部链接，使用伪类选择器和样式设置，我们可以突出显示外部链接并给予其特殊的样式，以提醒用户该链接指向的是外部网站。希望本文能够为你学习和理解 CSS 样式设置外部链接提供一些帮助。

以上就是关于如何将外部链接样式设置成像维基百科那样的介绍。希望通过阅读本文，你能够更好地掌握这方面的知识。