Ανασκόπηση του επιπέδου προτεραιότητας του στυλ CSS

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

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

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

Προεπιλεγμένες μορφές προγράμματος περιήγησης

Τα Firefox, το Chrome, το Safari, το Opera και ο Internet Explorer είναι σήμερα τα κορυφαία πέντε προγράμματα περιήγησης επιφάνειας εργασίας στην αγορά. Αυτά τα προγράμματα περιήγησης και όλα τα άλλα προγράμματα περιήγησης ακολουθούν έναν τυπικό κανόνα που περιλαμβάνει ενσωματωμένα στυλ προεπιλογής για την απόδοση των στοιχείων HTML.

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

Όμως, αν επιθεωρήσουμε προσεκτικά αυτά τα στοιχεία, κάθε πρόγραμμα περιήγησης έχει (ελαφρώς) διαφορετικές τιμές για το δικό του “Προκαθορισμένο” δήλωσης που προκαλεί ασυνέπεια στα προγράμματα περιήγησης, ιδίως στο παλιό, όπως τα IE6, 7 και το Firefox 3.0.

Για παράδειγμα, όπως μπορείτε να δείτε από το παραπάνω στιγμιότυπο οθόνης, ο νέος Firefox έδωσε το blockquote με προεπιλογή με περιθώριο: 16px 40px 16px 40px, ενώ από την άλλη πλευρά το Internet Explorer 7 θα αποδώσει blockquote με περιθώριο: 0px 40px.

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

Υπάρχουν πολλά CSS διαθέσιμα, αλλά εδώ είναι τα τρία μου αγαπημένα:

• Normalize.css
• Επαναφορά CSS
• HTML5 Επαναφορά φύλλου στυλ

Επιλογείς

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

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

Τύπος επιλογέα

Έχουμε αναφερθεί μία φορά παραπάνω, ο επιλογέας τύπου θα στοχεύσει οποιαδήποτε συγκεκριμένα στοιχεία HTML στο έγγραφο. Για παράδειγμα:

 p / ** δήλωση ** / 

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

Επιλογή κατηγορίας

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

 .πλαίσιο / ** δήλωση ** / 

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

 p.box / ** δήλωση ** / 

Θα στοχεύει μόνο το Π στοιχείο που έχει το κουτί τάξη.

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

Επιλογή επιλογής

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

 
Περιεχόμενο
 

Σε περίπτωση που έχουμε ένα ταυτότητα σε ένα στοιχείο, μπορούμε να χρησιμοποιήσουμε το id επιλογέα να στοχεύσετε αυτό το στοιχείο. ο επιλογέας id ορίζεται με ένα hash # # παράμετρο.

 #uniqueID / ** δήλωση ** / 

Δεδομένου ότι το ταυτότητα είναι μοναδικό, έχει το υψηλότερο επίπεδο προτεραιότητας του τύπου επιλογέα. Έτσι, όταν δηλώνουμε στυλ με το ταυτότητα selector θα καταργήσει τελικά όλη την ίδια δήλωση από το Τάξη, Τύπος επιλογείς και το Προεπιλεγμένο πρόγραμμα περιήγησης στυλ.

Ενσωμάτωση των Στυλ

Έχουμε έρθει σε όλους τους βασικούς βασικούς επιλογείς και τώρα θα εξετάσουμε πώς αυτά τα στυλ είναι ενσωματωμένα σε ένα έγγραφο HTML.

Εξωτερικά Στυλ

Τα εξωτερικά στυλ είναι τα στυλ που προστίθενται σε ένα ξεχωριστό αρχείο, συνήθως σε ένα .css που στη συνέχεια συνδέονται με το έγγραφο HTML χρησιμοποιώντας το ετικέτα για να εφαρμόσετε αυτά τα στυλ.

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

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

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

Εσωτερικές Στυλ

Τα εσωτερικά στυλ είναι τα στυλ που είναι ενσωματωμένα απευθείας σε ένα έγγραφο HTML, γενικά μέσα στο ετικέτα.

Αλλά αυτή η πρακτική δεν συνιστάται όταν θα έχετε εκατοντάδες γραμμές στυλ καθώς η σελίδα σας HTML θα είναι πολύ μεγάλη και το στυλ θα επηρεάσει μόνο το πού ενσωματώνονται τα στυλ. Όταν αφήσετε να λέτε δέκα σελίδες, θα χρειαστεί να αντιγράψετε αυτά τα στυλ και να τα ενσωματώσετε σε όλες τις σελίδες και όταν πρέπει να αλλάξετε τα στυλ, πρέπει να τα αλλάξετε σε δέκα διαφορετικές σελίδες, κάτι που είναι προφανώς μια κουραστική εργασία.

Με βάση το επίπεδο προτεραιότητάς του, το εσωτερικό στυλ είναι υψηλότερο, οπότε θα αντικαταστήσει τα εξωτερικά στυλ.

Inline Styles

Τα γραμμικά στυλ είναι τα στυλ που είναι ενσωματωμένα απευθείας στο στοιχείο HTML.

 
Πρόκειται για μια παράγραφο
 

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

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

Περαιτέρω ανάγνωση: Τρεις τρόποι εισαγωγής CSS - W3CSchools.

Ο σημαντικός κανόνας

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

Έχουμε την ακόλουθη ετικέτα αγκύρωσης με ενσωματωμένα στυλ

 Αυτός είναι ένας σύνδεσμος 

Και έχουμε επίσης ένα ξεχωριστό ύφος για την ετικέτα αγκύρωσης στο φύλλο στυλ.

 ένα σύνορο: 1px στερεό # 333; φόντο-χρώμα: # 555;  

Σε αυτό το παράδειγμα, μπορούμε να χρησιμοποιήσουμε το !σπουδαίος για να αναγκάσετε το πρόγραμμα περιήγησης να χρησιμοποιήσει τα στυλ στο φύλλο στυλ αντί για το στοιχείο του στοιχείου.

 ένα border: 1px solid # 333! important; φόντο-χρώμα: # 555!  

ο !σπουδαίος κανόνας θα υποδηλώνει ότι αυτό το στυλ είναι το μεγαλύτερο σπουδαίος και πρέπει να εφαρμοστεί πάνω από το άλλο στυλ ακόμη και όταν είναι άμεσα ενσωματωμένο στο στοιχείο (Inline Styles).

Περαιτέρω ανάγνωση: σημαντικές δηλώσεις CSS: Πώς και πότε να τις χρησιμοποιήσετε - Smashing Magazine.

συμπέρασμα

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

Όμως, κάθε web designer γενικά θα συμφωνήσει ότι η επιστροφή στα βασικά είναι μερικές φορές απαραίτητη για να αναθεωρήσουμε τις βασικές γνώσεις μας για ένα θέμα. Στην πραγματικότητα, συχνά χάνουμε μερικά από τα βασικά πράγματα, καθώς τείνουμε να είμαστε πιο εντυπωσιασμένοι με φοβερά (και τρελά) πράγματα όπως αυτό.

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

• Διαδήλωση
• Λήψη πηγής

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