Εμφάνιση παραδειγμάτων css. Παράμετροι για την εμφάνιση στοιχείων html σε μια ιστοσελίδα. Ορατότητα και εμφάνιση ιδιοτήτων CSS. Εμφάνιση στοιχείων λίστας - Δημιουργήστε λίστες με βάση ετικέτες μπλοκ

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

Πιο σύγχρονες έννοιες

Ο τρόπος με τον οποίο εμφανίζεται το περιεχόμενο σε μια ιστοσελίδα έχει αλλάξει αρκετά από τότε εμφάνιση HTML. Όταν οι σχεδιαστές ιστοσελίδων ήθελαν να δημιουργήσουν κάποιο είδος δημιουργικής διάταξης, η πρώτη μέθοδος που χρησιμοποιήθηκε ήταν η ένθεση πινάκων HTML (διατάξεις πίνακα).

Και καθώς το CSS έγινε πιο δημοφιλές, οι κωδικοποιητές μετακινήθηκαν σε κυμαινόμενες διατάξεις, τοποθετώντας περιεχόμενο σε διαφορετικά αιωρούμενα div για να επιτύχουν επιθυμητό αποτέλεσμα. Αυτή η τεχνική εξακολουθεί να είναι πολύ κοινή, αλλά με την εμφάνιση του flexbox (η ευέλικτη διάταξη "κουτιού" στο CSS), αυτή η κατάσταση θα διαρκέσει όλο και λιγότερο. Μόλις η διάταξη αποκριτικής πλαισίου υποστηρίζεται πλήρως από όλα τα προγράμματα περιήγησης, οι αποκριτικές διατάξεις θα γίνουν η κυρίαρχη μέθοδος διάταξης. Ωστόσο, δεν υποστηρίζουν όλα τα προγράμματα περιήγησης την προδιαγραφή flexbox και αυτό εμποδίζει πολύ την ανάπτυξή του.

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

Δηλώνοντας εμφάνιση: flex; για ένα στοιχείο, γίνεται ένα εύκαμπτο δοχείο και τα παιδιά του γίνονται εύκαμπτα στοιχεία αυτού του δοχείου. Οι ιδιότητες flex δεν ισχύουν για τα εγγόνια αυτού του στοιχείου. Τόσο ένα flex δοχείο όσο και τα flex αντικείμενα έχουν τις δικές τους ευέλικτες ιδιότητες.

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

Λάβετε υπόψη ότι το πλέγμα CSS δεν εφαρμόζεται επίσημα σε κανένα πρόγραμμα περιήγησης. Για να το υποστηρίξουν, τα προγράμματα περιήγησης πρέπει να καθορίσουν προθέματα προμηθευτή και να ορίσουν σημαίες.

Πειραματικές τιμές (δεν πρέπει να χρησιμοποιούνται στον κωδικό παραγωγής)

οθόνη: run-in;

Θεωρητικά, εάν ορίσετε την ιδιότητα εμφάνισης ενός στοιχείου σε run-in , αυτό αποδίδεται ως μπλοκ μέσα σε άλλο μπλοκ. Μια περίπτωση χρήσης αυτής της ιδιότητας είναι να υπάρχει μια προσαρμοσμένη μέθοδος για τη δημιουργία επικεφαλίδων που τοποθετούνται οπτικά στην ίδια γραμμή με το επόμενο περιεχόμενο.

Θα μπορούσε επίσης να χρησιμοποιηθεί ένας float για αυτό το σκοπό, αλλά αυτό προϋποθέτει ότι η τιμή εγγράφεται αυτόματα στη συμβολοσειρά και ευθυγραμμίζεται με τη γραμμή βάσης.

Λάβετε υπόψη ότι αυτή η τιμή υποστηρίζεται μόνο σε Internet Explorer 11 και Opera Mini.

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

εμφάνιση: περιεχόμενα;

Η ιδέα πίσω από αυτήν την τιμή είναι ότι όταν τη χρησιμοποιείτε σε ένα στοιχείο, εξαφανίζεται από το DOM, αλλά όλα τα παιδιά του παραμένουν και καταλαμβάνουν το χώρο τους. Αυτή η προδιαγραφή είναι για αυτή τη στιγμήυποστηρίζεται μόνο σε Firefox >59, Chrome >65, Safari 11.1.

Σύντομη περίληψη

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

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

Σύνταξη εμφάνισης CSS

