Οι ιστότοποι είναι ένας συνδυασμός στυλ και δομής και στο σημερινό ιστό, είναι η καλύτερη πρακτική να διατηρούνται ξεχωριστά οι δύο αυτές πτυχές μιας τοποθεσίας.
HTML ήταν πάντα αυτό που παρέχει ένα site με τη δομή του. Στις πρώτες ημέρες του Ιστού, το HTML περιείχε επίσης πληροφορίες στυλ. Στοιχεία όπως το ετικέτα ήταν στρωμένη σε όλο τον κώδικα HTML, προσθέτοντας την εμφάνιση και την αίσθηση πληροφοριών παράλληλα με τις δομικές πληροφορίες. Το κίνημα των προτύπων διαδικτύου μας ώθησε να αλλάξουμε αυτή την πρακτική και να προωθήσουμε όλες τις πληροφορίες στυλ σε CSS ή Cascading Style Sheets. Κάνοντας αυτό ένα βήμα παραπέρα, οι τρέχουσες συστάσεις είναι ότι χρησιμοποιείτε αυτό που είναι γνωστό ως "εξωτερικό φύλλο στυλ" για τις ανάγκες σας στο styling του ιστότοπού σας.
Πλεονεκτήματα και μειονεκτήματα των εξωτερικών φύλλων στυλ
Ένα από τα καλύτερα πράγματα για το Cascading Style Sheets είναι ότι μπορείτε να τα χρησιμοποιήσετε για να κρατήσετε ολόκληρο τον ιστότοπό σας συνεπές. Ο ευκολότερος τρόπος είναι να συνδέσετε ή να εισαγάγετε ένα εξωτερικό φύλλο στυλ. Εάν χρησιμοποιείτε το ίδιο εξωτερικό φύλλο στυλ για κάθε σελίδα του ιστότοπού σας, μπορείτε να είστε βέβαιοι ότι όλες οι σελίδες θα έχουν το ίδιο στυλ. Μπορείτε επίσης να διευκολύνετε την πραγματοποίηση αλλαγών για το μέλλον. Επειδή όλες οι σελίδες χρησιμοποιούν το ίδιο εξωτερικό φύλλο στυλ, οποιαδήποτε αλλαγή σε αυτό το φύλλο θα επηρεάσει κάθε σελίδα ιστότοπου. Αυτό είναι πολύ καλύτερο από το να χρειάζεται να αλλάζετε κάθε σελίδα ξεχωριστά!
Πλεονεκτήματα των εξωτερικών φύλλων στυλ
- Μπορείτε να ελέγξετε την εμφάνιση και την αίσθηση πολλών εγγράφων ταυτόχρονα.
- Αυτό είναι ιδιαίτερα χρήσιμο αν εργάζεστε με μια ομάδα ανθρώπων για να δημιουργήσετε τον ιστότοπό σας. Πολλοί κανόνες στυλ μπορεί να είναι δύσκολο να θυμηθούν και ενώ μπορεί να έχετε έναν εκτυπωμένο οδηγό στυλ, είναι αναποτελεσματικό και κουραστικό να συνεχίζετε να το αναποδογυρίζετε για να διαπιστώσετε αν ένα κείμενο πρέπει να γραφτεί σε γραμματοσειρά 12 γραμμάτων Arial ή σε ένα κουτί 14 σημείων. Έχοντας τα πάντα σε ένα μέρος, και δεδομένου ότι και αυτός ο τόπος είναι όπου θα κάνατε αλλαγές, μπορείτε να κάνετε τη συντήρηση τόσο ευκολότερη.
- Μπορείτε να δημιουργήσετε κατηγορίες στυλ που μπορούν στη συνέχεια να χρησιμοποιηθούν σε πολλά διαφορετικά στοιχεία HTML.
- Αν χρησιμοποιείτε συχνά ένα συγκεκριμένο στυλ γραμματοσειράς για να δώσετε έμφαση σε διάφορα πράγματα στη σελίδα σας, μπορείτε να χρησιμοποιήσετε ένα χαρακτηριστικό κλάσης που ορίσατε στο φύλλο στυλ για να αποκτήσετε αυτό το βλέμμα και αίσθηση, αντί να καθορίσετε ένα συγκεκριμένο στυλ για κάθε εμφάνιση του έμφαση.
- Μπορείτε εύκολα να ομαδοποιήσετε τα στυλ σας για να είστε πιο αποτελεσματικοί.
- Όλες οι μέθοδοι ομαδοποίησης που είναι διαθέσιμες στο CSS μπορούν να χρησιμοποιηθούν σε εξωτερικά φύλλα στυλ και αυτό σας δίνει περισσότερο έλεγχο και ευελιξία στις σελίδες σας.
Μειονεκτήματα των εξωτερικών φύλλων στυλ
- Τα εξωτερικά φύλλα στυλ μπορούν να αυξήσουν το χρόνο λήψης, ειδικά αν είναι εξαιρετικά μεγάλα. Δεδομένου ότι το αρχείο CSS είναι ένα ξεχωριστό έγγραφο που πρέπει να φορτωθεί, αυτό θα επηρεάσει την απόδοση για την εκτέλεση αυτής της λήψης.
- Τα εξωτερικά φύλλα στυλ μεγαλώνουν πολύ γρήγορα, καθώς είναι δύσκολο να καταλάβεις πότε ένα στυλ δεν χρησιμοποιείται πλέον επειδή δεν έχει διαγραφεί όταν αφαιρεθεί η σελίδα. Η σωστή διαχείριση των αρχείων σας CSS είναι σημαντική, ειδικά αν πολλοί άνθρωποι εργάζονται στο ίδιο αρχείο.
- Εάν διαθέτετε μόνο έναν ιστότοπο μιας σελίδας, ενδέχεται να μην είναι απαραίτητη η ύπαρξη εξωτερικού αρχείου για το CSS, αφού έχετε μόνο αυτή τη σελίδα σε στυλ. Πολλά από τα οφέλη του εξωτερικού CSS χάνονται όταν έχετε μόνο έναν ιστότοπο μιας σελίδας.
Πώς να δημιουργήσετε ένα εξωτερικό φύλλο στυλ
Τα εξωτερικά φύλλα στυλ δημιουργούνται με παρόμοια σύνταξη σε φύλλα στυλ επιπέδου εγγράφου. Ωστόσο, το μόνο που χρειάζεται να συμπεριλάβετε είναι ο επιλογέας και η δήλωση. Ακριβώς όπως σε ένα φύλλο στυλ σε επίπεδο εγγράφου, η σύνταξη για έναν κανόνα είναι:
επιλογέας {ιδιότητα: τιμή}
Αποθηκεύστε αυτούς τους κανόνες σε ένα αρχείο κειμένου με την επέκταση .css. Αυτό δεν είναι απαραίτητο, αλλά είναι μια καλή συνήθεια να μπείτε, ώστε να μπορείτε να αναγνωρίσετε αμέσως τα φύλλα στυλ σας σε μια λίστα καταλόγων.
Μόλις έχετε ένα έγγραφο φύλλου στυλ, θα πρέπει να το συνδέσετε με τις ιστοσελίδες σας. Αυτό μπορεί να γίνει με δύο τρόπους:
- Σύνδεση
- Για να συνδέσετε ένα φύλλο στυλ, χρησιμοποιείτε την ετικέτα HTML. Αυτό έχει τα χαρακτηριστικά rel, τύπος, και href. Το χαρακτηριστικό rel αναφέρει τι συνδέετε (σε αυτή την περίπτωση ένα φύλλο στυλ), ο τύπος ορίζει τον τύπο MIME για το πρόγραμμα περιήγησης και το href είναι η διαδρομή προς το αρχείο .css.
- Εισαγωγή
- Θα χρησιμοποιούσατε ένα εισαγόμενο φύλλο στυλ μέσα σε ένα φύλλο στυλ επιπέδου εγγράφου έτσι ώστε να μπορείτε να εισαγάγετε τα χαρακτηριστικά ενός εξωτερικού φύλλου στυλ χωρίς να χάσετε τυχόν έγγραφα συγκεκριμένου εγγράφου. Μπορείτε να το ονομάσετε με παρόμοιο τρόπο με την κλήση ενός συνδεδεμένου φύλλου στυλ, αλλά πρέπει να καλείται σε μια δήλωση στυλ σε επίπεδο εγγράφου. Μπορείτε να εισαγάγετε τόσα εξωτερικά φύλλα στυλ όπως χρειάζεστε για να διατηρήσετε τον ιστότοπό σας.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 8/8/17
