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
state that they are in.
links, but they can also be styled according to the state
可以⽤许多不同的⽅式来设置超链接的样式，当然，颜⾊，字体系列，背景等也可以。链接确实可以使⽤属性，但是也可以根据它们所处状态来设置超链接的样式。
的状态
There are four types of states a link can be in:
链接可以处于四种状态：
a:link → A normal, unvisited link.
a:link
a：link
a：link →正常的未访问链接。
a:visited → A link that the user has visited(clicked on) before.
a:visited
a：visited →⽤户之前访问(单击)的链接。
a：visited
a:hover → When the user moves the mouse over the link.
a:hover
a：悬停 →当⽤户将⿏标移到链接上时。
a：悬停
a:active → The moment a link is clicked.
a:active
a：活动
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; }
Recall the text-decoration property we studied previously. The text decoration property is used to chan
ge 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;
}
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元素/标记⼀起使⽤。
将链接样式化为按钮 (Styling Links into Buttons)
We can even style our links to look like rectangular buttons, changing color on hover, just like the ones below:
invalids我们甚⾄可以设置链接样式，使其看起来像矩形按钮，在悬停时更改颜⾊，就像下⾯的链接⼀样：
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 .
这些链接的样式令⼈惊讶。 ⼀旦完成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的下⼀个层次了。 接下来是列表，表格和边框设计。 继续！ 下节课见！
html链接css样式⽆效

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。