Στιλ και προτεραιότητες
Όταν σε ένα στοιχείο δηλωθούν ιδιότητες με διαφορετικές τιμές, τότε τίθεται το ερώτημα ποια ιδιότητα έχει προτεραιότητα.
Ο βασικός κανόνας είναι αυτός που ορίζεται από τον μηχανισμό cascading. Σύμφωνα με αυτόν προτεραιότητα έχει η ιδιότητα που καταχωρείται τελευταία (διαβάζοντας τα στιλ από πάνω προς τα κάτω). Επίσης μεγαλύτερη προτεραιότητα έχει το στιλ που ορίζεται μέσα στην ετικέτα με την ιδιότητα style
.
Εκτός από τη σειρά (source order) υπάρχουν ακόμα δυο παράγοντες που επηρεάζουν το τελικό αποτέλεσμα. Αυτοί είναι: Importance
και Specificity
.
Συνολικά έχουμε:
- Source order (σειρά)
- Importance (σπουδαιότητα)
- Specificity (προσδιορισιμότητα ή ιδιαιτερότητα)
Source order (σειρά)
Δείτε παράδειγμα: Source order (σειρά)
<!DOCTYPE html> <html> <head> <title>cascading source order</title> <meta charset="utf-8" /> <style type="text/css"> p { color: red; } p { color: green; } </style> </head> <body> <p>This is green (η πιο τελευταία δήλωση είναι η green)</p> <p style = "color:blue">This is blue (η δήλωση στην ετικέτα έχει προτεραιότητα)</p> </body> </html>
Importance (σπουδαιότητα)
Η σπουδαιότητα δηλώνεται στην τιμή μιας ιδιότητας με τη λέξη !important
και υπερισχύει του παράγοντα Source order (σειρά).
Δείτε παράδειγμα: Importance order
<!DOCTYPE html> <html> <head> <title>cascading importance</title> <meta charset="utf-8" /> <style type="text/css"> p { color: red !important; } p { color: green; } </style> </head> <body> <p>This is red (η πιο τελευταία δήλωση είναι η green αλλά υπερισχύει το red λόγω !important)</p> <p style = "color:blue">This is red (η δήλωση !important υπερισχύει και της style)</p> </body> </html>
Specificity (προσδιορισιμότητα)
Ο παράγων Specificity
ορίζει πόσο γενικός ή ειδικός είναι ο επιλογέας (selector). Όσο πιο ειδικός ή πιο συγκεκριμένος είναι ο επιλογέας τόσο μεγαλύτερη προτεραιότητα έχει.
Για παράδειγμα ο επιλογέας
p { ... }είναι πολύ γενικός γιατί αναφέρεται σε όλα τα
p
του εγγράφου. Αντίθετα ο επιλογέας div > p { ... }έχει μεγαλύτερη προτεραιότητα ακόμα και αν βρίσκεται πιο πάνω στη σειρά διότι αναφέρεται σε κάτι πιο συγκεκριμένο που είναι τα
p
τα οποία είναι άμεσα παιδιά των div
.
Σε γενικές γραμμές μεγαλύτερο specificity έχουν οι επιλογείς με id. Για παράδειγμα:
#main {...}μετά οι κλάσεις, για παράδειγμα:
.content {...}και τέλος οι ετικέτες όπως για παράδειγμα
p {...}
Δείτε παράδειγμα: Specificity (προσδιορισιμότητα)
<!DOCTYPE html> <html> <head> <title>cascading specificity</title> <meta charset="utf-8" /> <style type="text/css"> div > p { color: red; } p { color: green; } </style> </head> <body> <p>This is green (καλύπτεται από το γενικό p)</p> <div> <p>This is red (καλύπτεται από το ειδικό p με το p άμεσο παιδί του div)</p> </div> </body> </html>