εμφάνιση: τιμή;

Όπου η τιμή μπορεί να λάβει τις ακόλουθες τιμές:

• μπλοκ - στοιχείο μπλοκ (δημιουργεί αυτόματα μια αλλαγή γραμμής)
• inline - inline στοιχείο (δεν δημιουργεί αλλαγή γραμμής).
• Το inline-block είναι παράγωγο του inline. Επίσης, δεν δημιουργεί νέα γραμμή, αλλά στο στοιχείο μπορεί να δοθεί πλάτος και ύψος.
• στοιχείο λίστας - στοιχείο μπλοκ με δείκτη λίστας.
• run-in - ορίζει το στοιχείο ως μπλοκ ή ενσωματωμένο ανάλογα με το περιβάλλον.
• πίνακας - ισοδύναμος με πίνακα (ετικ ), με διάλειμμα γραμμής.
  Το inline-table είναι παράγωγο του πίνακα. Το στοιχείο είναι ενσωματωμένο, αλλά γειτονικά στοιχεία τυλίγονται γύρω του.
  table-caption - δημιουργήστε έναν τίτλο πίνακα (ανάλογο με μια ετικέτα

  );

  πίνακας-κελί - δημιουργία ενός στοιχείου κελιού πίνακα (ανάλογο με μια ετικέτα

  ); πίνακας-στήλη - στοιχείο που ορίζει μια στήλη πίνακα. πίνακας-σειρά - στοιχείο που ορίζει μια σειρά πίνακα. κανένα - το στοιχείο δεν εμφανίζεται στη σελίδα και όλα τα άλλα στοιχεία συμπεριφέρονται σαν να μην υπάρχει καθόλου. κληρονομιά - κληρονομιά από το γονικό στοιχείο. Σημείωση Από προεπιλογή όλα τα στοιχεία είναι inline display :inline Παραδείγματα χρήσης Display Παράδειγμα Νο. 1. Χρήση εμφάνισης: μπλοκ Όπως μπορείτε να δείτε, η γραμμή μετακινήθηκε αυτόματα Στο παράδειγμα, η ιδιότητα border:1px solid #000 προστίθεται για να δείξει πόση περιοχή καταλαμβάνει το στοιχείο μπλοκ. Παράγραφος Νο. 1. Ας δούμε τα στοιχεία της οθόνης. κείμενο με ιδιότητα display:blockΌπως μπορείτε να δείτε, η γραμμή μετακινήθηκε αυτόματα Παράδειγμα Νο. 2. Χρήση οθόνης: κανένα Έτσι φαίνεται στη σελίδα: Παράγραφος Νο. 1. Ας δούμε τα στοιχεία εμφάνισης: κανένα. κείμενο με ιδιότητα display:noneΌπως μπορείτε να δείτε, λείπει το μπλοκ με το κείμενο κανένα Είναι λογικό να συσχετιστεί με το χαρακτηριστικό visibility: hidden, αλλά σε αντίθεση με αυτό, το display:none δεν εκχωρεί χώρο για αντικείμενα. Αυτή η ιδιότητα είναι πολύ χρήσιμη, για παράδειγμα, κατά τη δημιουργία εφέ αναπτυσσόμενου μενού. Παράδειγμα Νο. 3. Χρήση display:inline-block Όπως μπορείτε να δείτε, λείπει το μπλοκ με το κείμενο κανένα Έτσι φαίνεται στη σελίδα: Παράγραφος Νο. 1. Ας δούμε τα στοιχεία. κείμενο με ιδιότητα display:inline-blockΌπως μπορείτε να δείτε, το μπλοκ εισάγεται απευθείας στο περιεχόμενο Η ιδιότητα εμφάνισης είναι υπεύθυνη για την έξοδο και οπτική απεικόνισηστοιχεία στη σελίδα. Μπορείτε επίσης να αλλάξετε την ιδιότητα εμφάνισης χρησιμοποιώντας το . Το ακίνητο δεν κληρονομείται. Οποιοδήποτε στοιχείο html δημιουργεί ένα ορθογώνιο κοντέινερ σε μια ιστοσελίδα. Όλα όσα είναι ορατά στην οθόνη αποτελούνται από διαφορετικούς τύπους δοχείων. Σε κανονική ροή, δημιουργούνται στοιχεία μπλοκ δομικά στοιχείακαι εμφανίζονται κάθετα το ένα πάνω από το άλλο, καταλαμβάνοντας το 100% του πλάτους του μπλοκ κοντέινερ. Τα δοχεία συμβολοσειράς δημιουργούν μπλοκ γραμμώνκαι εμφανίζονται οριζόντια σε μια γραμμή. Το πλάτος των ενσωματωμένων στοιχείων είναι ίσο με το πλάτος του περιεχομένου τους. Ένα ενσωματωμένο στοιχείο μπλοκ δημιουργεί επίσης μια γραμμή κειμένου, με το κάτω μέρος του στοιχείου να βρίσκεται στη γραμμή βάσης της γραμμής κειμένου και να μην σπάει τη γραμμή. Το περιεχόμενο του στοιχείου μορφοποιείται με τον ίδιο τρόπο όπως για τα στοιχεία μπλοκ και το πλάτος του μπλοκ είναι ίσο με το πλάτος του περιεχομένου. Οι πίνακες αντιμετωπίζονται ως μπλοκ από το πρόγραμμα περιήγησης. Τα εσωτερικά στοιχεία του πίνακα δημιουργούν ορθογώνια κουτιά που έχουν περιεχόμενο, επένδυση και πλαίσια συνόρων, αλλά χωρίς πεδία περιθωρίου. Πίνακας 1. Εμφάνιση τιμών ιδιοτήτων απεικόνιση Αξίες: στη γραμμή Προεπιλεγμένη τιμή. Το στοιχείο δημιουργεί ένα ενσωματωμένο μπλοκ. Αναλογική - ετικέτα . ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ Το στοιχείο δημιουργεί ένα δομικό μπλοκ, ακριβώς όπως μια ετικέτα . καλώδιο Το στοιχείο δημιουργεί ένα μπλοκ δομής που δημιουργεί προσαρμοστικό δοχείογια παιδικά στοιχεία. ενσωματωμένο μπλοκ Το στοιχείο δημιουργεί ένα ενσωματωμένο μπλοκ. inline-flex Το στοιχείο δημιουργεί ένα ενσωματωμένο πλαίσιο, το οποίο δημιουργεί ένα αποκριτικό κοντέινερ για θυγατρικά στοιχεία. ενσωματωμένος πίνακας Το στοιχείο ορίζει ένα δομικό μπλοκ που δημιουργεί ένα ενσωματωμένο μπλοκ. στοιχείο λίστας Το στοιχείο δημιουργεί ένα μπλοκ δομής που εμφανίζεται ως στοιχείο λίστας . τραπέζι Το στοιχείο δημιουργεί ένα μπλοκ δομής. Η σελίδα συμπεριφέρεται παρόμοια . . . . . . πίνακας-λεζάντα Το στοιχείο δημιουργεί τον τίτλο του κύριου πίνακα. Η σελίδα συμπεριφέρεται παρόμοια . πίνακας-στήλη Το στοιχείο περιγράφει μια στήλη κελιών, οπτική αναπαράστασηδεν δημιουργείται. Αναλογικό - πίνακας-στήλη-ομάδα Ένα στοιχείο ενώνει μία ή περισσότερες στήλες. Αναλογικό - πίνακα-κελί Το στοιχείο δημιουργεί ξεχωριστό κελίπίνακες, στη σελίδα συμπεριφέρεται παρόμοια Και . πίνακας-κεφαλίδα-ομάδα Το στοιχείο ορίζει μια ομάδα σειρών κεφαλίδας που εμφανίζεται πάντα πριν από άλλες σειρές και ομάδες σειρών. Αναλογικό - επιτραπέζιο υποσέλιδο-ομάδα Το στοιχείο ορίζει μια ομάδα γραμμών κεφαλίδας που εμφανίζεται πάντα μετά από όλες τις άλλες γραμμές και πριν από οποιαδήποτε κάτω κύρια κεφαλίδα. Συμπεριφέρεται παρόμοια πίνακας-σειρά-ομάδα Ένα στοιχείο συνενώνει μία ή περισσότερες γραμμές. Αναλογικό - πίνακας-σειρά Το στοιχείο είναι μια σειρά κελιών. Παράδειγμα - κανένας Το στοιχείο δεν δημιουργεί κανένα κοντέινερ και αφαιρείται εντελώς από τη σελίδα. κληρονομώ Κληρονομεί μια ιδιότητα από ένα γονικό στοιχείο. Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θα μιλήσουμε για έναν αρκετά σημαντικό κανόνα της γλώσσας σήμανσης στυλ που ονομάζεται Display. Ίσως έχετε ήδη δει τις πιο συχνά χρησιμοποιούμενες τιμές του στον κώδικα CSS: μπλοκ οθόνης, κανένα ή ενσωματωμένο. Σε αυτό το άρθρο θα προσπαθήσουμε να τα δούμε όλα αυτά πιο αναλυτικά και με παραδείγματα. Ουσιαστικά, σας επιτρέπει να ορίσετε και, εάν χρειάζεται, να αλλάξετε τους τρόπους εμφάνισης ορισμένων στοιχείων του κώδικα Html. Με τη βοήθειά του, τα στοιχεία μπλοκ μπορούν να γίνουν πεζά ή ακόμα και μια λίστα και χρησιμοποιώντας το display:none μπορείτε να εφαρμόσετε δυναμική σε μια ιστοσελίδα, για παράδειγμα, να δημιουργήσετε αναπτυσσόμενα μενού χωρίς χρήση σεναρίωνσε καθαρό CSS. Εμφάνιση μπλοκ και ενσωματωμένο - πώς να δημιουργήσετε ένα μπλοκ ένα πεζό Όπως μάθαμε ήδη από το μάθημα της γλώσσας Html, τα στοιχεία σχηματίζονται σε ιστοσελίδες χρησιμοποιώντας ετικέτες, οι οποίες με τη σειρά τους επεξεργάζονται από τον αναλυτή Html του προγράμματος περιήγησης που χρησιμοποιείτε και τα εμφανίζονται στην οθόνη του υπολογιστή σας. Ο τρόπος με τον οποίο θα φαίνονται αυτά τα στοιχεία (δημιουργημένα με βάση ετικέτες Html) καθορίζεται στη σύγχρονη γλώσσα σήμανσης στυλ CSS. Ακόμα κι αν δεν έχετε ορίσει ειδικά στυλ για καμία ετικέτα, θα εξακολουθούν να εμφανίζονται από το πρόγραμμα περιήγησης λαμβάνοντας υπόψη τους κανόνες που έχουν υιοθετηθεί για αυτές από προεπιλογή. Πού μπορείτε να δείτε αυτά τα ίδια Προεπιλεγμένα στυλ CSS για όλες τις ετικέτες HTML? Λοιπόν, όλα είναι ίδια σε αυτή τη σελίδα. Εάν μετακινηθείτε στο τέλος του πίνακα περιεχομένων του, θα δείτε τον σύνδεσμο "", όπου θα παρέχονται οι πληροφορίες που χρειαζόμαστε. Προς τι όλα αυτά; Έχω επανειλημμένα, όταν περιγράφω ορισμένες ετικέτες Html, εστιάζω την προσοχή σας σε ποιον τύπο ετικέτας ανήκει αυτή η ετικέτα - πεζά ή μπλοκ. Ανάλογα με αυτό, υποθέσαμε ότι αυτά τα στοιχεία θα είχαν μια συγκεκριμένη συμπεριφορά - είτε θα έτειναν να καταλαμβάνουν όλο τον διαθέσιμο χώρο σε πλάτος (με βάση το μπλοκ), είτε όχι (πεζά). Αλλά ακόμα δεν έχω εξηγήσει από πού προέρχεται αυτή η διαίρεση και πού μπορείτε να μάθετε σε ποιον τύπο ανήκει μια συγκεκριμένη ετικέτα. Έτσι, μπορείτε να το μάθετε στη σελίδα προδιαγραφών CSS που αναφέραμε και ονομάζεται "Προεπιλεγμένο φύλλο στυλ για HTML 4" και ο ειδικός κανόνας εμφάνισης είναι υπεύθυνος για όλο αυτό το χάος. Για παράδειγμα, στην αρχή παρατίθενται όλα τα στοιχεία που ανήκουν στο μπλοκ και αυτό συμβαίνει επειδή ισχύει ο κανόνας σε αυτά εμφάνιση: μπλοκ: Εδώ μπορείτε να δείτε όλες τις ίδιες ετικέτες, κοντέινερ και άλλα μπλοκ στοιχεία. Αν κοιτάξουμε τη λίστα των ιδιοτήτων CSS και τις έγκυρες τιμές για αυτές στο πρόγραμμα επικύρωσης του W3C, τότε για εμφάνιση θα δούμε τα εξής: Εάν δεν καθορίζεται τίποτα άλλο, η επιλογή "display:inline" θα χρησιμοποιηθεί από προεπιλογή (καθώς αυτή είναι η τιμή που καθορίζεται στη στήλη "Initial value"), η οποία θα αντιστοιχεί στον σχηματισμό ενσωματωμένων στοιχείων. Επομένως, στην προδιαγραφή «Προεπιλεγμένο φύλλο στυλ για HTML 4» που δίνεται στη σελίδα, αυτές οι ετικέτες που πρέπει να εμφανίζονται ως πεζά (για παράδειγμα, span) δεν περιγράφονται καθόλου ή η τιμή εμφάνισης δεν καθορίζεται για αυτές, επειδή από προεπιλογή θα είναι πεζά ούτως ή άλλως. Ο κανόνας εμφάνισης είναι υπεύθυνος για τον τρόπο αυτό το στοιχείοπρέπει να κατασκευαστεί και να εμφανιστεί στο πρόγραμμα περιήγησης. Λέει στο πρόγραμμα περιήγησης ποια είναι η ετικέτα και πώς πρέπει να εμφανίζεται. Είναι δυνατό να εμφανιστεί ως στοιχείο σειράς (εμφάνιση: ενσωματωμένη) ή ως μπλοκ (μπλοκ), εμφάνιση ως πίνακας (πίνακας) ή ως μέρος πίνακα (ενσωματωμένος πίνακας | πίνακας-γραμμή-ομάδα | πίνακας-κεφαλίδα- ομάδα |. πίνακας-στήλη-ομάδα | Αυτός ο κανόνας είναι πολύ σημαντικός. Αλλά αυτό που έχει οριστεί από προεπιλογή για ετικέτες δεν είναι καθόλου σταθερή τιμή. Εάν είναι επιθυμητό ή απαραίτητο, μπορείτε πάντα να κάνετε ένα στοιχείο μπλοκ (για το οποίο το πρόγραμμα περιήγησης χρησιμοποίησε την εμφάνιση: αποκλεισμός από προεπιλογή) πεζά και, κατά συνέπεια, αντίστροφα. Ας δούμε ένα απλό παράδειγμα με τρεις ετικέτες, η μία από τις οποίες θα είναι span από προεπιλογή και οι άλλες δύο θα είναι μπλοκ ετικέτες (H3 και P). Για μεγαλύτερη σαφήνεια, συμπλήρωσα την περιοχή που προορίζεται για αυτά τα στοιχεία: Το H3 θα αποδοθεί ως μπλοκ από το πρόγραμμα περιήγησης από προεπιλογή Το Span είναι ένα τυπικό παράδειγμα μιας ετικέτας γραμμής P - άλλο ένα προεπιλεγμένο μπλοκ Ως αποτέλεσμα, το πρόγραμμα περιήγησης εμφάνισε όλα τα στοιχεία σε πλήρη συμφωνία με τις προεπιλεγμένες τιμές κανόνων εμφάνισης: Όπως μπορείτε να δείτε, το πρώτο μπλοκ H3 (με το μπλοκ προεπιλεγμένης τιμής) καταλαμβάνει ολόκληρο το διαθέσιμο οριζόντιο μέγεθος (καθώς και το τρίτο στοιχείο P), ενώ το ενσωματωμένο Span (με την προεπιλεγμένη τιμή εμφάνισης: inline) καταλαμβάνει ακριβώς όσο πλάτος χρειάζεται για την τοποθέτηση του περιεχομένου που περικλείεται σε αυτό. Λοιπόν, ας πάμε τώρα από την αρχική ετικέτα μπλοκ H3 θα κάνουμε μια πεζήπροσθέτοντας ενσωματωμένη οθόνη σε αυτό (έκανα το κείμενο στα δύο πρώτα στοιχεία μικρότερο για να έχω καλύτερο οπτικό αποτέλεσμα): H3 Σπιθαμή Το P είναι μια άλλη προεπιλεγμένη ετικέτα μπλοκ Όπως μπορείτε να δείτε, το πρόγραμμα περιήγησης έλαβε υπόψη το display:inline και τώρα το στοιχείο κεφαλίδας H3 (αρχικά μπλοκ) δεν καταλαμβάνει πλέον όλο τον διαθέσιμο χώρο σε πλάτος, με αποτέλεσμα η ακόλουθη ενσωματωμένη ετικέτα Span να πιεστεί στενά το. Αλλά πίεσε τον προηγούμενο όχι στενά, αλλά χωρισμένος από ένα κενό. Όταν η κεφαλίδα H3 ήταν ένα μπλοκ, αυτό το διάστημα δεν λήφθηκε υπόψη, αλλά αφού μετατράπηκε σε πεζή ετικέτα, όλα αυτά στον κώδικα μετατράπηκαν σε ένα ενιαίο διάστημα σύμφωνα με όλους τους κανόνες της γλώσσας σήμανσης υπερκειμένου, που μπορείτε να διαβάσετε σχετικά στον σύνδεσμο που παρέχεται. Μπορείτε να κάνετε το ίδιο δημιουργήστε μια ετικέτα μπλοκ από μια ενσωματωμένη ετικέτα Spanπροσθέτοντας display:block: H3 Σπιθαμή P - ένα άλλο προεπιλεγμένο στοιχείο Html μπλοκ Και ως αποτέλεσμα, το οπτικό μας βοήθημα θα εμφανίσει τι συνέβη: Το Span άρχισε να καταλαμβάνει ολόκληρη την περιοχή που ήταν διαθέσιμη σε πλάτος, ανεξάρτητα από την ποσότητα περιεχομένου που περικλείεται σε αυτήν την ετικέτα. Εμφάνιση στοιχείων λίστας - Δημιουργήστε λίστες με βάση ετικέτες μπλοκ Τώρα ας δοκιμάσουμε να χρησιμοποιήσουμε το Display για να δημιουργήσουμε μια σειρά μπλοκ ετικέτεςστοιχεία της λίστας. Ο κανόνας θα μας βοηθήσει να το αντιμετωπίσουμε display:list-item. Ας έχουμε αρχικά πολλές παραγράφους και έναν τίτλο: H3 Πρώτη παράγραφος (ετικέτα P) Δεύτερη παράγραφος Τρίτος Το οποίο θα μοιάζει κάπως έτσι: Τώρα, εάν προσθέσουμε τον κανόνα display:list-item σε όλες τις ετικέτες μπλοκ παραγράφων, το πρόγραμμα περιήγησης θα δημιουργήσει μια ειδική περιοχή δείκτη για όλα αυτά τα στοιχεία, στην οποία θα εμφανίζονται οι ίδιοι προεπιλεγμένοι δείκτες: H3 Πρώτη παράγραφος (ετικέτα P) Δεύτερη παράγραφος Τρίτος Αλλά σε αυτή τη φόρμα δεν θα παρατηρήσετε καμία αλλαγή. Η περιοχή του δείκτη προστίθεται πριν από την περιοχή της ετικέτας μπλοκ και για να τη δείτε θα πρέπει να μετακινήσετε με κάποιο τρόπο αυτό το μπλοκ στα αριστερά της άκρης του κοντέινερ στο οποίο βρίσκεται. Αυτό μπορεί να γίνει χρησιμοποιώντας το ίδιο πράγμα, δηλαδή ορίζοντας margin-left:20px για τις απαιτούμενες παραγράφους (ή εσωκλείοντας παραγράφους, για παράδειγμα, in) και, στη συνέχεια, έχουμε την ακόλουθη εικόνα: Αποδεικνύεται ότι χρησιμοποιώντας τον κανόνα Εμφάνιση, μπορείτε ανά πάσα στιγμή να αλλάξετε τα στοιχεία που υπάρχουν ήδη στον κώδικα Html σε άλλα (απλά αλλάζοντας τον τρόπο εμφάνισης τους στην ιστοσελίδα), χωρίς να αλλάξετε αυτές τις ίδιες ετικέτες. Το γεγονός είναι ότι μπορεί να υπάρχουν πολλές ετικέτες στον κώδικα και θα είναι δύσκολο να τις αλλάξετε όλες με μη αυτόματο τρόπο, αλλά με τη βοήθεια του Display αυτό μπορεί να γίνει με μερικά κλικ μέσω ενός εξωτερικού αρχείου τύπου cascading, το οποίο είναι πολύ βολικός. Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου Μπορείτε να παρακολουθήσετε περισσότερα βίντεο μεταβαίνοντας στο ");"> Μπορεί να σας ενδιαφέρει Float and clear in CSS - block layout tools Θέση (απόλυτη, σχετική και σταθερή) - μέθοδοι Τοποθέτηση HTMLστοιχεία στο CSS (κανόνες αριστερά, δεξιά, πάνω και κάτω) Τοποθέτηση χρησιμοποιώντας τον κανόνα Z-index και CSS Cursor για την αλλαγή του δρομέα του ποντικιού Ύψος, πλάτος και υπερχείλιση - Κανόνες CSSγια να περιγράψετε μια περιοχή περιεχομένου όταν διάταξη μπλοκ Ιδιότητες CSSκείμενο-διακόσμηση, κάθετη στοίχιση, στοίχιση κειμένου, εσοχή κειμένου για διακόσμηση κειμένου σε Html Η εμφάνιση είναι η πιο σημαντική ιδιότητα στυλ στο CSS για τον έλεγχο προτύπων. Κάθε στοιχείο έχει μια προεπιλεγμένη τιμή εμφάνισης ανάλογα με τον τύπο του στοιχείου. Για τα περισσότερα στοιχεία, οι προεπιλεγμένες τιμές εμφάνισης θα είναι συνήθως μπλοκ ή ενσωματωμένες. Στο πρωτότυπο, ένα στοιχείο μπλοκ ονομάζεται συχνά στοιχείο σε επίπεδο μπλοκ. Ένα ενσωματωμένο στοιχείο δεν έχει εναλλακτικό όνομα. ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ Το div είναι ένα τυπικό στοιχείο μπλοκ. Τα στοιχεία μπλοκ ξεκινούν από μια νέα γραμμή και το περιεχόμενό τους εκτείνεται αριστερά και δεξιά όσο το δυνατόν περισσότερο. Άλλα κοινά στοιχεία μπλοκ είναι το p και το form, καθώς και νέα στοιχεία μπλοκ από την HTML5 όπως κεφαλίδα, υποσέλιδο, ενότητα και άλλα. στη γραμμή Το άνοιγμα είναι στάνταρ ενσωματωμένο στοιχείο. Ένα ενσωματωμένο στοιχείο μπορεί να τυλίξει κείμενο μέσα σε μια παράγραφο σαν αυτόχωρίς να διαταράσσεται η δομή του. Το πιο κοινό ενσωματωμένο στοιχείο είναι ένα αφού το χρησιμοποιείτε για συνδέσμους. κανένας Μια άλλη κοινή τιμή εμφάνισης είναι καμία . Ορισμένα εξειδικευμένα στοιχεία όπως το σενάριο χρησιμοποιούν αυτήν την τιμή από προεπιλογή. Χρησιμοποιείται ευρέως με τη JavaScript για απόκρυψη και εμφάνιση στοιχείων αντί να τα αφαιρεί και να τα δημιουργεί ξανά. Είναι διαφορετικό από την ορατότητα. Η ρύθμιση της ιδιότητας εμφάνισης σε κανένα θα κάνει τη σελίδα να εμφανίζεται σαν να μην υπάρχει το στοιχείο. ορατότητα: κρυφό; απλώς θα κρύψει το στοιχείο, αλλά το στοιχείο θα συνεχίσει να καταλαμβάνει χώρο σαν να ήταν πλήρως ορατό. άλλες τιμές εμφάνισης Υπάρχουν πολλές ακόμη τιμές εξωτικού στυλ για εμφάνιση, όπως στοιχείο λίστας και πίνακας. Εδώ είναι η πλήρης λίστα. Θα συζητήσουμε το inline-block και το flex αργότερα. πρόσθεση Όπως είπα πριν, κάθε στοιχείο έχει έναν προεπιλεγμένο τύπο εμφάνισης. Ωστόσο, μπορείτε πάντα να το παρακάμψετε! Αν και αυτό δεν θα είχε νόημα για τη δημιουργία ενός ενσωματωμένου div, μπορείτε να το χρησιμοποιήσετε για να προσαρμόσετε την εμφάνιση στοιχείων με ιδιωτική σημασιολογία. Χαρακτηριστικό παράδειγμα– τη δυνατότητα δημιουργίας στοιχείων li για οριζόντιο μενού. 2 / 19 Έχετε ερωτήσεις; Ονομα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ * Μήνυμα * Στείλετε Αναφέρετε ένα τυπογραφικό λάθος Κείμενο που θα σταλεί στους συντάκτες μας: Το σχόλιό σας (προαιρετικό): Στείλετε Ματαίωση