html链接css样式无效_CSS样式HTML链接

html链接css样式无效

Hyperlinks are the backbone of webpages. It allows us to interlink a group of webpages making it a website. With CSS, you can greatly modify the appearance of these links and make your webpage even more appealing

超链接是网页的基础。 它使我们能够将一组网页链接成一个网站。 使用CSS，您可以极大地修改这些链接的外观，并使您的网页更具吸引力

As you are well aware of, links in HTML are created using the <a> (anchor) tag.

如您所知，HTML中的链接是使用<a> (锚)标记创建的。

Example:

例：

a {
    font-size: 12px;
    color: #222222;
}

Hyperlinks can be styled in many different ways, of course, the color, font-family, background etc. properties do work for links, but they can also be styled according to the state that they are in.

可以用许多不同的方式来设置超链接的样式，当然，颜色，字体系列，背景等也可以。链接确实可以使用属性，但是也可以根据它们所处的状态来设置超链接的样式。

There are four types of states a link can be in:

链接可以处于四种状态：

• a:link → A normal, unvisited link.

  a：link →正常的未访问链接。

• a:visited → A link that the user has visited(clicked on) before.

  a：visited →用户之前访问(单击)的链接。

• a:hover → When the user moves the mouse over the link.

  a：悬停 →当用户将鼠标移到链接上时。

• a:active → The moment a link is clicked.

  a：活动 →单击链接的那一刻。

When setting the style for the link states, a few rules need to be kept in mind.

在设置链接状态的样式时，需要牢记一些规则。

• a:hover always comes after a:link and a:visited

  a:hover总是在a:link和a:visited

• a:active always comes after a:hover

  a:active总是在a:hover

Consider the following example:

考虑以下示例：

/* unvisited link */
a:link { color: #00ffff; }

/* visited link */
a:visited { color: #808080; }

/* mouse over link */
a:hover { color: #000088; }

/* selected link */
a:active { color: #0000ff; }

Live Example →

现场示例→

Recall the text-decoration property we studied previously. The text decoration property is used to change the appearance of your links, such as removal of underlines or adding cross-lines to it. Also, let's go back to the background properties. Links can be styled in different ways using the class and id selectors. All these properties work with the <a> tag, so feel free to experiment as you like.

回想一下我们之前研究过的text-decoration属性。 文本修饰属性用于更改链接的外观，例如删除下划线或向其添加交叉线。 另外，让我们回到背景属性。 可以使用class和id选择器以不同的方式设置链接的样式。 所有这些属性都可以与<a>标记一起使用，因此可以随意尝试。

小变化，大影响cursor:pointer; (Small change with Big impact cursor:pointer;)

Whenever we hover over a link, the mouse cursor changes from an arrow into a hand pointer. Have you ever thought why? Or How? It is accomplished using the property cursor. It can take various different values, of which pointer is one.

每当我们将鼠标悬停在链接上时，鼠标光标就会从箭头变为指针。 你有没有想过为什么？ 或如何？ 这是使用属性cursor完成的。 它可以采用各种不同的值，其中pointer为1。

a:hover { 
    color: #000088;cursor: pointer;
}

Live Example →

现场示例→

Following are some of the commonly used values for cursor property:

以下是一些cursor属性的常用值：

• cursor:crosshair

  cursor:crosshair

• cursor:help

  cursor:help

• cursor:move

  cursor:move

• cursor:pointer

  cursor:pointer

• cursor:progress

  cursor:progress

• not-allowed

  not-allowed

• cursor:wait etc.

  cursor:wait等。

Also, its not mandatory that this must be used on links only, this can be used with any HTML element/tag.

同样，这不是强制性的，只能在链接上使用，它可以与任何HTML元素/标记一起使用。

Live Example →

现场示例→

将链接样式化为按钮 (Styling Links into Buttons)

We can even style our links to look like rectangular buttons, changing color on hover, just like the ones below:

我们甚至可以设置链接样式，使其看起来像矩形按钮，在悬停时更改颜色，就像下面的链接一样：

Small Green Button  Medium Blue Button  Large White Button

小绿色按钮 中蓝色按钮 大白色按钮

These are links styled to amaze. We will learn how this is done, once we are done with margin and padding. If you cannot stop yourself from checking out the CSS code for styling links like these buttons, go checkout the tutorial.

这些链接的样式令人惊讶。 一旦完成margin和padding ，我们将学习如何完成此操作。 如果您无法阻止自己检出CSS样式的样式链接(如这些按钮)，请查阅教程 。

Phew! By now, you have studied all about selectors, backgrounds and fonts. It’s now time to move on to the next level in CSS. Next up is lists, tables and border designs. Keep Going! See you in the next lesson!

！ 到目前为止，您已经研究了有关选择器，背景和字体的所有内容。 现在是时候进入CSS的下一个层次了。 接下来是列表，表格和边框设计。 继续！ 下节课见！

翻译自: https://www.studytonight.com/cascading-style-sheet/styling-links

html链接css样式无效