Η ιδιότητα εμφάνισης CSS είναι ένα ισχυρό εργαλείο για σχεδιαστές ιστοσελίδων. Σας επιτρέπει να ελέγχετε τις διατάξεις στοιχείων ιστότοπου με ελάχιστο στυλ, με απλές τιμές που είναι εύκολο να θυμάστε.

Τι κάνει όμως καθεμία από αυτές τις αξίες και πώς λειτουργούν; Ας ανακαλύψουμε.

Τι είναι η ιδιότητα εμφάνισης CSS;

Η ιδιότητα εμφάνισης καθορίζει τον τύπο απόδοσης πλαισίου που χρησιμοποιείται για στοιχεία HTML σε μια ιστοσελίδα. Αυτό έχει ως αποτέλεσμα μια ποικιλία συμπεριφορών, συμπεριλαμβανομένης της μη εμφάνισης καθόλου. Μπορείτε να επεξεργαστείτε αυτές τις τιμές στον ιστότοπό σας μέσω του φύλλου στυλ ή των κατάλληλων ενοτήτων προσαρμογής CSS Εργαλεία CMS όπως το WordPress.

Διατήρηση στοιχείων σε ευθυγράμμιση με οθόνη CSS: ενσωματωμένη

Οι τιμές πλάτους και ύψους δεν ισχύουν για ένα στοιχείο με ενσωματωμένη οθόνη. το περιεχόμενο μέσα καθορίζει τις διαστάσεις του. Τα ενσωματωμένα στοιχεία HTML μπορούν να κάθονται δίπλα-δίπλα με άλλα στοιχεία, συμπεριφέροντας σαν α. Η ενσωματωμένη οθόνη χρησιμοποιείται πιο συχνά για κείμενο.

instagram viewer 
<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος>Τιμές εμφάνισης CSS</title>
<στυλ>
.στη γραμμή {
 οθόνη: inline;
 μέγεθος γραμματοσειράς: 3rem;
 }
#inline-1 {
 Χρώμα φόντου: κίτρινο;
 padding: 10px 0px 10px 10px;
 }
#inline-2 {
 Χρώμα φόντου: ανοιχτό πράσινο;
 padding: 10px 10px 10px 0px;
 }
</style>
</head>
<σώμα>
<h1>Ενσωματωμένη οθόνη CSS</h1>
<div class="στη γραμμή" id="εν σειρά-1">Αυτό είναι κείμενο</div>
<div class="στη γραμμή" id="εν σειρά-2">με την ενσωματωμένη αξία ιδιοκτησίας.</div>
</body>
</html>

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

Έλεγχος διατάξεων ιστότοπου Με οθόνη CSS: μπλοκ

Κατά κάποιο τρόπο, η τιμή του μπλοκ εμφάνισης είναι αντίθετη από την ενσωματωμένη τιμή. Μπορούν να οριστούν οι διαστάσεις ύψους και πλάτους και τα στοιχεία με αυτήν την τιμή δεν μπορούν να βρίσκονται το ένα δίπλα στο άλλο. Το παραπάνω παράδειγμα δείχνει δύο στοιχεία με την τιμή μπλοκ. Στοιχεία με την προεπιλεγμένη τιμή εμφάνισης μπλοκ στο μέγιστο πλάτος του γονικού τους στοιχείου.

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος>Τιμές εμφάνισης CSS</title>
<στυλ>
.ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ {
 οθόνη: μπλοκ;
 μέγεθος γραμματοσειράς: 3rem;
 πλάτος: κατάλληλο περιεχόμενο.
 }
#block-1 {
 Χρώμα φόντου: κίτρινο;
 padding: 10px 10px 10px 10px;
 }
#block-2 {
 Χρώμα φόντου: ανοιχτό πράσινο;
 padding: 10px 10px 10px 10px;
 }
</style>
</head>
<σώμα>
<h1>Μπλοκ εμφάνισης CSS</h1>
<div class="ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ" id="μπλοκ-1">Αυτό είναι κείμενο</div>
<div class="ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ" id="μπλοκ-2">με την τιμή ιδιότητας μπλοκ.</div>
</body>
</html>

Σε αντίθεση με το παράδειγμα ενσωματωμένου στυλ, αυτό το παράδειγμα τιμής μπλοκ εμφάνισης χωρίζει τις γραμμές κειμένου σε δύο διαφορετικές γραμμές. Η τιμή πλάτους προσαρμογής περιεχομένου ορίζει το πλάτος των στοιχείων ώστε να ταιριάζει με το μήκος του κειμένου.

Στοιχεία HTML δίπλα-δίπλα με οθόνη CSS: inline-block

