Στο CSS υπάρχουν δύο διαφορετικοί τύποι περιγράμματος, το border και το outline. Ενώ το border χαρακτηρίζεται πάντα από έναν ορθογώνιο περίγραμμα, το outline που εισήχθησαν στο CSS2 είναι προορισμένα για μη-γωνιακές περιοχές. Και υπάρχει μια ακόμα διαφορά: με το outline, η περίγραμμα βρίσκεται έξω από το περίγραμμα, με αποτέλεσμα ένα στοιχείο να μπορεί να του ανατεθεί τόσο πλαίσιο με border όσο και περίγραμμα με outline.
Οι ορισμοί περιγραμμάτων που παρουσιάζονται σε αυτό το εγχειρίδιο είναι κυρίως ενδιαφέροντες για στοιχεία που δημιουργούν ένα δικό τους παράγραφο. Αρχικά όμως, μπορούν φυσικά να εφαρμοστούν και σε άλλα στοιχεία.
Ορισμός Περιγράμματος
Με το border μπορεί να καθοριστεί το σχήμα ολόκληρου του περιγράμματος γύρω από ένα στοιχείο.
Για τη γενική ιδιότητα border πρόκειται για ένα σύνολο των ακόλουθων τιμών, στις οποίες θα αναφερθούμε αναλυτικά:
• border-color
• border-style
• border-width
Οι τιμές για τις μεμονωμένες ιδιότητες γράφονται με κενά μεταξύ τους. Η σειρά με την οποία δίνουμε τις ιδιότητες δεν έχει σημασία. Επιπλέον, για το border υπάρχουν και τέσσερις υπο-ιδιότητες, με τις οποίες μπορούν να γίνουν οι κατάλληλες προσδιορίσεις για το χρώμα του πλαισίου, το πάχος του πλαισίου και τον τύπο του πλαισίου για τις μεμονωμένες πλευρές του στοιχείου.
• border-top – Πλαίσιο στην κορυφή
• border-right – Πλαίσιο στα δεξιά
• border-bottom – Πλαίσιο στο κάτω μέρος
• border-left – Πλαίσιο στα αριστερά
Το ακόλουθο παράδειγμα δείχνει τη χρήση του border. Με αυτόν τον ορισμό δημιουργείται ένα πέραν των τριών pixel πλαίσιο, με μαύρο χρώμα και συνεχές σχήμα.
<p style="border:3pt solid #000000;"> Καλώς ήρθατε </p>
Το αποτέλεσμα στον περιηγητή:
Το Χρώμα του Περιγράμματος
Μέσω του border-color καθορίζεται το χρώμα του περιγράμματος. Επιτρεπτές τιμές είναι οι ακόλουθες:
• transparent – διαφανές πλαίσιο
• Τιμή χρώματος
Αν δοθεί μόνο μία τιμή, αυτή ισχύει για όλες τις πλευρές του περιγράμματος. Για να ορίσουμε διαφορετικά χρώματα για τις μεμονωμένες πλευρές, δίνουμε πολλαπλές τιμές, χωρισμένες με κενά.
• Δύο τιμές – η πρώτη για τις πάνω και κάτω, η δεύτερη για την αριστερή και δεξιά πλευρά του πλαισίου.
• Τρεις τιμές – η πρώτη για την πάνω, η δεύτερη για την αριστερή και δεξιά, η τρίτη για την κάτω πλευρά του πλαισίου.
• Τέσσερις τιμές – η πρώτη για την πάνω, η δεύτερη για τη δεξιά, η τρίτη για την κάτω και η τέταρτη για την αριστερή πλευρά του πλαισίου.
Επίσης μπορούν να χρησιμοποιηθούν και οι ακόλουθες υπο-ιδιότητες border:
• border-top-color – Χρώμα πλαισίου στην κορυφή
• border-right-color – Χρώμα πλαισίου στα δεξιά
• border-bottom-color – Χρώμα πλαισίου στο κάτω μέρος
• border-left-color – Χρώμα πλαισίου στα αριστερά
Ένα παράδειγμα:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Και εδώ το αποτέλεσμα στον περιηγητή:
Τύπος Γραμμής
Με το border-style μπορείτε να καθορίσετε τον τύπο γραμμής του περιγράμματος.
Παρακάτω θα βρείτε μια λίστα με τις πιθανές διακριτικές περιπτώσεις του περιγράμματος:
• none – αθέατο πλαίσιο
• dotted – με τελίτσες
• dashed – διακεκομμένο
• solid – συνεχές
• double - διπλό συνεχές
• groove – 3D γραμμή
• ridge – 3D γραμμή
• inset – 3D γραμμή
• outset – 3D γραμμή
Εδώ ένα παράδειγμα πώς φαίνονται οι διάφοροι τύποι περιγράμματος:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<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="hidden">hidden</p>
</body>
</html>Το αποτέλεσμα στον περιηγητή:
Αν δοθεί μόνο μία τιμή, αυτή θα ισχύει για όλες τις πλευρές του περιγράμμου. Για να ορίσετε τύπους περιγράμματος για τις μεμονωμένες πλευρές, πρέπει να δώσετε πολλαπλές τιμές, χωρισμένες με κενά.
• Δύο τιμές – η πρώτη για τις πάνω και κάτω, η δεύτερη για την αριστερή και δεξιά πλευρά του περιγράμματος.
• Τρεις τιμές – η πρώτη για την πάνω, η δεύτερη για την αριστερή και δεξιά, η τρίτη για την κάτω πλευρά του περιγράμματος.
• Τέσσερις τιμές – η πρώτη για την πάνω, η δεύτερη για τη δεξιά, η τρίτη για την κάτω και η τέταρτη για την αριστερ
Ένα παράδειγμα για αυτό είναι:
<p style="border-bottom-style: dashed;"> Διακεκομμένο πλαίσιο </p>
Έτσι εμφανίζεται στον περιηγητή:
Ορισμός του πλάτους του πλαισίου
Με το border-width καθορίζεται το πλάτος του πλαισίου.
• Καθορισμός μήκους
• thin - λεπτό πλαίσιο
• medium - μεσαίο πλαίσιο
• thick - παχύ πλαίσιο
Εάν δίνεται μόνο μια τιμή, τότε ισχύει για όλες τις πλευρές του στοιχείου. Για να καθορίσετε διαφορετικά πάχη πλαισίου για μεμονωμένες πλευρές, υπάρχουν δύο επιλογές. Στον πρώτο τρόπο, σημειώνετε πολλές τιμές που διαχωρίζονται από κενά.
• Δύο τιμές - η πρώτη τιμή για τις πλάγιες και κάτω πλευρές, η δεύτερη για τις αριστερές και δεξιές πλευρές του πλάτους του πλαισίου
• Τρεις τιμές - η πρώτη τιμή για την πάνω, η δεύτερη για την αριστερή και δεξιά, η τρίτη για την κάτω πλάτη του πλαισίου
• Τέσσερις τιμές - η πρώτη τιμή για το πάνω, η δεύτερη για τη δεξιά, η τρίτη για το κάτω και η τέταρτη για την αριστερή πλευρά του πλάτους
Όμοια, μπορείτε επίσης να χρησιμοποιήσετε τις ακόλουθες υπο-ιδιότητες του πλαισίου:
• border-top-width - πάχος πλαισίου στην κορυφή
• border-right-width - πάχος πλαισίου στα δεξιά
• border-bottom-width - πάχος πλαισίου στο κάτω μέρος
• border-left-width - πάχος πλαισίου στα αριστερά
Ένα παράδειγμα:
<p style="border-width:2px;border-style: dotted;"> Καλώς ήρθατε </p>
Το χρώμα πλαισίου για την περίγραφη
Μέσω της ιδιότητας outline-color ορίζεται το χρώμα του πλαισίου. Η δήλωση είναι ταυτόσημη με το border-color.
• invert - το χρώμα αντιστρέφεται. Αυτό το χρώμα προκύπτει από την αναστροφή όλων των bit ενός εξαδικαδικού χρωματικού τιμής.
• Καθορισμός χρώματος
Ένα παράδειγμα:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Έτσι εμφανίζεται στον περιηγητή:
Ο τύπος πλαισίου για την περίγραφη
Η δήλωση outline-style καθορίζει τον τύπο της περιγράφου. Επιτρέπονται οι ίδιες τιμές με την border-style.
• none - αόρατο πλαίσιο
• dotted - περιγράμματα
• dashed - προγραμματισμένα
• solid - συνεχής
• double - διπλός συνεχής
• groove - 3D γραμμή
• ridge - 3D γραμμή
• inset - 3D γραμμή
• outset - 3D γραμμή
Ένα παράδειγμα:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Το πάχος της περιγράφης
Η δήλωση outline-width είναι ταυτόσημη με το border-width. Μέσω αυτής καθορίζεται το πάχος της περιγράφου. Προκειμένου να δημιουργήσετε μια ορατή γραμμή περιγράμματος, συνδυάζετε πάντα το outline-width με το outline-style.
• medium - μεσαίο πλαίσιο
• thin - λεπτό πλαίσιο
• thick - παχύ πλαίσιο
• Καθορισμός μήκους - καθορίζει το πάχος της περιγράφου
Ένα παράδειγμα:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Καλώς ήρθατε
</p>
Και όπως και με το border, υπάρχει μια γενική ιδιότητα και για την περίγραφη outline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Καλώς ήρθατε στο PSD-Tutorials.de!</p>
</body>
</html>
Αυτό συνοψίζει τις ακόλουθες ιδιότητες:
• outline-width
• outline-style
• outline-color
Το σύστημα είναι τότε ταυτόσημο με αυτό της γενικής ιδιότητας border.
