Χρήση CSS Display για τον έλεγχο των διατάξεων ιστότοπου

Χρήση CSS Display για τον έλεγχο των διατάξεων ιστότοπου

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





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



τι μπορεί να μην υποστηρίζεται αυτό το αξεσουάρ
ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

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

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





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

κείμενο με ενσωματωμένη τιμή css

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

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>CSS Display Values</title> 
   <style> 
   .inline { 
       display: inline; 
       font-size: 3rem; 
   } 
   #inline-1 { 
       background-color: yellow; 
       padding: 10px 0px 10px 10px; 
   } 
   #inline-2 { 
       background-color: lightgreen; 
       padding: 10px 10px 10px 0px; 
   } 
   </style> 
 </head> 
 <body> 
   <h1>CSS Display Inline</h1> 
   <div class="inline" id="inline-1">This is text</div> 
   <div class="inline" id="inline-2">with the inline property value.</div> 
 </body> 
</html>

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



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

στοιχεία με μπλοκ εμφάνισης css

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

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>CSS Display Values</title> 
   <style> 
       .block { 
           display: block; 
           font-size: 3rem; 
           width: fit-content; 
       } 
       #block-1 { 
           background-color: yellow; 
           padding: 10px 10px 10px 10px; 
       } 
       #block-2 { 
           background-color: lightgreen; 
           padding: 10px 10px 10px 10px; 
       } 
   </style> 
 </head> 
 <body> 
       <h1>CSS Display Block</h1> 
       <div class="block" id="block-1">This is text</div> 
       <div class="block" id="block-2">with the block property value.</div> 
 </body> 
</html>

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



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

στοιχεία html με τιμή inline-block css

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

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>CSS Display Values</title> 
   <style> 
       .inline-block { 
           display: inline-block; 
           font-size: 3rem; 
           width: fit-content; 
       } 
       #inline-block-1 { 
           background-color: yellow; 
           padding: 10px 10px 10px 10px; 
       } 
       #inline-block-2 { 
           background-color: lightgreen; 
           padding: 10px 10px 10px 10px; 
       } 
   </style> 
 </head> 
 <body> 
       <h1>CSS Display Inline-Block (width set)</h1> 
       <div class="inline-block" id="inline-block-1">This is text</div> 
       <div class="inline-block" id="inline-block-2">with the inline-block property 
       value.</div> 
 </body> 
</html>

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



Απόκρυψη στοιχείων ιστότοπου με οθόνη CSS: κανένα

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

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

css οθόνη flexbox

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

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

πώς να δείτε ποιος είδε το σύνδεσμό σας 
<!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>CSS Display Values</title> 
   <style> 
       .flex { 
            display: flex; 
            font-size: 3rem; 
       } 
       #flex-1 { 
            background-color: yellow; 
            width: 40%; 
            height: 100px; 
       } 
       #flex-2 { 
            background-color: lightgreen; 
            width: 25%; 
            height: 100px; 
       } 
       #flex-3 { 
            background-color: lightblue; 
            width: 35%; 
            height: 100px; 
       } 
   </style> 
 </head> 
 <body> 
       <h1>CSS Display Flex</h1> 
       <div class="flex"> 
            <div id="flex-1"></div> 
            <div id="flex-2"></div> 
            <div id="flex-3"></div> 
       </div> 
 </body> 
</html>

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

css οθόνη flexbox με ενσωματωμένη τιμή

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

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>CSS Display Values</title> 
   <style> 
       .inline-flex { 
            display: inline-flex; 
            font-size: 3rem; 
            width: 49.8%; 
       } 
       #inline-flex-1 { 
            background-color: yellow; 
            width: 40%; 
            height: 100px; 
       } 
       #inline-flex-2 { 
            background-color: lightgreen; 
            width: 25%; 
            height: 100px; 
       } 
       #inline-flex-3 { 
            background-color: lightblue; 
            width: 35%; 
            height: 100px; 
       } 
   </style> 
 </head> 
 <body> 
       <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

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

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

πώς να καρφιτσώσετε ένα παιχνίδι ατμού στη γραμμή εργασιών

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

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

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

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

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

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

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>CSS Display Values</title> 
   <style> 
       .table { 
            display: table; 
            font-size: 3rem; 
       } 
       .header { 
            display: table-header-group; 
            font-size: 3rem; 
       } 
       #column-1 { 
            display: table-column-group; 
            background-color: yellow; 
       } 
       #column-2 { 
            display: table-column-group; 
            background-color: lightgreen; 
       } 
       #column-3 { 
            display: table-column-group; 
            background-color: lightblue; 
       } 
       #row-1 { 
            display: table-row; 
       } 
       #row-2 { 
            display: table-row; 
       } 
       #row-3 { 
            display: table-row; 
       } 
       #cell { 
            display: table-cell; 
            padding: 10px; 
            width: 20%; 
       } 
   </style> 
 </head> 
 <body> 
   <h1>CSS Display Table</h1> 
   <div class="table"> 
        <div id="column-1"></div> 
        <div id="column-2"></div> 
        <div id="column-3"></div> 
        <div class="header"> 
            <div id="cell">Name</div> 
            <div id="cell">Age</div> 
            <div id="cell">Country</div> 
        </div> 
        <div id="row-1"> 
            <div id="cell">Jeff</div> 
            <div id="cell">21</div> 
            <div id="cell">USA</div> 
        </div> 
        <div id="row-2"> 
            <div id="cell">Sue</div> 
            <div id="cell">34</div> 
            <div id="cell">Spain</div> 
        </div> 
        <div id="row-3"> 
            <div id="cell">Boris</div> 
            <div id="cell">57</div> 
            <div id="cell">Singapore</div> 
        </div> 
   </div> 
 </body> 
</html>

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

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

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

στοιχεία css με τιμή πλέγματος

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

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="utf-8"> 
   <title>CSS Display Values</title> 
   <style> 
       .grid { 
           display: grid; 
           font-size: 3rem; 
           grid-template-areas: 
                  'header header header header' 
                  'left-sidebar content content right-sidebar' 
                  'footer footer footer footer'; 
           gap: 10px; 
       } 
       #grid-1 { 
            grid-area: header; 
            background-color: yellow; 
            height: 100px; 
            padding: 20px; 
            text-align: center; 
       } 
       #grid-2 { 
            grid-area: left-sidebar; 
            background-color: lightgreen; 
            height: 200px; 
            padding: 20px; 
            text-align: center; 
       } 
       #grid-3 { 
            grid-area: content; 
            background-color: lightblue; 
            height: 200px; 
            padding: 20px; 
            text-align: center; 
       } 
       #grid-4 { 
            grid-area: right-sidebar; 
            background-color: lightgreen; 
            height: 200px; 
            padding: 20px; 
            text-align: center; 
       } 
       #grid-5 { 
            grid-area: footer; 
            background-color: yellow; 
            height: 100px; 
            padding: 20px; 
            text-align: center; 
       } 
   </style> 
 </head> 
 <body> 
   <h1>CSS Display Grid</h1> 
   <div class="grid"> 
      <div id="grid-1">Header</div> 
      <div id="grid-2">Left Sidebar</div> 
      <div id="grid-3">Content</div> 
      <div id="grid-4">Right Sidebar</div> 
      <div id="grid-5">Footer</div> 
   </div> 
 </body> 
</html>

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

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

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

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

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