Αλλά κατά την κωδικοποίηση, είναι δύσκολο να συμπεριληφθούν οι ίδιες ιδιότητες CSS για κάθε ιστοσελίδα ξεχωριστά. Επομένως, απαιτείται η χρήση μιας λύσης μέσω της οποίας μπορεί να δημιουργηθεί ένα ενιαίο φύλλο στυλ και στη συνέχεια να προσπελαστεί εύκολα από πολλά αρχεία.
Τι είναι ο κανόνας @import στο CSS;
Ο καλύτερος τρόπος για να συμπεριλάβετε τις ιδιότητες στυλ CSS είναι χρησιμοποιώντας τον κανόνα @import. Το @import χρησιμοποιείται για εισαγωγή ή πρόσβαση σε φύλλο στυλ CSS από άλλο φύλλο στυλ. Αυτό μειώνει την προσπάθεια του προγραμματιστή, καθώς όλες οι ιδιότητες που προστίθενται στο εισαγόμενο φύλλο στυλ υλοποιούνται απευθείας γράφοντας απλώς @import και μετά το ακριβές όνομα του φύλλου στυλ.
Σύνταξη του κανόνα @import
Η σύνταξη για την προσθήκη του κανόνα @import για πρόσβαση σε ένα φύλλο στυλ από άλλο φύλλο στυλ είναι η εξής:
@εισαγωγή 'stylesheetname.css' ;
Ο κανόνας @import μπορεί επίσης να προστεθεί με την ακόλουθη μέθοδο:
@εισαγωγή url ( όνομα φύλλου στυλ.css ) ;
Απλώς, προσθέστε το όνομα του αρχείου φύλλου στυλ CSS είτε σε ανεστραμμένα κόμματα είτε σε στρογγυλές αγκύλες με ' url 'μετά το γράψιμο' @εισαγωγή '.
Παράδειγμα: Προσθήκη κανόνα @import
Για να κατανοήσουμε πώς λειτουργεί ο κανόνας @import, γράφουμε ένα απλό απόσπασμα κώδικα:
< h1 > Αυτό είναι ένα απλό κείμενο! < / h1 >Στο παραπάνω απόσπασμα κώδικα, υπάρχει μια επικεφαλίδα
με μια απλή πρόταση μιας γραμμής που προστίθεται σε ένα έγγραφο HTML. Αυτός ο απλός κώδικας θα δημιουργήσει την ακόλουθη έξοδο:
Ας δημιουργήσουμε ένα φύλλο στυλ για να ορίσουμε ορισμένες ιδιότητες CSS που μπορούν αργότερα να εισαχθούν από το αρχείο μέσω του οποίου δημιουργείται η παραπάνω διεπαφή ιστοσελίδας. Δημιουργούμε ένα άλλο αρχείο και το ονομάζουμε ' φύλλο στυλ ' με τον τύπο αρχείου δηλωμένο ως ' css ”, και απλώς προσθέστε μερικές ιδιότητες για την επικεφαλίδα και το σώμα
: h1 {
χρώμα : μεσάνυχτα μπλε ;
χρώμα του φόντου : γαλανός ;
στοίχιση κειμένου : κέντρο ;
}
σώμα {
χρώμα του φόντου : γαλάζιο ;
}
Για να αποκτήσουμε πρόσβαση στο αρχείο φύλλου στυλ που περιέχει τις ιδιότητες στυλ για την επικεφαλίδα και το σώμα
, πρέπει απλώς να προσθέσουμε τον κανόνα @import σε οποιοδήποτε από τα αρχεία CSS όπου απαιτείται αυτό το στυλ.
Η προσθήκη ενός απλού κανόνα @import θα εφαρμόσει όλες τις ιδιότητες στυλ στη διεπαφή της ιστοσελίδας χωρίς να χρειάζεται να πληκτρολογήσετε τις ιδιότητες ξεχωριστά σε κάθε ιστοσελίδα.
Επομένως, απαιτείται να γράψετε τον κανόνα @import ως εξής:
@εισαγωγή 'stylesheet.css' ;Προσθέτοντας τον κανόνα @import γράφοντας ' url ” και το όνομα του αρχείου CSS στις στρογγυλές αγκύλες θα εμφανίζει επίσης τα ίδια αποτελέσματα:
@εισαγωγή url ( φύλλο στυλ.css ) ;Οι ιδιότητες που ορίζονται στο « φύλλο στυλ 'Το αρχείο υλοποιείται με την προσθήκη ενός απλού' @εισαγωγή 'κανόνας για αυτό:
Αυτός είναι ο ευκολότερος τρόπος για να συμπεριλάβετε τις ιδιότητες CSS σε ένα αρχείο χωρίς πρόσθετες προσπάθειες.
Πλεονεκτήματα του κανόνα @import στο CSS
Ο κανόνας @import χρησιμοποιείται συνήθως για τους ακόλουθους λόγους:
- Η χρήση του κανόνα @import μειώνει τον χρόνο και την προσπάθεια του προγραμματιστή καθώς υλοποιεί όλες τις ιδιότητες ενός συγκεκριμένου φύλλου στυλ γράφοντας απλώς το όνομα αυτού του φύλλου μετά το @import.
- Σε μεγάλες και πολύπλοκες εφαρμογές ιστού, ο κανόνας @import αποδεικνύεται πολύ πλεονεκτικός, καθώς οι ίδιες ιδιότητες στυλ μπορούν να εφαρμοστούν σε πολλά αρχεία απλώς προσθέτοντας το όνομα του αρχείου του φύλλου στυλ.
- Στοιχεία φύλλου στυλ όπως κεφαλίδες, υποσέλιδα, σώμα κ.λπ. μπορούν να αποθηκευτούν σε ξεχωριστά αρχεία φύλλου στυλ και, στη συνέχεια, χρησιμοποιώντας τον κανόνα @import, οποιοδήποτε από τα απαιτούμενα στυλ μπορεί να εισαχθεί χωρίς να χρειάζεται να προσθέσετε, να αφαιρέσετε ή να σχολιάσετε ιδιότητες στυλ από ένα αρχείο.
Αυτό συνοψίζει τη χρήση του κανόνα @import και εξηγεί πώς αυτός ο κανόνας θεωρείται η καλύτερη μέθοδος για τη συμπερίληψη CSS.
συμπέρασμα
Ένα φύλλο στυλ CSS μπορεί να εισαχθεί ή να προσπελαστεί απευθείας από άλλο φύλλο στυλ και όλες οι ιδιότητες στο εισαγόμενο φύλλο στυλ υλοποιούνται απευθείας στην ιστοσελίδα του αρχείου όπου έχει εισαχθεί. Δεν χρειάζεται να γράψετε κάθε ιδιότητα CSS ξεχωριστά για κάθε διεπαφή ιστοσελίδας. Το μόνο που χρειάζεται είναι να προσθέσετε το όνομα του αρχείου φύλλου στυλ CSS με το @import. Και, αυτή θεωρείται η καλύτερη μέθοδος για να προσθέσετε CSS.