Οι ιστότοποι αποτελούνται από έναν αριθμό μεμονωμένων κομματιών, συμπεριλαμβανομένων εικόνων, κειμένου και διαφόρων εγγράφων. Αυτά τα έγγραφα δεν περιλαμβάνουν μόνο αυτά που μπορούν να συνδεθούν από διάφορες σελίδες, όπως αρχεία PDF, αλλά και τα έγγραφα που χρησιμοποιούνται για την κατασκευή των ίδιων των σελίδων, όπως Έγγραφα HTML για να προσδιορίσετε τη δομή μιας σελίδας και τα έγγραφα CSS (Cascading Style Sheet) για να υπαγορεύσετε την εμφάνιση μιας σελίδας. Αυτό το άρθρο θα εξεταστεί σε CSS, καλύπτοντας τι είναι και πού χρησιμοποιείται σήμερα σε ιστότοπους.
Ένα μάθημα ιστορικού CSS
Το CSS αναπτύχθηκε για πρώτη φορά το 1997 ως τρόπος για τους προγραμματιστές ιστού να καθορίσουν την οπτική εμφάνιση των ιστοσελίδων που δημιουργούσαν. Προοριζόταν να επιτρέψει στους επαγγελματίες του διαδικτύου διαχωρίστε το περιεχόμενο και δομή του κώδικα μιας ιστοσελίδας από την οπτική σχεδίαση, κάτι που δεν ήταν δυνατό πριν από αυτήν την ώρα.
Ο διαχωρισμός της δομής και του στυλ επιτρέπει στην HTML να εκτελεί περισσότερο από τη λειτουργία στην οποία βασίστηκε αρχικά - τη σήμανση του περιεχόμενο, χωρίς να χρειάζεται να ανησυχείτε για το σχεδιασμό και τη διάταξη της ίδιας της σελίδας, κάτι που είναι συνήθως γνωστό ως "εμφάνιση και αίσθηση" του σελίδα.
Η Εξέλιξη του CSS
Το CSS δεν κέρδισε δημοτικότητα μέχρι το 2000, όταν τα προγράμματα περιήγησης στο Web άρχισαν να χρησιμοποιούν περισσότερα από τα βασικά στοιχεία γραμματοσειράς και χρώματος αυτής της γλώσσας σήμανσης. Σήμερα, όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν όλο το CSS Level 1, το μεγαλύτερο μέρος του CSS Level 2 και ακόμη και τις περισσότερες πτυχές του CSS Level 3. Καθώς το CSS συνεχίζει να εξελίσσεται και εισάγονται νέα στυλ, τα προγράμματα περιήγησης στο Web έχουν αρχίσει να εφαρμόζουν ενότητες που φέρνουν νέα υποστήριξη CSS σε αυτά τα προγράμματα περιήγησης και δίνουν στους σχεδιαστές ιστοσελίδων ισχυρά νέα εργαλεία στυλ για να λειτουργήσουν με.
Κατά το παρελθόν (πολλά) χρόνια, υπήρχαν επιλεγμένοι σχεδιαστές ιστοσελίδων που αρνήθηκαν να χρησιμοποιήσουν το CSS για το σχεδιασμός και ανάπτυξη ιστότοπων, αλλά αυτή η πρακτική έχει αλλάξει από τη βιομηχανία σήμερα. Το CSS είναι πλέον ένα ευρέως χρησιμοποιούμενο πρότυπο στο σχεδιασμό ιστοσελίδων και θα ήταν δύσκολο να βρείτε κάποιον που εργάζεται στη βιομηχανία σήμερα που δεν είχε τουλάχιστον μια βασική κατανόηση αυτής της γλώσσας.
Το CSS είναι συντομογραφία
Όπως αναφέρθηκε ήδη, ο όρος CSS σημαίνει "Cascading Style Sheet". Ας σπάσουμε αυτήν τη φράση λίγο για να εξηγήσουμε πληρέστερα τι κάνουν αυτά τα έγγραφα.
Η λέξη "stylesheet" αναφέρεται στο ίδιο το έγγραφο (όπως HTML, τα αρχεία CSS είναι πραγματικά απλά έγγραφα κειμένου που μπορούν να επεξεργαστούν με μια ποικιλία προγραμμάτων). Τα φύλλα στυλ έχουν χρησιμοποιηθεί για το σχεδιασμό εγγράφων για πολλά χρόνια. Είναι οι τεχνικές προδιαγραφές για μια διάταξη, είτε εκτυπώνονται είτε online. Οι σχεδιαστές εκτύπωσης έχουν χρησιμοποιήσει από καιρό φύλλα στυλ για να διασφαλίσουν ότι τα σχέδιά τους τυπώνονται ακριβώς σύμφωνα με τις προδιαγραφές τους. Ένα φύλλο στυλ για μια ιστοσελίδα εξυπηρετεί τον ίδιο σκοπό, αλλά με την προστιθέμενη λειτουργικότητα του να λέει επίσης στο πρόγραμμα περιήγησης στο Web πώς να αποδώσει το έγγραφο που προβάλλεται. Σήμερα, μπορούν επίσης να χρησιμοποιηθούν φύλλα στυλ CSS ερωτήματα πολυμέσων για να αλλάξετε τον τρόπο που αναζητά μια σελίδα διαφορετικές συσκευές και μεγέθη οθόνης. Αυτό είναι απίστευτα σημαντικό αφού επιτρέπει σε ένα έγγραφο HTML να αποδίδεται διαφορετικά ανάλογα με την οθόνη που χρησιμοποιείται για πρόσβαση σε αυτό.
αλληλουχία είναι το πραγματικά ξεχωριστό μέρος του όρου "cascading style sheet". Ένα φύλλο στυλ Ιστού προορίζεται να περάσει από μια σειρά στυλ σε αυτό το φύλλο, όπως ένα ποτάμι πάνω από έναν καταρράκτη. Το νερό στο ποτάμι χτυπά όλους τους βράχους στον καταρράκτη, αλλά μόνο εκείνοι στον πυθμένα επηρεάζουν ακριβώς πού θα ρέει το νερό. Το ίδιο ισχύει και για τον καταρράκτη σε φύλλα στυλ ιστότοπου.
Φύλλα στυλ σχεδιαστών Παράκαμψη προεπιλεγμένων φύλλων στυλ προγράμματος περιήγησης
Κάθε ιστοσελίδα επηρεάζεται από τουλάχιστον ένα φύλλο στυλ, ακόμα κι αν ο σχεδιαστής ιστοσελίδων δεν εφαρμόζει κανένα στυλ. Αυτό το φύλλο στυλ είναι το φύλλο στυλ πράκτορα χρήστη - επίσης γνωστό ως τα προεπιλεγμένα στυλ που θα χρησιμοποιήσει το πρόγραμμα περιήγησης ιστού για να εμφανίσει μια σελίδα εάν δεν παρέχονται άλλες οδηγίες. Για παράδειγμα, από προεπιλογή οι υπερσύνδεσμοι έχουν μπλε χρώμα και είναι υπογραμμισμένοι. Αυτά τα στυλ προέρχονται από το προεπιλεγμένο φύλλο στυλ ενός προγράμματος περιήγησης. Εάν, ωστόσο, ο σχεδιαστής ιστοσελίδων παρέχει άλλες οδηγίες, το πρόγραμμα περιήγησης θα πρέπει να γνωρίζει ποιες οδηγίες έχουν προτεραιότητα. Όλα τα προγράμματα περιήγησης έχουν τα δικά τους προεπιλεγμένα στυλ, αλλά πολλές από αυτές τις προεπιλογές (όπως οι μπλε υπογραμμισμένοι σύνδεσμοι κειμένου) κοινοποιούνται σε όλα ή τα περισσότερα μεγάλα προγράμματα περιήγησης και εκδόσεις.
Για ένα άλλο παράδειγμα προεπιλογής προγράμματος περιήγησης, στο πρόγραμμα περιήγησης ιστού, η προεπιλεγμένη γραμματοσειρά είναι "Times New Romanεμφανίζεται στο μέγεθος 16. Ωστόσο, σχεδόν καμία από τις σελίδες που επισκέπτουμε την οθόνη σε αυτήν την οικογένεια γραμματοσειρών και το μέγεθος, ωστόσο. Αυτό συμβαίνει επειδή ο καταρράκτης ορίζει ότι τα φύλλα δεύτερου στυλ, τα οποία καθορίζονται από τους ίδιους τους σχεδιαστές, να επαναπροσδιορίσουν το μέγεθος της γραμματοσειράς και την οικογένεια, παρακάμπτοντας τις προεπιλογές του προγράμματος περιήγησης ιστού. Τυχόν φύλλα στυλ που δημιουργείτε για μια ιστοσελίδα θα έχουν περισσότερη ειδικότητα από τα προεπιλεγμένα στυλ ενός προγράμματος περιήγησης, επομένως αυτές οι προεπιλογές θα ισχύουν μόνο εάν το φύλλο στυλ σας δεν τα παρακάμψει. Εάν θέλετε οι σύνδεσμοι να είναι μπλε και υπογραμμισμένοι, δεν χρειάζεται να κάνετε τίποτα, καθώς αυτή είναι η προεπιλογή, αλλά αν το αρχείο CSS του ιστότοπού σας λέει ότι οι σύνδεσμοι πρέπει να είναι πράσινοι, αυτό το χρώμα θα αντικαταστήσει το προεπιλεγμένο μπλε. Η υπογράμμιση θα παραμείνει σε αυτό το παράδειγμα, καθώς δεν ορίσατε διαφορετικά.
Πού χρησιμοποιείται το CSS;
Το CSS μπορεί επίσης να χρησιμοποιηθεί για να καθορίσει τον τρόπο εμφάνισης των ιστοσελίδων όταν προβάλλονται σε άλλα μέσα εκτός από ένα φυλλομετρητής. Για παράδειγμα, μπορείτε να δημιουργήσετε ένα φύλλο στυλ εκτύπωσης που θα καθορίζει τον τρόπο εκτύπωσης της ιστοσελίδας. Επειδή τα στοιχεία της ιστοσελίδας όπως τα κουμπιά πλοήγησης ή οι φόρμες ιστού δεν θα έχουν σκοπό στην εκτυπωμένη σελίδα, ένα φύλλο στυλ εκτύπωσης μπορεί να χρησιμοποιηθεί για να "απενεργοποιήσετε" τις περιοχές κατά την εκτύπωση μιας σελίδας. Παρόλο που δεν είναι μια συνηθισμένη πρακτική σε πολλούς ιστότοπους, η επιλογή δημιουργίας φύλλων στυλ εκτύπωσης είναι ισχυρή και ελκυστική (στο δικό μας εμπειρία - οι περισσότεροι επαγγελματίες του διαδικτύου δεν το κάνουν μόνο και μόνο επειδή το εύρος του προϋπολογισμού ενός ιστότοπου δεν απαιτεί αυτήν την πρόσθετη εργασία να γίνει).
Γιατί είναι σημαντικό το CSS;
Το CSS είναι ένα από τα πιο ισχυρά εργαλεία που μπορεί να μάθει ένας σχεδιαστής ιστοσελίδων γιατί με αυτό μπορείτε να επηρεάσετε ολόκληρη την οπτική εμφάνιση μιας ιστοσελίδας. Τα καλογραμμένα φύλλα στυλ μπορούν να ενημερωθούν γρήγορα και να επιτρέψουν στους ιστότοπους να αλλάξουν ό, τι έχει προτεραιότητα οπτικά στο οθόνη, η οποία με τη σειρά της δείχνει την αξία και την εστίαση στους επισκέπτες, χωρίς να χρειάζεται να γίνουν αλλαγές στο υποκείμενες Σήμανση HTML.
Η κύρια πρόκληση του CSS είναι ότι υπάρχουν πολλά να μάθουν - και με τα προγράμματα περιήγησης να αλλάζουν καθημερινά, αυτό που λειτουργεί καλά σήμερα μπορεί να μην έχει νόημα αύριο καθώς νέα στυλ υποστηρίζονται και άλλα πέφτουν ή δεν ευνοούνται για έναν λόγο ή αλλο.
Η καμπύλη εκμάθησης CSS αξίζει τον κόπο
Επειδή το CSS μπορεί να καταρρεύσει και να συνδυαστεί, και λαμβάνοντας υπόψη τον τρόπο με τον οποίο διαφορετικά προγράμματα περιήγησης μπορούν να ερμηνεύσουν και να εφαρμόσουν τις οδηγίες διαφορετικά, το CSS μπορεί να είναι πιο δύσκολο να μάθει από το απλό HTML. Το CSS αλλάζει επίσης στα προγράμματα περιήγησης με τρόπο που το HTML δεν το κάνει. Ωστόσο, μόλις αρχίσετε να χρησιμοποιείτε το CSS, θα δείτε ότι η αξιοποίηση της ισχύος των φύλλων στυλ θα σας δώσει απίστευτη ευελιξία στον τρόπο διάταξης των ιστοσελίδων και στον καθορισμό της εμφάνισης και της αίσθησης τους. Στην πορεία, θα συγκεντρώσετε μια «τσάντα από κόλπα» στυλ και προσεγγίσεων που λειτούργησαν για σας στο παρελθόν και στις οποίες μπορείτε να στραφείτε ξανά καθώς εσείς δημιουργήστε νέες ιστοσελίδες στο μέλλον.