Η τιμή ενσωματωμένου μπλοκ οθόνης CSS λειτουργεί ακριβώς όπως μια κανονική ενσωματωμένη τιμή, μόνο με τη δυνατότητα προσθήκης συγκεκριμένων διαστάσεων. Αυτό καθιστά δυνατή τη δημιουργία διατάξεων που μοιάζουν με πλέγμα χωρίς να υπάρχουν γονικά στοιχεία. Επιστρέφοντας στο προηγούμενο παράδειγμα, η προσθήκη της τιμής inline-block επιτρέπει στα στοιχεία να κάθονται το ένα δίπλα στο άλλο.

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος>Τιμές εμφάνισης CSS</title>
<στυλ>
.inline-block {
 οθόνη: inline-block;
 μέγεθος γραμματοσειράς: 3rem;
 πλάτος: κατάλληλο περιεχόμενο.
 }
#inline-block-1 {
 Χρώμα φόντου: κίτρινο;
 padding: 10px 10px 10px 10px;
 }
#inline-block-2 {
 Χρώμα φόντου: ανοιχτό πράσινο;
 padding: 10px 10px 10px 10px;
 }
</style>
</head>
<σώμα>
<h1>CSS Display Inline-Block (σύνολο πλάτους)</h1>
<div class="ενσωματωμένο μπλοκ" id="inline-block-1">Αυτό είναι κείμενο</div>
<div class="ενσωματωμένο μπλοκ" id="inline-block-2">με την ιδιότητα inline-block
 αξία.</div>
</body>
</html>

Η τιμή inline-block δεν φαίνεται πολύ διαφορετική από την τιμή inline. Είναι σημαντικό να σημειωθεί ότι μπορείτε να ορίσετε τις διαστάσεις των στοιχείων με αυτήν την τιμή, ωστόσο, διευκολύνοντας την εργασία σε ορισμένες περιπτώσεις.

Η απλούστερη τιμή εμφάνισης είναι "καμία". Αυτή η τιμή κρύβει το στοιχείο και τυχόν θυγατρικά στοιχεία, μαζί με περιθώρια και άλλες ιδιότητες απόστασης. Τα στοιχεία με την τιμή CSS display none εξακολουθούν να είναι ορατά στους επιθεωρητές του προγράμματος περιήγησης.

Δημιουργήστε ευέλικτα και αποκριτικά στοιχεία με οθόνη CSS: flex

Το Display flex είναι μία από τις νεότερες λειτουργίες διάταξης CSS. Όταν το display flex βρίσκεται σε ένα γονικό στοιχείο, όλα τα στοιχεία μέσα σε αυτό γίνονται ευέλικτα στοιχεία CSS. Το γονικό στοιχείο σε αυτήν τη διαμόρφωση είναι ένα flexbox.

Τα Flexboxes δημιουργούν αποκριτικά σχέδια με προκαθορισμένες μεταβλητές, όπως το πλάτος και το ύψος. Αξίζει εκμάθηση για τα flexbox HTML/CSS πριν ξεκινήσετε.

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος>Τιμές εμφάνισης CSS</title>
<στυλ>
.καλώδιο {
 οθόνη: flex;
 μέγεθος γραμματοσειράς: 3rem;
 }
#flex-1 {
 Χρώμα φόντου: κίτρινο;
 πλάτος: 40%;
 ύψος: 100 px;
 }
#flex-2 {
 Χρώμα φόντου: ανοιχτό πράσινο;
 πλάτος: 25%;
 ύψος: 100 px;
 }
#flex-3 {
 Χρώμα φόντου: ανοιχτό μπλε;
 πλάτος: 35%;
 ύψος: 100 px;
 }
</style>
</head>
<σώμα>
<h1>CSS Display Flex</h1>
<div class="καλώδιο">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>

Τοποθέτηση Flexbox δίπλα-δίπλα Με οθόνη: inline-flex

Το Inline-flex συμπεριφέρεται ακριβώς όπως ένα κανονικό flexbox, με το πρόσθετο πλεονέκτημα του στοιχείου να μπορεί να κάθεται δίπλα σε άλλα στοιχεία.

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος>Τιμές εμφάνισης CSS</title>
<στυλ>
.inline-flex {
 οθόνη: inline-flex;
 μέγεθος γραμματοσειράς: 3rem;
πλάτος: 49.8%;
 }
#inline-flex-1 {
 Χρώμα φόντου: κίτρινο;
 πλάτος: 40%;
 ύψος: 100 px;
 }
