Σύνδεσμοι στυλ CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Με το CSS, οι σύνδεσμοι μπορούν να διαμορφωθούν με πολλούς διαφορετικούς τρόπους.

Text Link Text Link Link Button Link Button

Σύνδεσμοι στυλ

Οι σύνδεσμοι μπορούν να διαμορφωθούν με οποιαδήποτε ιδιότητα CSS (π.χ. χρώμα, font-family, φόντο, κ.λπ.).

Παράδειγμα

  a {
  color: hotpink;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: hotpink;
}
</style>
</head>
<body>

<h2>Style a link with a color</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

Επιπλέον, οι σύνδεσμοι μπορούν να διαμορφωθούν διαφορετικά ανάλογα με την κατάσταση στην οποία βρίσκονται.

Οι τέσσερις καταστάσεις των συνδέσμων είναι:

  • a:link - ένας κανονικός σύνδεσμος χωρίς επίσκεψη

  • a:visited - ένας σύνδεσμος που έχει επισκεφτεί ο χρήστης

  • a:hover - ένας σύνδεσμος όταν ο χρήστης τοποθετεί το ποντίκι πάνω του

  • a:active - ένας σύνδεσμος τη στιγμή που γίνεται κλικ

Παράδειγμα

/* unvisited link */
a:link {
  color: red;
}
/* visited 
link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: hotpink;
}
/* selected link */
a:active {
   
color: blue;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

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

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

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Όταν ορίζετε το στυλ για πολλές καταστάσεις συνδέσμων, υπάρχουν ορισμένοι κανόνες παραγγελίας:

  • Το a:hover ΠΡΕΠΕΙ να ακολουθήσει ένα:link και a:visited

  • Το a:active ΠΡΕΠΕΙ να έρθει μετά από ένα:hover

Διακόσμηση κειμένου

Η ιδιότητα text-decoration χρησιμοποιείται κυρίως για την αφαίρεση υπογραμμίσεων από συνδέσμους:

Παράδειγμα

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Styling a link with text-decoration property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Χρώμα του φόντου

Η ιδιότητα background-color μπορεί να χρησιμοποιηθεί για τον καθορισμό ενός χρώματος φόντου για συνδέσμους:

Παράδειγμα

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 
</style>
</head>
<body>

<h2>Styling a link with background-color property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Κουμπιά σύνδεσης

Αυτό το παράδειγμα δείχνει ένα πιο προηγμένο παράδειγμα όπου συνδυάζουμε πολλές ιδιότητες CSS για να εμφανίσουμε συνδέσμους ως πλαίσια/κουμπιά:

Παράδειγμα

a:link, a:visited {
  background-color: #f44336;
  
color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

Περισσότερα Παραδείγματα

Παράδειγμα

Αυτό το παράδειγμα δείχνει πώς μπορείτε να προσθέσετε άλλα στυλ σε υπερσυνδέσμους:

 a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover 
  {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: 
  #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: 
  #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: 
  #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: 
  #0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color: 
  #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; 
  text-decoration: none;}
a.five:hover {text-decoration: underline;}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

Παράδειγμα

Ένα άλλο παράδειγμα για το πώς να δημιουργήσετε πλαίσια/κουμπιά συνδέσμων:

 a:link, a:visited {
  background-color: white;
  color: black;
  
  border: 2px solid green;
  padding: 10px 20px;
  text-align: 
  center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active 
  {
  background-color: green;
  color: white;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

Παράδειγμα

Αυτό το παράδειγμα δείχνει τους διαφορετικούς τύπους δρομέων (μπορεί να είναι χρήσιμος για συνδέσμους):

 <span style="cursor: auto">auto</span><br>
<span style="cursor: 
  crosshair">crosshair</span><br>
<span style="cursor: 
  default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
  <span style="cursor: help">help</span><br>
<span style="cursor: 
  move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
  <span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: 
  nw-resize">nw-resize</span><br>
<span style="cursor: 
  pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
  <span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: 
  se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
  <span style="cursor: text">text</span><br>
<span style="cursor: 
  w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>The cursor Property</h2>

<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

</body>
</html>