Σεντόνια με στυλ έχει πολλά οφέλη. Σας επιτρέπουν να χρησιμοποιείτε το ίδιο φύλλο στυλ σε ολόκληρο τον ιστότοπό σας. Υπάρχουν δύο τρόποι για να το κάνετε αυτό:
- σύνδεση με το στοιχείο LINK
- εισαγωγή με την εντολή @import
Πλεονεκτήματα και μειονεκτήματα των φύλλων εξωτερικού στυλ
Ένα από τα καλύτερα πράγματα κλιμακωτά φύλλα στυλ είναι ότι μπορείτε να τα χρησιμοποιήσετε για να διατηρήσετε τον ιστότοπό σας συνεπή. Ο ευκολότερος τρόπος για να γίνει αυτό είναι να συνδέσετε ή να εισαγάγετε ένα εξωτερικό φύλλο στυλ. Εάν χρησιμοποιείτε το ίδιο εξωτερικό φύλλο στυλ για κάθε σελίδα του ιστότοπού σας, μπορείτε να είστε σίγουροι ότι όλες οι σελίδες θα έχουν το ίδιο στυλ.
Μερικά από τα πλεονεκτήματα της χρήσης εξωτερικών φύλλων στυλ περιλαμβάνουν ότι μπορείτε να ελέγχετε την εμφάνιση και την αίσθηση πολλών εγγράφων ταυτόχρονα. Αυτό είναι ιδιαίτερα χρήσιμο εάν συνεργάζεστε με μια ομάδα ανθρώπων για τη δημιουργία του ιστότοπού σας. Πολλοί κανόνες στυλ μπορεί να είναι δύσκολο να θυμηθούν και, ενώ μπορεί να έχετε έναν έντυπο οδηγό στυλ, είναι κουραστικό να το έχετε για συνεχή αναδίπλωση για να καθορίσει εάν το παράδειγμα κειμένου πρέπει να γραφτεί σε γραμματοσειρά Arial 12 σημείων ή 14 σημείων Μεταφορέας.
Μπορείτε να δημιουργήσετε τάξεις στυλ που μπορούν στη συνέχεια να χρησιμοποιηθούν σε πολλά διαφορετικά στοιχεία HTML. Εάν χρησιμοποιείτε συχνά μια ειδική γραμματοσειρά Wingdings για να δώσετε έμφαση σε διάφορα πράγματα στη σελίδα σας, μπορείτε να χρησιμοποιήσετε τα Wingdings τάξη που δημιουργήσατε στο φύλλο στυλ σας για να τα δημιουργήσετε αντί να ορίσετε ένα συγκεκριμένο στυλ για κάθε παρουσία του έμφαση.
Μπορείτε εύκολα να ομαδοποιήσετε τα στυλ σας ώστε να είναι πιο αποτελεσματικά. Όλες οι μέθοδοι ομαδοποίησης που είναι διαθέσιμες στο CSS μπορούν να χρησιμοποιηθούν σε εξωτερικά φύλλα στυλ και αυτό σας παρέχει περισσότερο έλεγχο και ευελιξία στις σελίδες σας.
Τούτου λεχθέντος, υπάρχουν επίσης πολύ καλοί λόγοι να μην χρησιμοποιήσετε εξωτερικά φύλλα στυλ. Πρώτον, μπορούν να αυξήσουν το χρόνο λήψης, εάν συνδέεστε σε πολλά από αυτά.
Κάθε φορά που δημιουργείτε ένα νέο αρχείο CSS και συνδέετε ή εισάγετε το στο έγγραφό σας, αυτό απαιτεί από το πρόγραμμα περιήγησης Web να κάνει μια άλλη κλήση στον διακομιστή Web για να λάβει το αρχείο. Και οι κλήσεις διακομιστή επιβραδύνουν τους χρόνους φόρτωσης σελίδας.
Εάν έχετε μόνο μικρό αριθμό στυλ, μπορούν να αυξήσουν την πολυπλοκότητα της σελίδας σας. Επειδή τα στυλ δεν είναι ορατά απευθείας στο HTML, όποιος κοιτάζει τη σελίδα πρέπει να πάρει ένα άλλο έγγραφο (το αρχείο CSS) για να καταλάβει τι συμβαίνει.
Πώς να δημιουργήσετε ένα εξωτερικό φύλλο στυλ
Τα εξωτερικά φύλλα στυλ γράφονται με τον ίδιο τρόπο όπως τα ενσωματωμένα και ενσωματωμένα φύλλα στυλ. Αλλά το μόνο που χρειάζεται να γράψετε είναι το στυλ εκλέκτορας και το δήλωση. Δεν χρειάζεστε ένα στοιχείο ή χαρακτηριστικό ΣΤΥΛ στο έγγραφο.
Όπως με όλα τα άλλα CSS, η σύνταξη για έναν κανόνα είναι:
επιλογέας {ιδιότητα: τιμή; }
Αυτοί οι κανόνες γράφονται σε ένα αρχείο κειμένου με την επέκταση.
.css. Για παράδειγμα, μπορείτε να ονομάσετε το φύλλο στυλ σας.
styles.css.
Σύνδεση εγγράφων CSS
Για να συνδέσετε ένα φύλλο στυλ, χρησιμοποιείτε το στοιχείο LINK. Αυτό έχει τα χαρακτηριστικά rel και href. Το χαρακτηριστικό rel λέει στο πρόγραμμα περιήγησης τι συνδέετε (σε αυτήν την περίπτωση ένα φύλλο στυλ) και το χαρακτηριστικό href διατηρεί τη διαδρομή προς το αρχείο CSS.
Υπάρχει επίσης ένας προαιρετικός τύπος χαρακτηριστικού που μπορείτε να χρησιμοποιήσετε για να ορίσετε τον τύπο MIME του συνδεδεμένου εγγράφου. Αυτό δεν απαιτείται στο HTML5, αλλά πρέπει να χρησιμοποιείται σε έγγραφα HTML 4.
Εδώ είναι ο κωδικός που θα χρησιμοποιούσατε για να συνδέσετε ένα φύλλο στυλ CSS που ονομάζεται Styles.css:
Και σε ένα έγγραφο HTML 4 θα γράφατε:
type = "κείμενο / css">
Εισαγωγή φύλλων στυλ CSS
Τα εισαγόμενα φύλλα στυλ τοποθετούνται μέσα στο στοιχείο ΣΤΥΛ. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε ενσωματωμένα στυλ, αν θέλετε. Μπορείτε επίσης να συμπεριλάβετε εισαγόμενα στυλ σε συνδεδεμένα φύλλα στυλ. Μέσα στο έγγραφο STYLE ή CSS, γράψτε:
@import url (' http://www.yoursite.com/styles.css');