Εισαγωγή στα CSS
Τι είναι CSS; Η ονομασία CSS βγαίνει από τις λέξεις Cascading Style Sheets δηλαδή, διαδοχικά φύλλα στυλ. Πρόκειται για μια τεχνολογία ορισμού προβολής δεδομένων σε μια ιστοσελίδα η οποία έρχεται και δένει μαζί με αυτή της HTML η οποία με την σειρά της καθορίζει την δομή μιας σελίδας.
Τα CSS καθορίζουν τον τρόπο μορφοποίησης με τον οποίο θα προβάλλεται το περιεχόμενο μιας html σελίδας όπως είναι τα χρώματα και η θέση των στοιχείων της σελίδας. Ένα μεγάλο πλεονέκτημα των CSS είναι ότι μπορούν να αποθηκευτούν σε εξωτερικό αρχείο με κατάληξη .css και να χρησιμοποιηθούν από κοινού σε περισσότερες από μια .html σελίδες, εξοικονομώντας με τον τρόπο αυτό χρόνο και κόπο υλοποίησης. Αυτό πρακτικά σημαίνει πως μια αλλαγή σε αυτό το αρχείο θα ενημερώσει όλες τις html σελίδες με τις οποίες συνδέεται.
Σύνταξη των CSS
Ένας κανόνας CSS αποτελείται από τον επιλογέα και μια ομάδα από ορισμούς.
Ο επιλογέας μπορεί να είναι μια ετικέτα html την οποία θέλουμε να μορφοποιήσουμε ή ένα δικό μας όνομα το οποίο θα το εφαρμόσουμε σε κάποιο σημείο στον κώδικα html. Οι ορισμοί δηλώνονται ανάμεσα στα σύμβολα με τα άγκιστρα {}. Κάθε ορισμός αφορά μια ιδιότητα, την οποία θέλουμε να μεταβάλουμε και την τιμή την οποία παίρνει. Μεταξύ αυτών των δύο χρησιμοποιείται το σύμβολο άνω-κάτω τελεία :. Στο τέλος κάθε ορισμού υπάρχει το ελληνικό ερωτηματικό ;. Μπορούμε να βάλουμε όσους ορισμούς χρειαζόμαστε για τον κάθε έναν επιλογέα.
Ένα εξωτερικό αρχείο .css, για το οποίο αναφερθήκαμε πριν, αποτελείται από μια σειρά κανόνων με κάθε έναν να αφορά έναν ή περισσότερους επιλογείς. Οι κανόνες όμως μπορούν να γραφτούν σε μια μόνο σελίδα στην οποία και θα εφαρμόζονται. Στην περίπτωση αυτή πρέπει να οριστούν στο header κομμάτι της σελίδας.
Πρέπει να είμαστε προσεκτικοί με την σύνταξη των κανόνων γενικά επειδή ένα λάθος θα αποτρέψει την εφαρμογή του συγκεκριμένου κανόνα στο οποίο σφάλαμε.
Παραδείγματα κανόνων CSS
Παράδειγμα ορισμού παραγράφου:
p {color:blue; text-align:center;}
Αυτός ο κανόνας ισχύει για κάθε μια ετικέτα παραγράφου η οποία θα χρησιμοποιηθεί. Σε αυτόν ορίζεται ένας κανόνας για το χρώμα των γραμμάτων και ένας κανόνας κεντρικής στοίχισης του κειμένου.
Παράδειγμα ορισμού επικεφαλίδας
H1 {font-family: "Times New Roman", Times, serif;}
Ο κανόνας αυτός ορίζει την γραμματοσειρά για την επικεφαλίδα 1. Θα εφαρμοστεί αυτόματα σε όποιο σημείο της σελίδας οριστεί το κείμενο ως επικεφαλίδα 1.
Τρόπος γραφής των κανόνων CSS
Ο τρόπος γραφής των κανόνων έχει να κάνει καθαρά με τον τρόπο εμφάνισης τους. Για παράδειγμα, οι κανόνες στο προηγούμενο παράδειγμα θα μπορούσαν να γραφτούν ως εξής:
p {
color:blue;
text-align:center;
}
H1 {
font-family: "Times New Roman", Times, serif;
}
Τέλος, η χρήση των πεζών ή κεφαλαίων είναι θέμα προτίμησης, δηλαδή δεν υπάρχει διαφορά ότι και αν χρησιμοποιήσουμε.
Σχόλια στον κώδικα
Τα σχόλια στον κώδικα παίζουν τον ίδιο ρόλο με τα πολύχρωμα αυτοκόλλητα χαρτάκια υπενθύμισης. Τα χρησιμοποιούμε στον κώδικα ως σημειώσεις. Τα σχόλια είναι κείμενο το οποίο τοποθετείται μεταξύ των συμβόλων /* και */. Τα σχόλια δεν λαμβάνονται υπόψη από τον φυλλομετρητή όταν διαβάζει τον κώδικα. Αυτή η τακτική είναι αναγκαία σε μεγάλα αρχεία στα οποία χρησιμοποιείται ένας μεγάλος αριθμός κανόνων.
p { /* Σχόλια μιας γραμμής */
color:blue;
text-align:center;
}
/*Σχόλια
Πολλών
γραμμών*/
H1 {
font-family: "Times New Roman", Times, serif;
}
Στο παραπάνω παράδειγμα βλέπουμε τον τρόπο χρήσης των σχολίων.
Επίλογος
Σε αυτό το μάθημα περιγράψαμε εν συντομία το τι είναι CSS.
