Κεφάλαιο 1: Εισαγωγή στα CSS

Ένα CSS (Cascading Style Sheed [Επάλληλα Φύλλα Μορφοποίησης]) αποκαλείται ένα αρχείο που σας επιτρέπει να διαχωρίσετε το περιεχόμενο της ιστοσελίδας σας και των ετικετών της HTML από τις εντολές μορφοποίησης.

Όπως κάνετε κάθε φορά, χρησιμοποιείτε το αρχείο που περιέχει την HTML η οποία αναλαμβάνει να διαχειριστεί το περιεχόμενο (φωτογραφίες, παραγράφους, λίστες, κ.α.), αλλά η μορφοποίηση του περιεχομένου της σελίδας (γραμματοσειρές, χρώματα, φόντο κ.α.) πραγματοποιείτε μέσα στα αρχεία CSS.

Ευτυχώς όμως για εσάς, τα CSS είναι τόσο ευέλικτα που σας επιτρέπουν να τα χρησιμοποιήσετε είτε μέσα στο ίδιο το αρχείο της HTML, μέσα στις ετικέτες της HTML ή σε κάποιο εξωτερικό αρχείο.

Εσωτερικοί κανόνες μορφοποίησης

Θα αρχίσουμε με εξερεύνηση των εσωτερικών κανόνων μορφοποίησης. Σε αυτή την προσέγγιση απλά τοποθετείτε τον κώδικα CSS ανάμεσα στις ετικέτες <head></head> κάθε σελίδας HTML που θέλετε να μορφοποιήσετε. Ο τρόπος σύνταξης αυτής της μεθόδου είναι ο ακόλουθος:

<html>
    <head>
        <title>Τίτλος της σελίδας</title>
        <style type="text/css">
            body
            {
                background : green;
            }
            </style>
    </head>
    <body>
    </body>
</html>

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

Αυτό πρακτικά σημαίνει πως αν έχετε 10 αρχεία html που θέλετε να μορφοποιήσετε με αυτό τον κώδικα, τότε πρέπει να επικολλήσετε αυτό τον κώδικα σε δέκα διαφορετικά αρχεία. Αρχικά αυτό μοιάζει εύκολο, αλλά αν σε λίγο θελήσετε να αλλάξετε το background από πράσινο σε κίτρινο; Θα πρέπει να επεξεργαστείτε και τα δέκα αρχεία, και η διαδικασία αυτή θα πρέπει να πραγματοποιείται για κάθε μια αλλαγή που θέλετε να κάνετε στην εμφάνιση της σελίδας σας.

Μορφοποίηση μέσα στις ετικέτες

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

<div>
    <p>
        Κανονικό περιεχόμενο εδώ
    </p>
    <p style="color : green; font-size: Arial;">
        Πράσινο περιεχόμενο εδώ
    </p>
</div>

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

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

Εξωτερικά αρχεία μορφοποίησης

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

Σε ένα αρχείο CSS δεν επιτρέπετε να γράψουμε εντολές HTML, το μόνο που επιτρέπετε να γράψουμε είναι κανόνες μορφοποίησης για CSS. Το μόνο που θα πρέπει να θυμάστε είναι να αποθηκεύετε τα αρχεία μορφοποίησης με την κατάληξη .css.

Για να συνδέσετε ένα αρχείο μορφοποίησης στην ιστοσελίδας σας μπορείτε να χρησιμοποιήσετε τον κώδικα HTML που ακολουθεί

<link rel="stylesheet" type="text/css" href="style.css" />

ή εναλλακτικά τον κώδικα

<style type="text/css">
    @import url('style.css');
</style>

και στις δυο περιπτώσεις το αρχείο style.css θα φορτωθεί στη σελίδα σας.

Σε αυτό το σημείο πρέπει να σημειωθεί πως τα αρχεία μορφοποίησης θα πρέπει να ενσωματωθούν ανάμεσα στις ετικέτες <head></head> της σελίδας σας.

Ο λόγος που πρέπει να συνδέετε τα αρχεία μορφοποίησης μεταξύ των ετικετών <head></head> είναι πρακτικός. Καθώς η σελίδα σας φορτώνει, ο περιηγητής διαδικτύου, όταν δει τα αρχεία μορφοποίησης τα φορτώνει και μετά συνεχίζει. Έτσι όταν θα αρχίσει να φορτώνει και τις ετικέτες της ιστοσελίδας σας, θα γνωρίζει ήδη πως να τις μορφοποιήσει. Αν φορτώνατε τα αρχεία μορφοποίησης για παράδειγμα στο τέλος της σελίδας σας, η σελίδα πάλι θα είχε την μορφοποίηση σας, αλλά ίσως οι χρήστες να έβλεπαν το περιεχόμενο στιγμιαία χωρίς μορφοποίηση.

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

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

Προτεραιότητες

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

Η απάντηση σε αυτό το ερώτημα είναι ναι. Μπορείτε να χρησιμοποιήσετε είτε όλους τους τρόπους μαζί ή συνδυασμό αυτών.

Και μετά;

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

Όλοι οι τρόποι θα ενσωματωθούν μέσα σε ένα ψευδό-αρχείο μορφοποίησης με την ακόλουθη σειρά:

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

Χρήστες με ειδικές ανάγκες

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

Επόμενο : Συντακτικό CSS