Πώς λειτουργεί η κληρονομιά CSS σε έγγραφα Ιστού

Ένα σημαντικό κομμάτι του σχεδιασμού μιας ιστοσελίδας με CSS είναι η κατανόηση της έννοιας της κληρονομιάς.

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

Τι είναι η Κληρονομιά CSS;

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

Για παράδειγμα, αυτός ο κώδικας HTML παρακάτω έχει μια ετικέτα H1 που περικλείει μια ετικέτα EM:

Αυτή είναι μια μεγάλη επικεφαλίδα

Το στοιχείο EM είναι ένα παιδί του στοιχείου H1 και όλα τα στυλ στο H1 που κληρονομούνται θα μεταφερθούν και στο κείμενο EM. Για παράδειγμα:

h1 {μέγεθος γραμματοσειράς: 2em; }}

Δεδομένου ότι η ιδιότητα μεγέθους γραμματοσειράς κληρονομούνται, το κείμενο που λέει "Big" (που είναι αυτό που περικλείεται μέσα στις ετικέτες EM) θα έχει το ίδιο μέγεθος με το υπόλοιπο του H1. Αυτό οφείλεται στο γεγονός ότι κληρονομεί την τιμή που έχει οριστεί στην ιδιότητα CSS.

Πώς να χρησιμοποιήσετε την κληρονομιά CSS

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

Ο καλύτερος τρόπος για να χρησιμοποιήσετε αυτό είναι να ρυθμίσετε τα βασικά σας στυλ σε ένα στοιχείο πολύ υψηλού επιπέδου, όπως το ΣΩΜΑ. Εάν ορίσετε την οικογένεια γραμματοσειρών στην ιδιότητα του σώματος, τότε, χάρη στην κληρονομιά, ολόκληρο το έγγραφο θα διατηρήσει την ίδια οικογένεια γραμματοσειρών. Αυτό θα κάνει πραγματικά για τα μικρότερα φύλλα στυλ που είναι πιο εύκολο να διαχειριστεί, επειδή υπάρχουν λιγότερα γενικά στυλ. Για παράδειγμα:

σώμα {font-family: Arial, sans-serif; }}

Χρησιμοποιήστε την τιμή στυλ κληρονομίας

Κάθε ιδιότητα CSS περιλαμβάνει την τιμή "κληρονομούν" ως πιθανή επιλογή. Αυτό λέει στο πρόγραμμα περιήγησης στο Web, ότι ακόμα και αν η ιδιότητα δεν θα κληρονομούσε κανονικά, θα πρέπει να έχει την ίδια τιμή με τον γονέα. Εάν ορίσετε ένα στυλ όπως ένα περιθώριο που δεν είναι κληρονομικό, μπορείτε να χρησιμοποιήσετε την τιμή κληρονομίας σε επόμενες ιδιότητες για να τους δώσετε το ίδιο περιθώριο με το γονικό. Για παράδειγμα:

σώμα {περιθώριο: 1em; } p {περιθώριο: κληρονομήσει. }}

Η κληρονομιά χρησιμοποιεί υπολογισμένες αξίες

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

Εάν ορίσετε ένα μέγεθος γραμματοσειράς 1em στο στοιχείο BODY, ολόκληρη η σελίδα σας δεν θα έχει μόνο 1μέγεθος. Αυτό οφείλεται στο γεγονός ότι στοιχεία όπως οι επικεφαλίδες (H1-H6) και άλλα στοιχεία (μερικά προγράμματα περιήγησης υπολογίζουν διαφορετικά τις ιδιότητες πίνακα) έχουν σχετικό μέγεθος στο πρόγραμμα περιήγησης στο Web. Ελλείψει άλλων πληροφοριών μεγέθους γραμματοσειράς, το πρόγραμμα περιήγησης στο Web θα κάνει πάντα έναν τίτλο H1 το μεγαλύτερο κείμενο στη σελίδα, ακολουθούμενο από H2 και ούτω καθεξής. Όταν ρυθμίζετε το στοιχείο BODY σε ένα συγκεκριμένο μέγεθος γραμματοσειράς, τότε αυτό χρησιμοποιείται ως το "μέσος" μέγεθος γραμματοσειράς και τα στοιχεία επικεφαλίδας υπολογίζονται από αυτό.

Μια σημείωση σχετικά με την κληρονομιά και τις ιδιότητες φόντου

Υπάρχουν ορισμένα στυλ που παρατίθενται δεν έχουν κληρονομήσει στο CSS 2 στο W3C, αλλά τα προγράμματα περιήγησης Web εξακολουθούν να κληρονομούν τις τιμές. Για παράδειγμα, αν έχετε γράψει τα ακόλουθα HTML και CSS: