CSS链接用法参考指南和示例

2021年4月10日11:59:49 发表评论 977 次浏览

链接是从一个网页到另一网页的连接。 CSS属性可用于以各种不同方式设置链接的样式。

链接状态:

在讨论CSS属性之前, 了解链接的状态很重要。链接可以以不同的状态存在, 并且可以使用伪类对它们进行样式设置。

下面给出了四种链接状态:

  • 一条链接=>这是一个普通的, 未访问的链接。
  • 答:已访问=>这是用户至少访问过一次的链接
  • 悬停=>这是鼠标悬停在其上时的链接
  • a:活跃=>这是一个单击的链接。

语法如下:

a:link {
    color:color_name;
}

color_name可以以任何格式指定, 例如颜色名称(绿色), 十六进制值(#5570f0)或RGB值rgb(25, 255, 2)。还有一种状态" a:focus", 当用户使用Tab键浏览链接时, 该状态用于聚焦。

链接的默认值:

  • 默认情况下, 创建的链接带有下划线。
  • 当鼠标悬停在链接上方时, 它将变为手形图标。
  • 正常/未访问的链接为蓝色。
  • 访问过的链接显示为紫色。
  • 活动链接显示为红色。
  • 当一个链接集中时, 它周围有一个轮廓。

例子

<!DOCTYPE html>
<html>
     <head>
         <title>CSS links</title>
         <style>
             p {
                 font-size: 25px;
                 text-align: center;
             }
          
         </style>
     </head>
  
     <body>
     <p><a href = "https://www.lsbin.org/">lsbin Simple Link</a></p>
     </body>    
</html>

输出如下:

链接属性

链接的CSS属性:链接的一些基本CSS属性如下所示:

  • 颜色
  • 字体系列
  • 文字装饰
  • 背景颜色

颜色:

此CSS属性用于更改链接文本的颜色。

语法如下:

a {
    color: color_name;
}

例子:

<!DOCTYPE html>
<html>
     <head>
         <title>Link color property</title>
         <style>
             p {
                 font-size: 20px;
                 text-align:center;
             }
          
             /*unvisited link will appear green*/
             a:link{
                 color:red;
             }
          
             /*visited link will appear blue*/
             a:visited{
                 color:blue;
             }
          
             /*when mouse hovers over link it will appear orange*/
             a:hover{
                 color:orange;
             }
          
             /*when the link is clicked, it will appear black*/
             a:active{
                 color:black;
             }
          
         </style>
     </head>
      
     <body>
         <p><a href = "https://www.lsbin.org/">lsbin</a> 
          This link will change colours with different states.</p>
     </body>    
</html>

输出如下:

色彩装饰

字体系列:

此属性用于使用font-family属性更改链接的字体类型。

语法如下:

a {
    font-family: "family name";
}

例子:

<!DOCTYPE html>
<html>
     <head>
         <style>
             /*Inintial link font family arial*/
             a {
                 font-family:Arial; 
             }
             p {
                 font-size: 30px;
                 text-align:center;
             }
          
             /*unvisited link font family*/
             a:link{
                 color:Arial;
             }
          
             /*visited link font family*/
             a:visited{
                 font-family:Arial;
             }
          
             /*when mouse hovers over it will change to times new roman*/
             a:hover{
                 font-family:Times new roman;
             }
          
             /*when the link is clicked, it will changed to Comic sans ms*/
             a:active{
                 font-family:Comic Sans MS;
             }
         </style>
     </head>
  
     <body>
         <p><a href = "https://www.lsbin.org/"
         id = "link">lsbin</a> a Computer Science
         Portal for Geeks.</p>
     </body>
</html>

输出如下:

链接字体家族

文字装饰:

此属性基本上用于从链接删除/向链接添加下划线。

语法如下:

a {
    text-decoration: none;
}

例子:

<!DOCTYPE html>
<html>
     <head>
         <title>Text decoration in link</title>
         <style>
          
             /*Set the font size for better visibility*/
             p {
                 font-size: 2rem;
             }
              
             /*Removing underline using text-decoration*/
             a{
                 text-decoration: none;
             }
             /*underline can be added using
             text-decoration:underline; 
             */
         </style>
     </head>
     <body>
         <p><a href = "https://www.lsbin.org/" id = "link">lsbin</a> a Computer Science
         Portal for Geeks.</p>
     </body>    
</html>

输出如下:

链接文字装饰

背景颜色:

此属性用于设置链接的背景颜色。

语法如下:

a {
    background-color: color_name;
}

例子:

<!DOCTYPE html>
<html>
     <head>
         <title>background color</title>
         <style>
             /*Setting font size for better visibility*/
             p{
                 font-size: 2rem;
             }
             /*Designing unvisited link button*/
             a:link{
                 background-color: powderblue;
                 color:green;
                 padding:5px 5px;
                 text-decoration: none;
                 display: inline-block;
             }
          
             /*Designing link button when mouse cursor hovers over it*/
             a:hover{
                 background-color: green;
                 color:white;
                 padding:5px 5px;
                 text-align: center;
                 text-decoration: none;
                 display: inline-block;
             }
         </style>
     </head>
     <body>
         <p><a href = "https://www.lsbin.org/" id = "link">
          lsbin</a> a Computer Science Portal for Geeks.</p>
     </body>    
</html>

输出如下:

链接背景色

CSS链接按钮:

CSS链接也可以使用按钮/框设置样式。以下示例显示了如何将CSS链接设计为按钮。

例子:

<!DOCTYPE html>
<html>
     <head>
         <title>Link button</title>
         <style>
             /*Setting font size for better visibility*/
             p{
                 font-size: 2rem;
             }
             a {
                 background-color: green;
                 color:white;
                 padding:5px 5px;
                 border-radius:5px;
                 text-align: center;
                 text-decoration: none;
                 display: inline-block;
             }
         </style>
     </head>
     <body>
         <p><a href = "https://www.lsbin.org/" id = "link">
      lsbin</a> a Computer Science Portal for Geeks.</p>
     </body>        
</html>

输出如下:

链接按钮

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: