Υποενότητα 4.2: Ψευδο-κλάσεις και CSS Display

Η ιδιότητα εμφάνισης (display property ) χρησιμοποιείται για τον καθορισμό του τρόπου εμφάνισης των στοιχείων στη σελίδα.

Οι πιο συνηθισμένες τιμές για την εμφάνιση είναι inline και block.

Μια πρακτική χρήση της ιδιότητας εμφάνισης βρίσκεται στη γραμμή πλοήγησης.

Η γραμμή πλοήγησης αποτελείται από μια λίστα συνδέσμων.

Σε μια γραμμή πλοήγησης, θέλουμε να επιλέγεται όλη η περιοχή των συνδέσμων (clickable) (συμπεριλαμβανομένου και του περιγράμματος). Αυτό επιτυγχάνεται με τη χρήση της τιμής block. Έτσι, το CSS θα είναι:

li { display: block; }

Μια γραμμή πλοήγησης μπορεί να είναι κάθετη ή οριζόντια.

Από προεπιλογή, η λίστα θα εμφανιστεί κάθετη.

Ωστόσο, αν θέλουμε να δημιουργήσουμε μια οριζόντια γραμμή πλοήγησης, πρέπει να κάνουμε τα στοιχεία της λίστας να εμφανίζονται δίπλα στο άλλο. Αυτό μπορεί να επιτευχθεί εφαρμόζοντας την τιμή inline στην ιδιότητα "εμφάνιση" στο CSS.

Παράδειγμα:

li { display: inline; }

Σημείωση:

Στα παραπάνω παραδείγματα εφαρμόζουμε την ιδιότητα εμφάνισης στα στοιχεία της λίστας <li> και όχι στην ετικέτα <ul>, καθώς θέλουμε να αλλάξουμε η συμπεριφορά αυτών των στοιχείων.

Display: none;

Η ιδιότηταdisplay: none; χρησιμοποιείται συνήθως στη JavaScript για να κρύβει και να εμφανίζει στοιχεία χωρίς να τα διαγράφει ή να τα αναδημιουργεί.