#inline-flex-2 {
 Χρώμα φόντου: ανοιχτό πράσινο;
 πλάτος: 25%;
 ύψος: 100 px;
 }
#inline-flex-3 {
 Χρώμα φόντου: ανοιχτό μπλε;
 πλάτος: 35%;
 ύψος: 100 px;
 }
</style>
</head>
<σώμα>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>

Δημιουργία σύνθετων πινάκων με οθόνη CSS: πίνακας

Η τιμή του πίνακα εμφάνισης θυμίζει τις παλιότερες εποχές του σχεδιασμού ιστοσελίδων. Ενώ οι περισσότεροι ιστότοποι δεν χρησιμοποιούν πίνακες για τις διατάξεις τους σήμερα, εξακολουθούν να ισχύουν για την εμφάνιση δεδομένων και περιεχομένου σε αναγνώσιμη μορφή.

Η προσθήκη της τιμής του πίνακα σε ένα στοιχείο HTML θα το κάνει να λειτουργεί σαν στοιχείο πίνακα, αλλά χρειάζεστε πρόσθετες τιμές για να κάνετε τον πίνακά σας να λειτουργεί σωστά.

Οθόνη CSS: πίνακας-κελί

Τα στοιχεία με την τιμή του κελιού πίνακα λειτουργούν ως μεμονωμένα κελιά στον κύριο πίνακα. Και οι τιμές πίνακα-στήλης και γραμμής πίνακα ομαδοποιούν αυτά τα μεμονωμένα κελιά μαζί.

Εμφάνιση CSS: πίνακας-σειρά

Η τιμή της γραμμής πίνακα λειτουργεί ακριβώς όπως a

στοιχείο HTML. Ως γονέας στοιχείων με την τιμή του κελιού πίνακα, θα χωρίσει τον πίνακά σας σε οριζόντιες σειρές.

Εμφάνιση CSS: πίνακας-στήλη

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

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος>Τιμές εμφάνισης CSS</title>
<στυλ>
.τραπέζι {
 οθόνη: πίνακας;
 μέγεθος γραμματοσειράς: 3rem;
 }
.επί κεφαλής {
 οθόνη: πίνακας-κεφαλίδα-ομάδα;
 μέγεθος γραμματοσειράς: 3rem;
 }
#στήλη-1 {
 οθόνη: πίνακας-στήλη-ομάδα;
 Χρώμα φόντου: κίτρινο;
 }
#στήλη-2 {
 οθόνη: πίνακας-στήλη-ομάδα;
 Χρώμα φόντου: ανοιχτό πράσινο;
 }
#στήλη-3 {
 οθόνη: πίνακας-στήλη-ομάδα;
 Χρώμα φόντου: ανοιχτό μπλε;
 }
#σειρά-1 {
 οθόνη: πίνακας-σειρά;
 }
#σειρά-2 {
 οθόνη: πίνακας-σειρά;
 }
#σειρά-3 {
 οθόνη: πίνακας-σειρά;
 }
#κελί {
 οθόνη: πίνακας-κελί?
 padding: 10px;
 πλάτος: 20%;
 }
</style>
</head>
<σώμα>
<h1>Πίνακας εμφάνισης CSS</h1>
<div class="τραπέζι">
<div id="στήλη-1"></div>
<div id="στήλη-2"></div>
<div id="στήλη-3"></div>
<div class="επί κεφαλής">
<div id="κύτταρο">Ονομα</div>
<div id="κύτταρο">Ηλικία</div>
<div id="κύτταρο">Χώρα</div>
</div>
<div id="σειρά-1">
<div id="κύτταρο">Τζεφ</div>
<div id="κύτταρο">21</div>
<div id="κύτταρο">ΗΠΑ</div>
</div>
<div id="σειρά-2">
<div id="κύτταρο">μηνύω</div>
<div id="κύτταρο">34</div>
<div id="κύτταρο">Ισπανία</div>
</div>
<div id="σειρά-3">
<div id="κύτταρο">Μπόρις</div>
<div id="κύτταρο">57</div>
<div id="κύτταρο">Σιγκαπούρη</div>
</div>
</div>
</body>
</html>

Δημιουργία πινάκων δίπλα-δίπλα με οθόνη CSS: ενσωματωμένος πίνακας

Όπως και οι άλλες ενσωματωμένες παραλλαγές που έχουμε ήδη εξετάσει, το inline-table καθιστά δυνατή την τοποθέτηση στοιχείων πίνακα δίπλα σε άλλα στοιχεία.

Δημιουργία αποκριτικών διατάξεων ιστότοπου με οθόνη CSS: πλέγμα

