Χρησιμοποιώντας το CSS για την τοποθέτηση στοιχείων HTML

• Ενδέχεται 2, 2024

Οι κανόνες CSS σάς δίνουν τη δυνατότητα να τοποθετείτε τα στοιχεία HTML ακριβώς εκεί που τα θέλετε. Μπορείτε να προσαρμόσετε τον τρόπο με τον οποίο αντιδρούν σε άλλα στοιχεία που κάθονται γύρω από αυτά ή ακόμα και να τα αποκρύψετε εντελώς. Ακολουθεί ανάλυση των ιδιοτήτων τοποθέτησης CSS.

Οθόνη: Αυτή η ιδιότητα καθορίζει τον τρόπο εμφάνισης ενός στοιχείου. Η ρύθμιση της εμφάνισης σε "κανένα" αποκρύπτει πλήρως το στοιχείο, ενώ άλλες τιμές μπορούν να αλλάξουν τον τρόπο με τον οποίο ένα στοιχείο αντιδρά με άλλες ιδιότητες και στοιχεία. Για παράδειγμα, τα divs έχουν οριστεί να εμφανίζονται ως "block" από προεπιλογή, πράγμα που σημαίνει ότι λειτουργούν ως ορθογώνιο αντικείμενο, αλλά μπορείτε να χρησιμοποιήσετε το "display: inline" για να αναγκάσετε ένα div να ενεργήσει σαν μια παράγραφο. Ή μπορείτε να κάνετε το αντίθετο και να χρησιμοποιήσετε το "display: block" για να αναγκάσετε μια παράγραφο να ενεργήσει σαν div.

Θέση: Καθορίζει πώς ένα στοιχείο αντιδρά στα στοιχεία γύρω από αυτό. Τα στοιχεία χρησιμοποιούν από προεπιλογή την ένδειξη "position: static", που σημαίνει ότι εμφανίζονται με τη σειρά που εμφανίζονται στον κώδικα HTML. "Θέση: σχετικός" σημαίνει ότι υπολογίζεται η στατική θέση του στοιχείου και στη συνέχεια αντισταθμίζεται από όσα υποδεικνύετε στις ιδιότητες "κορυφή" και "αριστερά". Τα άλλα στοιχεία της σελίδας λειτουργούν σαν να ήταν το σχετικό στοιχείο ακόμα στη στατική του θέση. Τα στοιχεία "Θέση: απόλυτα" αγνοούν τη στατική τους θέση, στηρίζοντας τη θέση τους αποκλειστικά στις τιμές στην επάνω, αριστερή, δεξιά και κάτω ιδιότητες. Επιπλέον, άλλα στοιχεία θα αγνοήσουν αυτό το στοιχείο (οπότε αν δεν είστε προσεκτικοί, μπορείτε να καταλήξετε με κάποιες ακατάστατες επικαλύψεις). Η "θέση: σταθερή" είναι παρόμοια με τη "θέση: απόλυτη" εκτός από το ότι το στοιχείο θα κρατήσει τη θέση του, ακόμη και αν ο επισκέπτης σας μετατοπίσει τη σελίδα.

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

Float: Ορίζει εάν ένα στοιχείο θα καταλήγει στα αριστερά ή δεξιά από άλλα στοιχεία (ή δεν θα καταρρεύσει καθόλου, το οποίο είναι το προεπιλεγμένο). Αυτή η ιδιότητα είναι εξαιρετικά χρήσιμη για τη σωστή τοποθέτηση σχετικών στοιχείων. Πρέπει να ορίσετε ένα πλάτος για οποιοδήποτε στοιχείο επίπλευσης ή δεν θα εμφανιστεί σωστά. Επίσης, εάν χρησιμοποιείτε float για ένα στοιχείο, ίσως θέλετε να ορίσετε την ιδιότητα για όλα τα στοιχεία γύρω από αυτήν.

Clear: Αυτή η ιδιότητα λειτουργεί σε συνδυασμό με την ιδιότητα "float". Αποφασίζει πώς το στοιχείο θα αφήσει άλλα στοιχεία να επιπλέουν γύρω του - "clear: left" σημαίνει ότι κανένα άλλο στοιχείο δεν μπορεί να επιπλέει στα αριστερά του. Το "clear: right" αποκλείει τη δεξιά πλευρά και το "clear: both" σημαίνει ότι κανένα στοιχείο δεν μπορεί να επιπλέει και στις δύο πλευρές. Η προεπιλεγμένη ρύθμιση είναι "καθαρή: καμία" (δηλαδή άλλα στοιχεία μπορούν να επιπλέουν σε κάθε πλευρά).

Οδηγίες Βίντεο: CSS Efecto - 02 PseudoElementos @JoseCodFacilito (Ενδέχεται 2024).