Υποενότητα 3.2: Εισαγωγή CSS

Προτεραιότητα κανόνων

Όπως είδαμε, υπάρχουν τρεις τρόποι για να εφαρμόσουμε στυλ στο HTML.

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

Για παράδειγμα, πάρτε το στοιχείο p.

Το external style sheet είναι:

p { color: red; text-align:center;}

Το internal style sheet είναι:

p { color: green; }

Το inline style είναι:

<p style="color:pink; background-color:grey;">

Πώς περιμένετε να εμφανιστεί η παράγραφος;

Σύμφωνα με τον κανόνα, το πλησιέστερο στυλ είναι το στοιχείο που θα έχει η υψηλότερη προτεραιότητα.

Έτσι έχουμε: : inline style >  internal style sheet > external style sheet

Αυτό σημαίνει ότι για τις κοινές ιδιότητες, το inline style θα υπερκεράσει την τιμή που έχει τοποθετηθεί στο internal ή στο external style sheet. Επίσης, το internal style sheet θα υπερκεράσει την τιμή του external.

Σημείωση

Ο κανόνας εφαρμόζεται μόνο στις κοινές ιδιότητες. Οι ιδιότητες που έχουν οριστεί μόνο σε ένα σημέιο θα εξακολουθούν να εμφανίζονται.

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

For more information: https://www.w3schools.com/css/css_howto.asp