Κεφάλαιο 2: Συντακτικό CSS

• 23 Αυγούστου 2012
• by: Georgios
• in: Web Design

Το συντακτικό των CSS είναι διαφορετικό από αυτό της γλώσσας μορφοποίησης (x)HTML. Ωστόσο είναι πολύ εύκολη και δεν θα πρέπει να σας φοβίσει.

Το συντακτικό των CSS αποτελείται μόνο από τρία πράγματα όπως φαίνεται στο παράδειγμα που ακολουθεί

selector
{
    property : value;
}

Ο selector είναι ο επιλογέας του στοιχείου που θέλετε να μορφοποιήσετε στην ιστοσελίδα σας. Το property είναι η ιδιότητα που θέλετε να μορφοποιήσετε για το επιλεγμένο στοιχείο και το value είναι η τιμή η μορφοποίηση που θέλετε να εφαρμόσετε στο στοιχείο αυτό.

Κάθε επιλογέας μπορείτε να έχει πολλαπλές ιδιότητες, και κάθε ιδιότητα μέσα στον επιλογέα μπορεί να έχει ανεξάρτητες τιμές. Το όνομα της ιδιότητας από την τιμή της ιδιότητας χωρίζονται με μια άνω και κάτω τελεία (:), ενώ είναι ανάμεσα σε δύο αγκύλες. Τέλος κάθε ζευγάρι ιδιότητας – τιμής πάντα στο τέλος έχουν ένα ελληνικό ερωτηματικό. Ακόμα θα πρέπει να σημειωθεί πως αν κάποια ιδιότητα μπορεί να έχει περισσότερες από μια τιμές, τότε οι τιμές αυτής τη ιδιότητας χωρίζονται με κόμματα όπως στο παράδειγμα που ακολουθεί:

body
{
    background : #EFEFEF;
    font-family : Arial, Serif;
}

Όπως μπορείτε να δείτε και στον παραπάνω κώδικα, το όνομα των ιδιοτήτων background και font-family έχουν στα δεξιά τους μια άνω και κάτω τελεία (:) και μετά ακολουθούν οι τιμές για κάθε μια από αυτές τις ιδιότητες. Επίσης μπορείτε να δείτε πως στην ιδιότητα font-family, επειδή έχω ορίσει δύο γραμματοσειρές, τα ονόματα των γραμματοσειρών χωρίζονται με κόμμα. Τέλος, στα δεξιά από κάθε τιμή υπάρχει ένα ελληνικό ερωτηματικό το οποίο προσδιορίζει το τέλος της ιδιότητας.

Με τον παραπάνω κώδικα η σελίδα μας θα έχει ως φόντο ένα πολύ ανοικτό γκρι χρώμα, και η γραμματοσειρά θα είναι Arial. Στην περίπτωση όμως που στο σύστημα δεν υπάρχει εγκατεστημένη η γραμματοσειρά Arial τότε θα χρησιμοποιηθεί η Serif.

Κληρονομικότητα

Σε ένα έγγραφο HTML ενσωματώνετε πολλά στοιχεία το ένα μέσα στο άλλο. Όταν έχετε ένα στοιχείο μέσα σε ένα άλλο τότε το ενσωματωμένο στοιχείο θα κληρονομήσει τις ιδιότητες του γονικού στοιχείο για το CSS. Αυτή η συνθήκη μπορεί να αλλάξει μόνο αν αλλάξετε τις ιδιότητες μορφοποίησης για το στοιχείο που κληρονομεί από το γωνικό.

Για παράδειγμα, αν ορίσετε μια γραμματοσειρά στο στοιχείο body της ιστοσελίδας σας, τότε αυτή η γραμματοσειρά θα χρησιμοποιηθεί σε όλα τα στοιχεία μέσα στην σελίδα σας, μέχρι να δηλώσετε ρητά πως κάποιο στοιχείο θέλετε να έχει μια άλλη γραμματοσειρά.

Δείτε το ακόλουθο παράδειγμα :

body
{
    font-family : Arial;
}

Με τον παραπάνω κώδικα στο CSS αρχείο σας, όλα τα στοιχεία της σελίδας σας θα έχουν προεπιλεγμένα την γραμματοσειρά Arial.

Αν τώρα θέλετε κάποια στοιχεία να έχουν διαφορετικές γραμματοσειρές τότε μπορείτε να αναφερθείτε σε αυτά με τον κατάλληλο επιλογέα και να αλλάξετε τη γραμματοσειρά, όπως στο παράδειγμα που ακολουθεί:

p
{
    font-family : Tahoma;
}

a
{
    font-family : Georgia;
}

Αφού προσθέσετε και τον παραπάνω κώδικα στο αρχείο CSS σας, τότε οι παράγραφοι θα έχουν γραμματοσειρά Tahoma, ενώ οι σύνδεσμοι θα έχουν γραμματοσειρά Georgia.

Ωστόσο θα πρέπει να γνωρίζεται πως υπάρχουν και κάποιες ιδιότητες που δεν κληρονομούνται. Αν για παράδειγμα στο αρχείο CSS σας έχετε τον ακόλουθο κώδικα :

body
{
    margin: 15px;
}

Αυτό δεν σημαίνει πως όλα τα στοιχεία μέσα στην σελίδα σας θα έχουν γύρο τους κενό χώρο ίσο με 15 pixels.

Συνδυασμός επιλογέων

Ένα άλλο πολύ χρήσιμο χαρακτηριστικό του συντακτικού για τα CSS είναι η δυνατότητα χρήσης πολλαπλών επιλογέων οι οποίοι θα μορφοποιηθούν το ίδιο.

Για παράδειγμα ας υποθέσουμε πως θέλουμε όλες οι επικεφαλίδες στην ιστοσελίδα μας θέλουμε να είναι γκρι και γραμματοσειρά Arial, αλλά θέλουμε επίσης η επικεφαλίδα h4 θέλουμε να είναι κόκκινη. Για να το καταφέρουμε αυτό μπορούμε να γράψουμε τον ακόλουθο κώδικα μέσα στο αρχείο CSS:

h1, h2, h3, h4, h5, h6
{
    color: #333;
    font-family: Arial;
}

h4
{
    color: #F00;
}

Στο πρώτο σύνολο μορφοποιούμε όλες τις επικεφαλίδες να έχουν χρώμα γκρι και γραμματοσειρά Arial, ενώ στο δεύτερο σύνολο μορφοποιούμε μόνο την επικεφαλίδα h4 έτσι ώστε να έχει κόκκινο χρώμα.

Σχόλια σε αρχεία CSS

Μια καλή τακτική που μπορείτε να χρησιμοποιείτε όταν γράφετε κώδικα, είναι να δημιουργείτε σχόλια, τα οποία περιγράφουν το σκοπό του κώδικα σας. Με αυτό τον τρόπο μπορείτε μετά από πολύ καιρό να κατανοείτε εύκολα τον λόγο που έχετε κάνει κάποιες επιλογές και διαδικασίες στον κώδικα σας, καθώς επίσης μπορείτε να βοηθήσετε και άλλους προγραμματιστές να κατανοήσουν ή να διορθώσουν τον κώδικα σας.

Στα αρχεία CSS σας μπορείτε να εισάγετε σχόλια προσθέτοντας τους χαρακτήρες /* στην αρχή του σχόλιου σας και τους χαρακτήρες */ στο τέλος όπως και στο παράδειγμα που ακολουθεί :

/* Ένα απλό σχόλιο σε CSS */

Προηγούμενο : Εισαγωγή στα CSS
Επόμενο : CSS Κλάσεις