Στην ενότητα αυτή θα δούμε πως ορίζουμε περίγραμμα γύρω απο το πλαίσιο διαφόρων στοιχείων της σελίδας μας, με χρήση CSS. Ο ορισμός του περιγράμματος δεν δουλεύει στον Internet Explorer.

Στην παρακάτω εικόνα θα δείτε (αν δεν βλέπετε την σελίδα αυτή με Internet explorer) ότι έχει περίγραμμα χρώματος μπλε, ενώ το χρώμα του πλαισίου της είναι κίτρινο:

Ιδιότητες της CSS για το περίγραμμα των πλαισίων

Οι ιδιότητες της CSS για τον ορισμό πριγραμμάτων γύρω από το πλαίσιο κάποιου στοιχείου, μας επιτρέπουν να ορίσουμε το στυλ, το χρώμα και το πάχος του περιγράμματος.

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες διαμόρφωσης του περιγράμματος των πλαισίων των στοιχείων της σελίδας:
Ιδιότητα Τιμές Περιγραφή
outline outline-color
outline-style
outline-width
Η ιδιότητα αυτή είναι συντομογραφία των τριών ιδιοτήτων των περιγραμμάτων: outline-color, outline-style και outline-width
Δοκίμασε το
outline-color χρώμα Ορίζει το χρώμα του περιγράμματος ενός στοιχείου
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα outline-style
outline-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Ορίζει το στυλ του περιγράμματος ενός στοιχείου της σελίδας
Δοκίμασε το
outline-width thin
medium
thick
αριθμός σε pixels
Ορίζει το πάχος του περιγράμματος ενός στοιχείου της σελίδας.
Δοκίμασε το
Προσοχή: η ιδιότητα αυτή δεν λειτουργεί όταν είναι μόνη της σε ένα στυλ. Πρέπει στο ίδιο στυλ να ορίσετε πρώτα το στυλ του πλαισίου με την ιδιότητα outline-style

Παραδείγματα

Ορισμός περιγράμματος στα κελιά ενός πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε το στυλ του περιγράμματος των κελιών ενός πίνακα.

Ορισμός περιγράμματος σε ολόκληρο πίνακα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε το στυλ του περιγράμματος ενός πίνακα

Ορισμός περιγράμματος σε παράγραφο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε το στυλ του περιγράμματος μιας παραγράφου
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.