Η ιδιότητα display είναι η πιο σημαντική ιδιότητα CSS για τον έλεγχο της διάταξης των στοιχείων στη σελίδα.
Με τη χρήση της ιδιότητας display, μπορείτε να αλλάξετε τον τρόπο προβολής ενός στοιχείου από την προεπιλεγμένη συμπεριφορά του.
Ορισμένες από τις συνηθέστερες τιμές για την ιδιότητα display είναι:
block: Το στοιχείο εμφανίζεται ως μπλοκ και καταλαμβάνει ολόκληρο το πλάτος της γραμμής.inline: Το στοιχείο εμφανίζεται ως ενσωματωμένο στη γραμμή και ακολουθεί τη ροή του κειμένου.inline-block: Το στοιχείο εμφανίζεται ως ενσωματωμένο στη γραμμή, αλλά μπορεί να έχει πλάτος και ύψος.none: Το στοιχείο δεν εμφανίζεται και δεν καταλαμβάνει χώρο στη διάταξη.
Ανάλογα με τις ανάγκες σας, μπορείτε να χρησιμοποιήσετε την ιδιότητα display για να επηρεάσετε τον τρόπο προβολής των στοιχείων στη σελίδα σας. Αυτό σας επιτρέπει να δημιουργήσετε ποικίλες διατάξεις και δομές για την ιστοσελίδα σας.
Η ιδιότητα display καθορίζει αν και πώς ένα στοιχείο εμφανίζεται.
Κάθε στοιχείο HTML έχει μια προεπιλεγμένη τιμή εμφάνισης ανάλογα με τον τύπο του στοιχείου. Η προεπιλεγμένη τιμή εμφάνισης για τα περισσότερα στοιχεία είναι “block” ή “inline”.
Τα στοιχεία που έχουν προεπιλεγμένη τιμή εμφάνισης “block” καταλαμβάνουν ολόκληρο το πλάτος της γραμμής και αρχίζουν σε νέα γραμμή. Παραδείγματα στοιχείων “block” είναι τα <div>, <p>, <h1>–<h6>, κλπ.
Τα στοιχεία που έχουν προεπιλεγμένη τιμή εμφάνισης “inline” εμφανίζονται ενσωματωμένα στη γραμμή και ακολουθούν τη ροή του κειμένου. Παραδείγματα στοιχείων “inline” είναι τα <span>, <a>, <strong>, <em>, κλπ.
Μπορείτε να αλλάξετε την τιμή της ιδιότητας display για να επηρεάσετε τον τρόπο προβολής ενός στοιχείου. Για παράδειγμα, μπορείτε να αλλάξετε ένα στοιχείο από “block” σε “inline” ή αντίστροφα χρησιμοποιώντας την τιμή display: block; ή display: inline;. Αυτό σας δίνει τη δυνατότητα να δημιουργήσετε προσαρμοσμένες διατάξεις και δομές στην ιστοσελίδα σας.
Ένα στοιχείο block-level ξεκινά πάντα σε μια νέα γραμμή και καταλαμβάνει όλο το διαθέσιμο πλάτος (επεκτείνεται προς τα αριστερά και τα δεξιά όσο μπορεί).
Όταν ένα στοιχείο block-level εμφανίζεται στη σελίδα, ξεκινάει σε μια νέα γραμμή και καταλαμβάνει όλο το διαθέσιμο πλάτος στην οριζόντια κατεύθυνση. Αυτό σημαίνει ότι τα στοιχεία block-level θα αποτελούν ξεχωριστές ενότητες στη διάταξη της σελίδας και θα καταλαμβάνουν ολόκληρο το πλάτος του γονικού στοιχείου τους.
Παραδείγματα στοιχείων block-level είναι οι ετικέτες <div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <table>, κλπ.
Αυτά τα στοιχεία χρησιμοποιούνται συχνά για να δημιουργήσουν δομές, ενότητες και στυλιστικά τμήματα στη σελίδα, καθώς έχουν τη δυνατότητα να καταλάβουν ολόκληρο το πλάτος της διαθέσιμης περιοχής.
[adinserter block=”2″]
Ένα στοιχείο inline δεν ξεκινά σε μια νέα γραμμή και παίρνει μόνο το πλάτος που είναι απαραίτητο για το περιεχόμενό του.
Όταν ένα στοιχείο inline εμφανίζεται στη σελίδα, ενσωματώνεται στη γραμμή του κειμένου και παίρνει μόνο τον απαιτούμενο χώρο για να εμφανίσει το περιεχόμενό του. Αυτό σημαίνει ότι τα στοιχεία inline θα εμφανίζονται μέσα σε μια γραμμή χωρίς να δημιουργούν νέα γραμμή.
Παραδείγματα στοιχείων inline είναι οι ετικέτες <span>, <a>, <strong>, <em>, <img>, κλπ.
Αυτά τα στοιχεία χρησιμοποιούνται συχνά για να εφαρμόσουν στυλ και επισημάνσεις σε μέρη του κειμένου, χωρίς να αλλάζουν τη διάταξη της σελίδας ή να καταλαμβάνουν πολύ χώρο στον οριζόντιο άξονα.
Παρακάτω παραθέτω ένα παράδειγμα χρήσης της ιδιότητας display: none; σε συνδυασμό με JavaScript για να αποκρύψετε και να εμφανίσετε ένα στοιχείο:
HTML:
<button onclick="toggleElement()">Κλικ για εναλλαγή</button> <!-- Αυτό το κουμπί εκτελεί τη λειτουργία toggleElement() κατά το κλικ --> <div id="myElement">Αυτό είναι ένα κρυφό στοιχείο.</div> <!-- Αυτή η <div> περιέχει ένα κρυφό στοιχείο με αναγνωριστικό "myElement" -->
CSS:
#myElement {
/* Ορίζει την εμφάνιση του στοιχείου ως αόρατο */
display: none;
}
JavaScript:
function toggleElement() {
// Εύρεση του στοιχείου με το αναγνωριστικό "myElement"
var element = document.getElementById("myElement");
// Έλεγχος αν το στοιχείο είναι κρυμμένο
if (element.style.display === "none") {
// Αν είναι κρυμμένο, εμφάνιση του
element.style.display = "block";
} else {
// Αν είναι ορατό, απόκρυψη του
element.style.display = "none";
}
}
Σε αυτό το παράδειγμα, υπάρχει ένα κουμπί που όταν γίνει κλικ, καλείται η συνάρτηση toggleElement(). Η συνάρτηση ελέγχει την τιμή της ιδιότητας display για το στοιχείο με id “myElement”. Αν η τιμή της ιδιότητας display είναι “none”, τότε το στοιχείο εμφανίζεται αλλάζοντας την τιμή της ιδιότητας display σε “block”. Αν η τιμή της ιδιότητας display δεν είναι “none”, τότε το στοιχείο αποκρύπτεται αλλάζοντας την τιμή της ιδιότητας display σε “none”.
Με αυτόν τον τρόπο, μπορείτε να αποκρύπτετε και να εμφανίζετε το στοιχείο με id “myElement” με κάθε κλικ στο κουμπί.
Όπως αναφέρθηκε, κάθε στοιχείο έχει μια προεπιλεγμένη τιμή εμφάνισης. Ωστόσο, μπορείτε να αντικαταστήσετε αυτήν την προεπιλεγμένη τιμή.
Η αλλαγή ενός στοιχείου inline σε block element, ή αντίστροφα, μπορεί να είναι χρήσιμη για να δημιουργήσετε μια ειδική εμφάνιση στη σελίδα, ενώ ταυτόχρονα ακολουθείτε τα πρότυπα του ιστού.
Ένα συνηθέστερο παράδειγμα είναι η μετατροπή των inline στοιχείων <li> σε block elements για οριζόντια μενού:
[adinserter block=”3″]
HTML:
<ul> <li>Στοιχείο 1</li> <!-- Πρώτο στοιχείο --> <li>Στοιχείο 2</li> <!-- Δεύτερο στοιχείο --> <li>Στοιχείο 3</li> <!-- Τρίτο στοιχείο --> </ul>
CSS:
li {
/* Ορίζει την εμφάνιση των στοιχείων <li> ως inline-block */
display: inline-block;
}
Σε αυτό το παράδειγμα, τα στοιχεία <li> εμφανίζονται αρχικά ως inline elements σύμφωνα με το προεπιλεγμένο χαρακτηριστικό τους. Ωστόσο, με την ιδιότητα display: inline-block;, τα στοιχεία <li> μετατρέπονται σε block-level στοιχεία που παρουσιάζονται οριζόντια ως inline-block στοιχεία. Αυτό τους επιτρέπει να πάρουν πλάτος και ύψος, ενώ παραμένουν ενσωματωμένα στην ίδια γραμμή.
Με τον τρόπο αυτό, μπορείτε να δημιουργήσετε οριζόντια μενού με τη χρήση του στοιχείου <ul> και των <li> στοιχείων, εξασφαλίζοντας παράλληλα ότι τα στοιχεία συμμορφώνονται με τα πρότυπα του ιστού.
Το παρακάτω παράδειγμα εμφανίζει τα στοιχεία <span> ως block elements:
HTML:
<span>Αυτό είναι ένα παράδειγμα κειμένου</span>
CSS:
span {
/* Ορίζει την εμφάνιση του στοιχείου span ως block */
display: block;
}
Σε αυτό το παράδειγμα, το στοιχείο <span> από προεπιλογή εμφανίζεται ως inline element, που παίρνει μόνο τον απαιτούμενο χώρο για να εμφανίσει το περιεχόμενό του. Με την ιδιότητα display: block;, το <span> μετατρέπεται σε block-level στοιχείο, που θα καταλαμβάνει όλο το πλάτος της γραμμής και θα ξεκινά σε νέα γραμμή.
Με αυτόν τον τρόπο, μπορείτε να διαχειριστείτε την εμφάνιση των στοιχείων <span> και να τα εμφανίσετε ως ανεξάρτητα block elements, προσδίδοντάς τους πλάτος και ύψος και τοποθετώντας τα σε νέες γραμμές.