Στο CSS, το στοιχείο outline χρησιμοποιείται για να ορίσει μια γραμμή που σχεδιάζεται έξω από το περίγραμμα (border) ενός στοιχείου. Η γραμμή του outline δεν επηρεάζει τη θέση ή το μέγεθος του στοιχείου, αλλά παρέχει έναν οπτικό τρόπο για να τονίσετε ή να δείξετε κάποιο ξεχωριστό χαρακτηριστικό.
Η ιδιότητα outline μπορεί να λάβει τις εξής τιμές:
outline-width: Ορίζει το πλάτος της γραμμής τουoutline. Μπορεί να είναι μια συγκεκριμένη τιμή σε μονάδες μέτρησης (π.χ. px) ή μπορεί να χρησιμοποιηθούν προκαθορισμένες τιμές όπωςthin,medium,thick.outline-style: Ορίζει το στυλ της γραμμής τουoutline. Μπορεί να είναι μια από τις προκαθορισμένες τιμές όπωςsolid,dotted,dashed,double, κ.λπ.outline-color: Ορίζει το χρώμα της γραμμής τουoutline. Μπορεί να είναι μια από τις προκαθορισμένες τιμές όπως χρωματικές ονομασίες (red,blue, κ.λπ.), HEX τιμές (#ff0000,#00ff00, κ.λπ.), ή τιμές RGB/RGBA (rgb(255, 0, 0),rgba(0, 0, 255, 0.5), κ.λπ.).
Παρακάτω παρατίθεται ένα παράδειγμα που δείχνει τη χρήση της ιδιότητας outline:
.element {
/* Ορίζει το πάχος της περίγραμμα γραμμής σε 2px */
outline-width: 2px;
/* Ορίζει το στυλ της περίγραμμα γραμμής σε dotted (διάκενη γραμμή) */
outline-style: dotted;
/* Ορίζει το χρώμα της περίγραμμα γραμμής σε κόκκινο */
outline-color: red;
}
Αυτός ο κώδικας θα ορίσει μια γραμμή του outline με πλάτος 2px, στυλ dotted και χρώμα κόκκινο για το στοιχείο με κλάση element.
[adinserter block=”2″]
Παρακάτω παρατίθεται ένα παράδειγμα που δείχνει τις διάφορες τιμές της ιδιότητας outline-style:
.element {
/* Ορίζει το πάχος του περιγράμματος σε 2px */
outline-width: 2px;
}
.dotted {
/* Ορίζει το στυλ του περιγράμματος σε dotted (τελείες) */
outline-style: dotted;
}
.dashed {
/* Ορίζει το στυλ του περιγράμματος σε dashed (παύλες) */
outline-style: dashed;
}
.solid {
/* Ορίζει το στυλ του περιγράμματος σε solid (συνεχές) */
outline-style: solid;
}
.double {
/* Ορίζει το στυλ του περιγράμματος σε double (διπλό) */
outline-style: double;
}
.groove {
/* Ορίζει το στυλ του περιγράμματος σε groove (λακκούβα) */
outline-style: groove;
}
.ridge {
/* Ορίζει το στυλ του περιγράμματος σε ridge (ανάγλυφο) */
outline-style: ridge;
}
.inset {
/* Ορίζει το στυλ του περιγράμματος σε inset (εσοχή) */
outline-style: inset;
}
.outset {
/* Ορίζει το στυλ του περιγράμματος σε outset (προεξοχή) */
outline-style: outset;
}
.none {
/* Αφαιρεί το περίγραμμα */
outline-style: none;
}
.hidden {
/* Κρύβει το περίγραμμα */
outline-style: hidden;
}
Παρακάτω παραθέτω ένα παράδειγμα HTML κώδικα που χρησιμοποιεί τους παραπάνω κανόνες CSS για να εφαρμόσει διάφορα στυλ περιγραμμάτων (outlines) σε στοιχεία:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα Χρήσης Περιγραμμάτων (Outlines) με CSS</title>
<style>
.element {
outline-width: 2px;
}
.dotted {
outline-style: dotted;
}
.dashed {
outline-style: dashed;
}
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
.none {
outline-style: none;
}
.hidden {
outline-style: hidden;
}
</style>
</head>
<body>
<h1 class="element">Κείμενο με περίγραμμα (2px)</h1>
<h2 class="dotted">Κείμενο με περίγραμμα (dotted)</h2>
<h3 class="dashed">Κείμενο με περίγραμμα (dashed)</h3>
<p class="solid">Κείμενο με περίγραμμα (solid)</p>
<p class="double">Κείμενο με περίγραμμα (double)</p>
<p class="groove">Κείμενο με περίγραμμα (groove)</p>
<p class="ridge">Κείμενο με περίγραμμα (ridge)</p>
<p class="inset">Κείμενο με περίγραμμα (inset)</p>
<p class="outset">Κείμενο με περίγραμμα (outset)</p>
<p class="none">Κείμενο χωρίς περίγραμμα (none)</p>
<p class="hidden">Κείμενο με κρυμμένο περίγραμμα (hidden)</p>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε διάφορα στοιχεία HTML (όπως τίτλοι και παράγραφοι) που έχουν εφαρμοστεί σε αυτά διάφορα περίγραμματα (outlines) με χρήση των κλάσεων CSS που ορίζονται στο <style> τμήμα.
Η ιδιότητα outline-width ορίζει το πλάτος του outline και μπορεί να έχει μία από τις εξής τιμές:
- thin: Συνήθως αντιστοιχεί σε πάχος περίπου 1px.
- medium: Συνήθως αντιστοιχεί σε πάχος περίπου 3px.
- thick: Συνήθως αντιστοιχεί σε πάχος περίπου 5px.
- Ένα συγκεκριμένο μέγεθος (σε px, pt, cm, em, κλπ.).
Παρακάτω παρουσιάζεται ένα παράδειγμα που δείχνει διάφορα πλάτη outline:
.element {
/* Ορίζει το στυλ της περίγραμματος σε solid (συνεχές περίγραμμα) */
outline-style: solid;
}
.thin {
/* Ορίζει το πάχος του περίγραμματος σε thin (λεπτό) */
outline-width: thin;
}
.medium {
/* Ορίζει το πάχος του περίγραμματος σε medium (μεσαίο) */
outline-width: medium;
}
.thick {
/* Ορίζει το πάχος του περίγραμματος σε thick (παχύ) */
outline-width: thick;
}
.custom {
/* Ορίζει ένα προσαρμοσμένο πάχος του περίγραμματος σε 8px */
outline-width: 8px;
}
Στο παραπάνω παράδειγμα, ορίζονται διάφορες κλάσεις για το στοιχείο με κλάση .element, και καθεμία έχει διαφορετική τιμή για την ιδιότητα outline-width. Μπορείτε να δείτε τη διαφορά στο πλάτος της γραμμής outline για κάθε τιμή.
Η ιδιότητα outline-color χρησιμοποιείται για να ορίσει το χρώμα του outline.
[adinserter block=”3″]
Το χρώμα μπορεί να οριστεί ως εξής:
- Όνομα: Ορίζετε το χρώμα με το όνομά του, όπως “red”.
- HEX: Ορίζετε το χρώμα με μια τιμή HEX, όπως “#ff0000”.
- RGB: Ορίζετε το χρώμα με μια τιμή RGB, όπως “rgb(255,0,0)”.
- HSL: Ορίζετε το χρώμα με μια τιμή HSL, όπως “hsl(0, 100%, 50%)”.
- invert: Εκτελεί αντιστροφή χρώματος (εξασφαλίζει ότι το outline είναι ορατό, ανεξάρτητα από το χρώμα του φόντου).
Παρακάτω παρουσιάζεται ένα παράδειγμα που δείχνει διάφορα χρώματα για το outline. Παρατηρήστε επίσης ότι αυτά τα στοιχεία έχουν επίσης ένα λεπτό μαύρο περίγραμμα μέσα στο outline:
.element {
/* Ορίζει το στυλ της περίγραμματος ως solid*/
outline-style: solid;
/* Ορίζει το πλάτος του περιγράμματος ως λεπτό */
outline-width: thin;
/* Ορίζει το περίγραμμα ως μαύρο με πάχος 1px */
border: 1px solid black;
}
.red {
/* Ορίζει το χρώμα του περιγράμματος ως κόκκινο */
outline-color: red;
}
.green {
/* Ορίζει το χρώμα του περιγράμματος ως πράσινο */
outline-color: green;
}
.blue {
/* Ορίζει το χρώμα του περιγράμματος ως μπλε */
outline-color: blue;
}
.custom {
/* Ορίζει το χρώμα του περιγράμματος ως ροζ (#ff00ff) */
outline-color: #ff00ff;
}
Στο παραπάνω παράδειγμα, ορίζονται διάφορες κλάσεις για το στοιχείο με κλάση .element, καθεμία με διαφορετικό χρώμα για την ιδιότητα outline-color. Μπορείτε να δείτε τη διαφορά στο χρώμα του outline για κάθε τιμή.
Το χρώμα του outline μπορεί επίσης να καθοριστεί χρησιμοποιώντας μια τιμή hexadecimal (HEX):
.element {
/* Ορίζει το στυλ της περιγράμματος ως solid*/
outline-style: solid;
/* Ορίζει το πάχος του περιγράμματος ως λεπτό */
outline-width: thin;
/* Ορίζει το περίγραμμα ως μια μαύρη γραμμή πάχους 1px */
border: 1px solid black;
}
.custom {
/* Ορίζει το χρώμα του περιγράμματος ως κόκκινο (#ff0000) */
outline-color: #ff0000;
}
Στο παραπάνω παράδειγμα, ορίζεται η κλάση .custom για το στοιχείο με κλάση .element και ορίζεται το χρώμα του outline ως #ff0000, που αντιστοιχεί σε κόκκινο χρώμα. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε τιμή HEX για να ορίσετε το επιθυμητό χρώμα.
Το χρώμα του outline μπορεί επίσης να καθοριστεί χρησιμοποιώντας τιμές RGB:
.element {
/* Ορίζει το στυλ της περίγραμματος ως solid*/
outline-style: solid;
/* Ορίζει το πάχος του περιγράμματος ως λεπτό */
outline-width: thin;
/* Ορίζει το περίγραμμα ως 1px σταθερό περίγραμμα με χρώμα μαύρο */
border: 1px solid black;
}
.custom {
/* Ορίζει το χρώμα του περιγράμματος ως κόκκινο */
outline-color: rgb(255, 0, 0);
}
Στο παραπάνω παράδειγμα, ορίζεται η κλάση .custom για το στοιχείο με κλάση .element και ορίζεται το χρώμα του outline ως rgb(255, 0, 0), που αντιστοιχεί σε κόκκινο χρώμα. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε τιμή RGB για να ορίσετε το επιθυμητό χρώμα. Οι τιμές RGB αντιπροσωπεύουν την ένταση των κόκκινων, πράσινων και μπλε συστατικών του χρώματος, από 0 έως 255.
Το χρώμα του outline μπορεί επίσης να καθοριστεί χρησιμοποιώντας τιμές HSL:
.element {
/* Ορίζει το στυλ της περιγράμματος ως solid*/
outline-style: solid;
/* Ορίζει το πάχος του περιγράμματος ως λεπτό */
outline-width: thin;
/* Ορίζει το περίγραμμα ως μία γραμμή πάχους 1px σε μαύρο χρώμα */
border: 1px solid black;
}
.custom {
/* Ορίζει το χρώμα του περιγράμματος για την κλάση .custom
ως ένα κόκκινο χρώμα (hsl(0, 100%, 50%)) */
outline-color: hsl(0, 100%, 50%);
}
Στο παραπάνω παράδειγμα, ορίζεται η κλάση .custom για το στοιχείο με κλάση .element και ορίζεται το χρώμα του outline ως hsl(0, 100%, 50%), που αντιστοιχεί σε κόκκινο χρώμα. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε τιμή HSL για να ορίσετε το επιθυμητό χρώμα. Οι τιμές HSL περιγράφουν την απόχρωση (hue), την κορεσμένοτητα (saturation) και την φωτεινότητα (lightness) του χρώματος.
Η ιδιότητα outline είναι μια συντόμευση για την οριοθέτηση των ακόλουθων ιδιοτήτων του outline:
outline-width
outline-style (απαιτείται)
outline-color
Η ιδιότητα outline καθορίζεται με ένα, δύο ή τρία τιμές από την παραπάνω λίστα. Η σειρά των τιμών δεν έχει σημασία.
Το παρακάτω παράδειγμα δείχνει μερικά περιγράμματα που ορίζονται με τη συντόμευση της ιδιότητας outline:
.element {
/* Ορίζει ένα περίγραμμα με πάχος 2px, solid, χρώματος κόκκινου */
outline: 2px solid red;
}
Στο παραπάνω παράδειγμα, ορίζεται η κλάση .element και ορίζεται το περίγραμμα με πάχος 2px, με στυλ solid και χρώμα κόκκινο. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε συνδυασμό των τιμών outline-width, outline-style και outline-color που επιθυμείτε χρησιμοποιώντας την συντόμευση της ιδιότητας outline.
Η ιδιότητα outline-offset προσθέτει χώρο μεταξύ του περιγράμματος και της άκρης/περιγράμματος ενός στοιχείου. Ο χώρος μεταξύ ενός στοιχείου και του περιγράμματός του είναι διαφανής.
Το παρακάτω παράδειγμα καθορίζει ένα περίγραμμα 15px έξω από την άκρη του περιγράμματος:
.element {
/* Ορίζει μια εξωτερικό περίγραμμα με χρώμα και πάχος */
outline: 2px solid red;
/* Ορίζει την απόσταση μεταξύ του περιγράμματος και του στοιχείου */
outline-offset: 15px;
}
Στο παραπάνω παράδειγμα, ορίζεται η κλάση .element και ορίζεται το περίγραμμα με πάχος 2px, στυλ solid και χρώμα κόκκινο. Επίσης, ορίζεται η ιδιότητα outline-offset με την τιμή 15px, προσθέτοντας έναν χώρο 15px ανάμεσα στο περίγραμμα και την άκρη του περιγράμματος.