Η τιμή του πλέγματος εμφάνισης CSS είναι παρόμοια με την τιμή του πίνακα, μόνο οι στήλες και οι σειρές ενός πλέγματος μπορούν να έχουν ευέλικτο μέγεθος. Αυτό καθιστά τα πλέγματα ιδανικά για τη δημιουργία της κύριας διάταξης για ιστοσελίδες. Αφήνουν χώρο για κεφαλίδες και υποσέλιδα πλήρους πλάτους, ενώ παράλληλα καθιστούν δυνατή την ύπαρξη περιοχών περιεχομένου διαφορετικών μεγεθών.

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος>Τιμές εμφάνισης CSS</title>
<στυλ>
.πλέγμα {
 οθόνη: πλέγμα;
 μέγεθος γραμματοσειράς: 3rem;
 πλέγμα-πρότυπο-περιοχές:
'κεφαλίδα κεφαλίδα κεφαλίδα κεφαλίδα'
'περιεχόμενο της αριστερής πλευρικής γραμμής στη δεξιά πλευρά'
'υποσέλιδο υποσέλιδο υποσέλιδο υποσέλιδο';
 κενό: 10 px;
 }
#πλέγμα-1 {
 περιοχή πλέγματος: κεφαλίδα;
 Χρώμα φόντου: κίτρινο;
 ύψος: 100 px;
 padding: 20px;
 text-align: κέντρο;
 }
#πλέγμα-2 {
 περιοχή πλέγματος: αριστερή πλευρική γραμμή.
 Χρώμα φόντου: ανοιχτό πράσινο;
 ύψος: 200 px;
 padding: 20px;
 text-align: κέντρο;
 }
#πλέγμα-3 {
 περιοχή πλέγματος: περιεχόμενο;
 Χρώμα φόντου: ανοιχτό μπλε;
 ύψος: 200 px;
 padding: 20px;
 text-align: κέντρο;
 }
#πλέγμα-4 {
 περιοχή πλέγματος: δεξιά πλευρική γραμμή.
 Χρώμα φόντου: ανοιχτό πράσινο;
 ύψος: 200 px;
 padding: 20px;
 text-align: κέντρο;
 }
#πλέγμα-5 {
 περιοχή πλέγματος: υποσέλιδο;
 Χρώμα φόντου: κίτρινο;
 ύψος: 100 px;
 padding: 20px;
 text-align: κέντρο;
 }
</style>
</head>
<σώμα>
<h1>Πλέγμα εμφάνισης CSS</h1>
<div class="πλέγμα">
<div id="πλέγμα-1">Επί κεφαλής</div>
<div id="πλέγμα-2">Αριστερή πλευρική γραμμή</div>
<div id="πλέγμα-3">Περιεχόμενο</div>
<div id="πλέγμα-4">Δεξιά πλαϊνή γραμμή</div>
<div id="πλέγμα-5">Υποσέλιδο</div>
</div>
</body>
</html>

Τα πλέγματα είναι παρόμοια με τα flexbox, μόνο που μπορούν να τοποθετήσουν στοιχεία το ένα κάτω και δίπλα στο άλλο. Η ιδιότητα πλέγμα-πρότυπο-περιοχές είναι ζωτικής σημασίας για αυτό. Όπως μπορείτε να δείτε από τον κώδικα, η κεφαλίδα και το υποσέλιδο καταλαμβάνουν τέσσερα κενά στον πίνακα, καθώς είναι πλήρους πλάτους. Οι πλαϊνές γραμμές καταλαμβάνουν μία υποδοχή η καθεμία, ενώ το περιεχόμενο δύο, χωρίζοντας ουσιαστικά τη μεσαία σειρά του πλέγματος σε τρεις στήλες.

Οθόνη CSS: ενσωματωμένο πλέγμα

Η χρήση της τιμής ενσωματωμένου πλέγματος θα επιτρέψει στο πλέγμα σας να τοποθετηθεί δίπλα σε άλλα στοιχεία, όπως και οι άλλες ενσωματωμένες τιμές σε αυτόν τον οδηγό.

Χρήση CSS Display για Web Design

Η ιδιότητα εμφάνισης CSS προσφέρει έναν εύχρηστο τρόπο προσαρμογής των δομών στοιχείων ιστότοπου χωρίς να χρειάζεται να αλλάξετε τη σήμανση HTML. Αυτό είναι ιδανικό για όσους χρησιμοποιούν πλατφόρμες παράδοσης περιεχομένου όπως το Shopify ή το WordPress, αλλά μπορεί επίσης να είναι χρήσιμο για γενικό σχεδιασμό ιστοσελίδων.