Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να εφαρμόσετε στυλ CSS σε μια ιστοσελίδα, συμπεριλαμβανομένων τόσο των εξωτερικών φύλλων στυλ, όσο και των ενσωματωμένων στυλ. Αν χρησιμοποιείτε ένα εξωτερικό φύλλο στυλ, που είναι ο συνιστώμενος τρόπος για να υπαγορεύσετε την εμφάνιση και την αίσθηση ενός εγγράφου HTML, πρέπει να χρησιμοποιήσετε μια προσέγγιση
@εισαγωγή.
ο
@εισαγωγή Ο κανόνας σάς επιτρέπει να δημιουργείτε σημαντικά εξωτερικά φύλλα στυλ στο έγγραφό σας - είτε σε μια σελίδα HTML είτε ακόμα σε άλλα έγγραφα CSS. Το σπάσιμο πολλών στυλ σε ένα μικρό αριθμό φακέλων εστιασμένων (ένα για διάταξη, μία για τυπογραφία, μία για εικόνες κ.λπ.) μπορεί μερικές φορές να διευκολύνει τη διαχείριση αυτών των αρχείων και του διαφορετικού στυλ που περιέχουν. Αν θέλετε να απολαύσετε αυτό το πλεονέκτημα, τότε η εισαγωγή αυτών των διαφόρων αρχείων είναι αυτό που θα χρειαστεί να κάνετε για να τους δουλέψετε όλοι για την εμφάνιση της ιστοσελίδας σας.
Εισαγωγή σε HTML
Για να χρησιμοποιήσετε το
@εισαγωγή κανόνα στην HTML σας, θα προσθέσετε τα παρακάτω στο
του εγγράφου:
:
Αυτός ο κώδικας θα εισαγάγει τώρα αυτό το φύλλο στυλ για χρήση σε αυτήν τη σελίδα HTML και θα μπορούσατε να διαχειριστείτε όλα τα στυλ σας σε αυτό το ένα αρχείο. Το μειονέκτημα για τα σημαντικά φύλλα στυλ είναι ότι αυτή η μέθοδος δεν επιτρέπει παράλληλες λήψεις. Η σελίδα πρέπει να κάνει λήψη ολόκληρου του φύλλου στυλ πριν μετακινηθεί στην υπόλοιπη σελίδα, συμπεριλαμβανομένων όλων των άλλων αρχείων CSS που εισάγετε χρησιμοποιώντας αυτήν τη μέθοδο. Αυτό θα έχει αρνητικό αντίκτυπο στην ταχύτητα της σελίδας σας και στην απόδοση λήψης. Λαμβάνοντας υπόψη πόσο σημαντική είναι η απόδοση σελίδας στην επιτυχία του ιστότοπου, αυτό το μειονέκτημα από μόνο του μπορεί να είναι ένας λόγος για τον οποίο θέλετε να αποφύγετε τη χρήση του @import.
Εναλλακτική προσέγγιση
Ως εναλλακτική λύση στη χρήση
@εισαγωγή στο HTML σας, μπορείτε να συνδεθείτε με αυτό το αρχείο CSS έτσι:
Αυτό λειτουργεί πολύ παρόμοια με το
@εισαγωγή επειδή σας επιτρέπει να διαχειρίζεστε όλο το CSS σας από μια κεντρική τοποθεσία / αρχείο, αλλά αυτή η μέθοδος είναι προτιμότερη από την προοπτική λήψης. Εάν εξακολουθείτε να θέλετε να ταξινομήσετε διαφορετικά είδη στυλ σε ξεχωριστά αρχεία, μπορείτε να συνεχίσετε να το κάνετε και να χρησιμοποιήσετε τη λειτουργία @import στο κύριο αρχείο CSS. Αυτό σημαίνει ότι τα εξωτερικά σας αρχεία CSS μπορούν να διαχειριστούν μεμονωμένα, αλλά επειδή όλα αυτά εισάγονται σε ένα κύριο CSS, η απόδοση βελτιώνεται.
Εισαγωγή σε CSS
Χρησιμοποιώντας το
Παράδειγμα κώδικα παραπάνω θα φέρει το αρχείο "default.css" που θα χρησιμοποιηθεί στη σελίδα σας HTML. Μέσα σε αυτό το αρχείο CSS, θα έχετε τα διάφορα στυλ σελίδας σας. Μπορείτε να έχετε όλα αυτά τα στυλ λεπτομερή σε αυτή τη σελίδα ή μπορείτε να χρησιμοποιήσετε @import για να τα ξεπεράσετε για πιο εύκολη διαχείριση. Και πάλι, ας πούμε ότι χρησιμοποιούμε 4 ξεχωριστά αρχεία CSS - ένα για διάταξη, μία για τυπογραφία και μία για εικόνες. Το τέταρτο αρχείο είναι το αρχείο "master", στο οποίο συνδέεται η σελίδα μας (για παράδειγμα, αυτό είναι "default.css"). Στην κορυφή αυτού του κύριου αρχείου CSS μπορούμε να προσθέσουμε τους παρακάτω κανόνες:
@import url ('/ styles / layout.css'), @ url import ('/ styles / type.css'), @ url import ('/ styles / images.css');
Σημειώστε ότι αυτοί οι κανόνες πρέπει να είστε πριν από όλα τα άλλα περιεχόμενα του αρχείου CSS σας για να εργαστούν. Δεν μπορείτε να έχετε άλλο στυλ CSS πριν από αυτούς τους κανόνες εισαγωγής.
Κάτω από αυτούς τους κανόνες εισαγωγής, μπορείτε να προσθέσετε όσα άλλα στυλ CSS θέλετε να έχετε στο προεπιλεγμένο φύλλο. Όταν φορτώνεται αυτό το κύριο αρχείο CSS, θα εισαγάγει πρώτα αυτά τα ξεχωριστά αρχεία και θα προσθέσει τα στυλ τους στην κορυφή του φύλλου στυλ. Στη συνέχεια, θα έχετε όλες τις άλλες μορφές σας κάτω από αυτές τις εισαγόμενες, δημιουργώντας το πλήρες αρχείο CSS που θα χρησιμοποιήσει το πρόγραμμα περιήγησης ιστού για την προβολή του ιστότοπού σας. Παίρνετε το πλεονέκτημα της διαχείρισης μικρότερων, πιο εστιασμένων αρχείων ενώ έχετε ακόμα ένα μοναδικό φύλλο στυλ συνδεδεμένο σε αυτό το HTML.
Χρησιμοποιώντας @import για ερωτήματα μέσων
Ένα πράγμα που μπορείτε να σκεφτείτε το κάνει να διαχωρίζει τα ερωτήματα των μέσων ενημέρωσης του ιστοτόπου σας για τα ανταποκρινόμενα στυλ ιστοτόπων σε ένα ξεχωριστό αρχείο. Επειδή αυτά τα ανταποκρινόμενα στυλ μπορεί να προκαλούν σύγχυση όταν βλέπουν μαζί με τους άλλους κανόνες του στυλ του ιστότοπού σας, μπορεί να είναι ελκυστικά να τα έχετε μόνοι τους σε ένα διαφορετικό αρχείο. Μια ανησυχία με αυτή την προσέγγιση είναι ότι, δεδομένου ότι σας
@εισαγωγή οι κανόνες πρέπει να είναι οι πρώτοι, αυτό σημαίνει ότι τα ερωτήματα των μέσων ενημέρωσης θα φορτωθούν πριν από τα υπόλοιπα στυλ του ιστότοπού σας. Όταν δημιουργείτε έναν ιστότοπο που ανταποκρίνεται στις ανάγκες του κινητού και λαμβάνει υπόψη την απόδοση, αυτό είναι πιθανόν να είναι ένα πρόβλημα. Για το λόγο αυτό, προτείνουμε να μην αναλύσετε ξεχωριστά και να χρησιμοποιήσετε τη συγκεκριμένη μορφή του ιστοτόπου σας
@εισαγωγή για να τους φέρει στην περιοχή σας. Ναι, μπορεί να φαίνεται ότι υπάρχουν οφέλη από αυτό, αλλά τα μειονεκτήματα υπερτερούν αυτών των οφελών.
Χρειάζομαι @import;
Οχι εσύ δεν. Πολλοί ιστότοποι εμφανίζουν απλώς όλα τα κύρια στυλ τους μέσα σε ένα αρχείο και, τόσο μεγάλο όσο το αρχείο, μπορεί να το διαχειριστεί με αυτόν τον τρόπο (αυτό το κάνω με τη δουλειά μου). Αν βρεις
@εισαγωγή χρήσιμο, τότε μπορεί να είναι μέρος της ροής εργασίας σας. Διαφορετικά, μπορείτε να δημιουργήσετε με ασφάλεια ιστοσελίδες το ενιαίο σας φύλλο στυλ όλων των κανόνων CSS.
Υποστήριξη προγράμματος περιήγησης
Τα πολύ παλιά προγράμματα περιήγησης έχουν προβλήματα με ορισμένους από τους κανόνες @import, αλλά αυτά τα προγράμματα περιήγησης είναι απίθανο να αποτελέσουν πρόβλημα για εσάς αυτές τις μέρες. Αυτό ισχύει ιδιαίτερα τώρα που πέρασε η προθεσμία λήξης της ζωής για παλαιότερες εκδόσεις του Internet Explorer. Τελικά, αν αποφασίσετε να χρησιμοποιήσετε
@εισαγωγή σε κανόνες HTML ή CSS, δεν πρέπει να αντιμετωπίζετε προβλήματα με εκδόσεις κληρονομιών των προγραμμάτων περιήγησης ιστού, εκτός εάν έχετε κάποια περίεργη ανάγκη να υποστηρίξετε απίστευτα παλιές εκδόσεις του IE.
Επεξεργασμένο από τον Jeremy Girard
