Die Anleitung zu CSS Links

View more Tutorials:

1- CSS Link States

Link ist ein der wichtigsten Parten einer Seite.  CSS hilft Ihnen bei der Festlegung des Stil und Hervohebung des Status der Link.
Eine Link hat 3 Status:
  1. Link (Unvisited)
  2. Visited
  3. Hover
  4. Focus
  5. Active

Link (unvisited)

Der Status  unvisited (nicht besucht) wird als auch den Status  link bezeichnet. Das ist der Default-Status einer Link, der zeigt, dass der Benutzer nie die durch die Link angegebene Addresse besucht.
Wenn der Benutzer eine Addresse jemals besucht hat, wird ein Protokoll im Browserverlauf gespeichert. Die Browsers erlauben den Benutzer jedoch, alle diese Verlaufprotokolle zu löschen.
Verwenden Sie die Klasse pseudo :link um das Stil für diesen Status festzulegen.

Visited

Der Status gibt an, dass der Benutzer die durch die Link angegebene Addresse besucht hat. Mit anderen Worten ist es eine Aufzeichnung des Besuch im Verlauf vom Browser vorhanden.
Verwenden Sie die Klasse pseudo :visited um das Stil dieses Status einzustellen.

Hover

Das ist der Zustand wenn der Benutzer den Mauszeiger über die Link bewegt. Verwenden Sie die Klasse pseudo :hover um das Stil für diesen Zustand einzustellen.

Focus

Der Status wenn der Benutzer auf eine Link fokusiert, z.B der Benutzer klickt auf  TAB um nach dieser Link zu ziehen oder  ruft das Method  HTMLElement.focus() um nach dieser Link zu ziehen. Verwenden Sie die Klasse pseudo :focus um das Stil für diesen Zustand einzustellen.

Active

Der Status einer Link  wenn es aktiviert wird ( activated), insbesondere, wenn der Benutzer die Maus auf die Link drückt, aber die Maus nicht freigibt. Notiz: Nachdem der Benutzer die Maus freigibt, wird die Link nach dem Status  Focus wechseln.
Sehen Sie das ganze Beispiel von 5 Status einer Link:
page.css
/* unvisited link */
a:link, .link {
  color: red;
}

/* visited link */
a:visited, .visited {
  color: green;
}

/* mouse over link */
a:hover, .hover {
  color: hotpink;
}


/* focus link */
a:focus, .focus {
  color: blue;
  font-weight: none;
}

/* selected link */
a:active, .active {
  color: darkblue;
  font-weight: bold;
}
page1.html
<!DOCTYPE html>
<html>
   <head>
      <title>Link States</title>
      <meta charset="UTF-8"/>

      <link rel="stylesheet" href="page.css" />
   </head>
   <body>
       <h1>page1.html</h1>
       <h3>CSS link states:</h3>
       <ol>
          <li class="link">a:link</li>
          <li class="visited">a:visited</li>
          <li class="hover">a:hover</li>
          <li class="focus">a:focus</li>
          <li class="active">a:active</li>
       </ol>

       <a href="page2.html">
          Go to page2.html
       </a>

   </body>
</html>
page2.html
<!DOCTYPE html>
<html>
   <head>
      <title>Link States</title>
      <meta charset="UTF-8"/>

      <link rel="stylesheet" href="page.css" />
   </head>
   <body>
       <h1>page2.html</h1>
       <h3>CSS link states:</h3>
       <ol>
          <li class="link">a:link</li>
          <li class="visited">a:visited</li>
          <li class="hover">a:hover</li>
          <li class="focus">a:focus</li>
          <li class="active">a:active</li>
       </ol>

       <a href="page1.html">
          Go to page1.html
       </a>

   </body>
</html>
Ein weiteres einfaches Beispiel über 5 Status einer Link:
link-states-example.css
a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}
link-states-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Link States</title>
      <meta charset="UTF-8"/>

      <link rel="stylesheet" href="link-states-example.css" />
   </head>
   <body>
       <h3>CSS Link State Example:</h3>


       <p>There are several browsers available, such as
         <a href="#">Mozilla Firefox</a>,
         <a href="#">Google Chrome</a>, and
         <a href="#">Microsoft Edge</a>.
       </p>

   </body>
</html>

2- CSS text-decoration

Standardmäßig haben die Links normalerweise einen Unterstrich (underline). Wir benutzen oft  CSS text-decoration mit der Wert von  none um diesen Unterstrich (underline) zu löschen.
Die möglichen Werte von  CSS text-decoration:
  • overline
  • line-through
  • underline
  • none
text-decoration-example.css
a:link {
     text-decoration: none;
}

 a:visited {
     text-decoration: none;
}

 a:hover {
     text-decoration: underline;
     background-color: #BAE498;
}

 a:focus {
     text-decoration: underline;
     font-weight: normal;
}

 a:active {
     text-decoration: underline;
     color: red;
     font-weight: bold;
}
text-decoration-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS Link text-decoration</title>
      <meta charset="UTF-8"/>

      <link rel="stylesheet" href="text-decoration-example.css" />
   </head>
   <body>
       <h3>CSS text-decoration</h3>


       <a href="#">
          This is a Link
       </a>

   </body>
</html>
Mehr sehen:

3- CSS Link Button

Unter finden Sie ein erweitertes Beispiel, in dem mehrere  CSS Properties kombiniert werden, damit eine Link wie einen Button aussieht.
link-button-example.css
a {
    display: inline-block;
    background-color: #eaf1dd;
    color: #060;
    text-decoration: none;
    padding: 6px 4px;
    margin: 4px;
    border-right: 2px solid #999999;
    border-bottom: 2px solid #999999;
    border-top-width: 0px;
    border-left-width: 0px;
}

a:hover
{
    color: #030;
    border: 1px solid #9999ff;
}

a:active
{
    color: #aca;
    border-left: 2px solid #030;
    border-top: 2px solid #030;
    border-right-width: 0px;
    border-bottom-width: 0px;
}
link-button-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Link Button</title>
      <meta charset="UTF-8"/>

      <link rel="stylesheet" href="link-button-example.css" />
   </head>
   <body>
       <h1>Link Button</h1>

       <div>
         <a href="#">Apple</a>
         <a href="#">Facebook</a>
         <a href="#">Google</a>
        </div>

   </body>
</html>

View more Tutorials: