CSS, ή Διαδοχικά φύλλα στυλ, είναι ο αποδεκτός τρόπος της βιομηχανίας σχεδιασμού ιστοσελίδων να προσθέσει οπτικά στυλ σε έναν ιστότοπο. Με το CSS, μπορείτε να ελέγχετε τη διάταξη της σελίδας, τα χρώματα, τυπογραφία, εικόνα φόντου και πολλά άλλα. Βασικά, εάν πρόκειται για οπτικό στυλ, τότε το CSS είναι ο τρόπος για να φέρετε αυτά τα στυλ στον ιστότοπό σας.
Καθώς προσθέτετε στυλ CSS σε ένα έγγραφο, ενδέχεται να παρατηρήσετε ότι το έγγραφο αρχίζει να διαρκεί όλο και περισσότερο. Ακόμη και ένας μικρός ιστότοπος με μόνο λίγες σελίδες μπορεί να καταλήξει σε ένα αρκετά μεγάλο αρχείο CSS - και ένας πολύ μεγάλος ιστότοπος με πολλές σελίδες μοναδικού περιεχομένου μπορεί να έχει πολύ μεγάλα αρχεία CSS. Αυτό συνδυάζεται με ιστότοποι που ανταποκρίνονται που έχουν πολλά ερωτήματα πολυμέσων περιλαμβάνονται στα φύλλα στυλ για να αλλάξετε τον τρόπο εμφάνισης των οπτικών εικόνων και τη σελίδα για διαφορετικές οθόνες.
Ναι, τα αρχεία CSS μπορεί να έχουν μεγάλη διάρκεια. Αυτό δεν είναι ένα μεγάλο πρόβλημα όταν πρόκειται
απόδοση ιστότοπου και ταχύτητα λήψης, επειδή ακόμη και ένα μακρύ αρχείο CSS είναι πιθανό να είναι πολύ μικρό (δεδομένου ότι είναι πραγματικά απλώς ένα έγγραφο κειμένου). Ωστόσο, κάθε λίγο μετράει όσον αφορά την ταχύτητα της σελίδας, οπότε αν μπορείτε να κάνετε το φύλλο στυλ σας πιο λιτό, αυτή είναι μια καλή ιδέα. Αυτό είναι όπου το "κόμμα" μπορεί να είναι πολύ βολικό στο φύλλο στυλ σας!Κόμματα και CSS
Ίσως έχετε αναρωτηθεί τι ρόλο παίζει το κόμμα στη σύνταξη επιλογέα CSS. Όπως και στις προτάσεις, το κόμμα φέρνει σαφήνεια - όχι κώδικα - στα διαχωριστικά. Το κόμμα σε ένα Επιλογέας CSS χωρίζει πολλαπλοί επιλογείς μέσα στα ίδια στυλ.
Για παράδειγμα, ας δούμε μερικά CSS παρακάτω.
ου {χρώμα: κόκκινο; }
td {χρώμα: κόκκινο; }
p.red {χρώμα: κόκκινο; }
div # firstred {χρώμα: κόκκινο; }
Με αυτήν τη σύνταξη, λέτε ότι θέλετε ου ετικέτες, td ετικέτες, ετικέτες παραγράφων με την κόκκινη κλάση και η ετικέτα div με το αναγνωριστικό πρώτα να έχουν το στυλ κόκκινο χρώμα.
Αυτό είναι απολύτως αποδεκτό CSS, αλλά υπάρχουν δύο σημαντικά μειονεκτήματα στη σύνταξή του με αυτόν τον τρόπο:
- Στο μέλλον, εάν αποφασίσετε να αλλάξετε το χρώμα γραμματοσειράς από αυτές τις ιδιότητες σε μπλε, πρέπει να το αλλάξετε τέσσερις φορές στο φύλλο στυλ σας.
- Προσθέτει πολλούς επιπλέον χαρακτήρες στο φύλλο στυλ που δεν χρειάζεστε. Αυτά τα 4 στυλ μπορεί να μην φαίνονται υπερβολικά, αλλά αν συνεχίσετε να το κάνετε σε ολόκληρο το φύλλο στυλ σας, οι γραμμές θα αυξηθούν και αυτό το φύλλο θα είναι πολύ, πολύ μεγαλύτερο από ό, τι πρέπει να είναι.
Για να αποφύγουμε αυτά τα μειονεκτήματα και για να βελτιώσουμε το αρχείο CSS, θα προσπαθήσουμε να χρησιμοποιήσουμε κόμματα.
Χρησιμοποιώντας κόμματα για διαχωρισμό επιλογών
Αντί να γράφετε 4 ξεχωριστούς επιλογείς CSS και 4 κανόνες, μπορείτε συνδυασμός όλα αυτά τα στυλ σε μια ιδιότητα κανόνα διαχωρίζοντας τους μεμονωμένους επιλογείς με κόμμα. Να πώς θα γίνει αυτό:
th, td, p.red, div # firstred {χρώμα: κόκκινο; }
Ο χαρακτήρας κόμμα ουσιαστικά λειτουργεί ως η λέξη "ή" μέσα στον επιλογέα. Αυτό ισχύει για ου Ετικέτες Ή td Ετικέτες Ή ετικέτες παραγράφου με την κόκκινη τάξη Ή την ετικέτα div με το αναγνωριστικό πρώτα. Αυτό ακριβώς είχαμε πριν, αλλά αντί να χρειαζόμαστε 4 κανόνες CSS, έχουμε έναν ενιαίο κανόνα με πολλαπλούς επιλογείς. Αυτό κάνει το κόμμα στον επιλογέα, μας επιτρέπει να έχουμε πολλούς επιλογείς σε έναν κανόνα.
Όχι μόνο αυτή η προσέγγιση δημιουργεί πιο αδύνατα, καθαρότερα αρχεία CSS, αλλά διευκολύνει και τις μελλοντικές ενημερώσεις. Τώρα, εάν θέλετε να αλλάξετε το χρώμα από κόκκινο σε μπλε, πρέπει μόνο να κάνετε την αλλαγή σε μία τοποθεσία αντί για τους αρχικούς κανόνες 4 στυλ που είχαμε! Σκεφτείτε αυτές τις εξοικονομήσεις χρόνου σε ένα ολόκληρο αρχείο CSS και μπορείτε να δείτε πώς αυτό θα σας εξοικονομήσει χρόνο και χώρο μακροπρόθεσμα!
Παραλλαγή σύνταξης
Μερικά άτομα επιλέγουν να κάνουν το CSS πιο ευανάγνωστο διαχωρίζοντας κάθε επιλογέα στη δική του γραμμή, αντί να το γράψουν όλα σε μία γραμμή όπως παραπάνω. Έτσι θα γίνει αυτό:
ου,
td,
σ. κόκκινο,
div # firstred
{
χρώμα: κόκκινο;
}
Παρατηρήστε ότι τοποθετείτε ένα κόμμα μετά από κάθε επιλογέα και, στη συνέχεια, χρησιμοποιήστε το "enter" για να σπάσετε τον επόμενο επιλογέα στη δική του γραμμή. ΔΕΝ προσθέτετε κόμμα μετά τον τελικό επιλογέα.
Χρησιμοποιώντας κόμματα μεταξύ των επιλογών σας, δημιουργείτε περισσότερα συμπαγές φύλλο στυλ αυτό είναι πιο εύκολο να ενημερώσετε στο μέλλον και είναι πιο εύκολο να το διαβάσετε σήμερα!