CSS Advanced Syntax

Ομαδοποίηση επιλογέων

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

h1,h2,h3,h4,h5,h6 {
  χρώμα: πράσινο;
  }

Κληρονομικότητα και προβλήματα

Σύμφωνα με το CSS, τα στοιχεία του υποκείμενου στοιχείου κληρονομούν τις ιδιότητες από το πατέρα τους. Αλλά αυτό δεν συμβαίνει πάντα με αυτόν τον τρόπο. Δείτε το παρακάτω κανόνα:

body {
     font-family: Verdana, sans-serif;
     }

Σύμφωνα με αυτόν τον κανόνα, το στοιχείο body του ιστοχώρου θα χρησιμοποιήσει τη γραμματοσειρά Verdana (αν το σύστημα του επισκέπτη έχει αυτή τη γραμματοσειρά).

Με την κληρονομικότητα του CSS, τα στοιχεία του υποκείμενου στοιχείου θα κληρονομήσουν τις ιδιότητες του ανώτερου στοιχείου (στο παρόν παράδειγμα το στοιχείο body), όπως τα στοιχεία p, td, ul, ol, ul, li, dl, dt και dd. Χωρίς άλλες κανόνες, όλα τα στοιχεία του body θα πρέπει να εμφανίζονται με τη γραμματοσειρά Verdana, και τα στοιχεία του υποκείμενου στοιχείου του επίσης. Και στην πλειοψηφία των σύγχρονων προγραμμάτων περιήγησης, αυτό είναι το σενάριο.

Αλλά σε αυτά τα αίματη χρόνια του αγώνα των προγραμμάτων περιήγησης, αυτό δεν είναι απαραίτητα το σενάριο, καθώς η υποστήριξη των стандартών δεν ήταν η προτεραιότητα των επιχειρήσεων. Για παράδειγμα, το Netscape 4 δεν υποστηρίζει την κληρονομικότητα, αγνοεί τη κληρονομικότητα και τις κανόνες που εφαρμόζονται στο στοιχείο body. Το IE/Windows μέχρι και το IE6 έχει σχετικά προβλήματα, τα στυλ γραμματοσειράς εντός των πινάκων θα αγνοηθούν. Τι θα κάνουμε τώρα;

Φιλικά προς το Netscape 4

Ευτυχώς, μπορείτε να χειριστείτε το πρόβλημα που δεν καταλαβαίνουν τα παλιά προγράμματα περιήγησης την κληρονομικότητα χρησιμοποιώντας τον κανόνα της πλεονάζουσας φιλικότητας που ονομάζουμε "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Browsers version 4.0 cannot understand inheritance, but they can understand group selectors. Although this may waste some bandwidth for users, it must be done if support is needed for Netscape 4 users.

Is Inheritance a Curse?

If you do not want the "Verdana, sans-serif" font to be inherited by all child elements, what should you do? For example, you want the paragraph font to be Times. No problem. Create a special rule for p so that it will break away from the parent element's rules:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }