Όταν ένας φυλλομετρητής διαβάσει CSS, τότε θα μορφοποιήσει το έγγραφο HTML σύμφωνα με τις οδηγίες που περιλαμβάνονται στο CSS.
Υπάρχουν τρεις τρόποι για να εισάγουμε μορφοποίηση css σε μια ιστοσελίδα:
External style sheet (εξωτερικό αρχείο css)
Internal style sheet (css εντός του αρχείου)
Inline style (ενσωματωμένο css)
External style sheet
Όταν χρησιμοποιούμε external style sheet (εξωτερικό αρχείο css) τότε έχουμε τη δυνατότητα να αλλάξουμε την εμφάνιση ενός ολόκληρου ιστότοπου χρησιμοποιώντας μόνο ένα αρχείο!
Κάθε σελίδα του ιστότοπου πρέπει να περιλαμβάνει αναφορά προς το εξωτερικό αρχείο css χρησιμοποιώντας το στοιχείο συνδέσμου της html <link>. Το στοιχείο <link> είναι ο γνωστός σύνδεσμος της html και πρέπει να τοποθετηθεί στο κομμάτι της κεφαλίδας (<head>) του αρχείου html.
Αυτό γίνεται ως εξής:
————————————
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
————————————
Το external style sheet (εξωτερικό αρχείο css) μπορεί να γραφτεί με οποιονδήποτε επεξεργαστή κειμένου. Στο άρθρο μας για την εισαγωγή στην κατασκευή ιστοσελίδων είδαμε πως μπορεί να δημιουργθεί ένα αρχείο με έναν επεξεργαστή κειμένου. Το αρχείο δεν πρέπει να περιέχει ετικέτες html. Το αρχείο πρέπει να έχει κατάληξη .css extension.
Στη συνέχεια ακολουθεί παράδειγμα που δείχνει πως θα μπορούσε να είναι ένα εξωτερικό αρχείο css:
————————————
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
————————————
Πρέπει να τονίσουμε οτι δεν πρέπει να αφήνουμε κενό ανάμεσα στο όνομα της ιδιότητας και την τιμή της ιδιότητας.
Για παράδειγμα δεν είναι σωστό να γράψουμε: margin-left: 20 px;
Το σωστό είναι να γράψουμε: margin-left: 20px;
Internal Style Sheet
Το internal style sheet ενδείκνυται να χρησιμοποιείται στην περίπτωση που μια μεμονωμένη ιστοσελίδα χρειάζεται να έχει ξεχωριστή μορφοποίηση.
Η μορφοποίηση με internal style sheet καθορίζεται εντός του html στοιχείου <style> το οποίο πρέπει να βρίσκεται στην κεφαλίδα (<style>) του εγγράφου html
Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
————————————
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
————————————
Στο αρχείο αυτό χρησιμοποιήσαμε internal style sheet για να μορφοποιήσουμε το φόντο της σελίδας και μια παράγραφο της html.
Το αποτέλεσμα των παραπάνω γραμμών φαίνεται στην παρακάτω εικόνα:
Ενσωματωμένο CSS (Inline Styles)
Το inline style ενδείκνυται να χρησιμοποιείται όταν θέλουμε να μορφοποιήσουμε ένα συγκεκριμένο στοιχείο της html.
Για να να χρησιμοποιήσουμε το inline style πρέπει να προσθέσουμε μορφοποίηση css μέσα στην ετικέτα του στοιχείου.
Το χαρακτηριστικό style attribute μπορεί να περιέχιε οποιαδήποτε ιδιότητα css.
Στο παρακάτω παράδειγμα δείχνουμε με ποιό τρόπο μπορούμε να αλλάξουμε το χρώμα και το αριστερό περιθώριο ενός στοιχείου κεφαλίδας <h1>.
————————————
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
————————————
Ακολουθεί ολοκληρωμένο το παραάδειγμα σε μια πλήρη σελίδα html καθώς και το αποτέλεσμα που προκύπτει στο φυλομετρητή:
————————————
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
————————————
Το Inline Style χάνει πολλά από τα πλεονεκτήματα που δίνει το css.
Το σημαντικότερο πλεονέκτημα που χάνουμε είναι ο διαχωρισμός του περιεχομένου από τη μορφοποίηση. Διότι δεν απομονώνει το περιεχόμενο αλλά το συνδέει στενά με τη μορφοποίηση αυτού.
Για αυτό το λόγο πρέπει να χρησιμοποιείται πολύ σπάνια.
Πολλαπλά φύλλα μορφοποίησης (Multiple Style Sheets)
Εάν η ιδιότητα ενός στοιχείου html δηλωθεί σε ένα css και στη συνέχεια δηλωθεί και σε άλλο css, τότε αυτό που θα υπερισχύσει είναι το τελευταίο που δηλώθηκε.
Ακολουθεί παράδειγμα που θα μας βοηθήσιε να ξεναθαρίσουμε αυτό το σημείο.
Υποθέτουμε οτι θέλουμε να μορφοποιήσουμε μια επικεφαλίδα <h1> και χρησιμοποιούμε το παρακάτω css:
————————————
h1 {
color: navy;
}
————————————
Υποθέτουμε επίσης οτι ακολουθεί και δεύτερο css που μορφοποιεί τις επικεφαλίδες <h1> ως εξής:
————————————
h1 {
color: orange;
}
————————————
Τότε αυτό που θα υπερισχύσει και θα καθορίσει ετο χρώμα του στοιχείου θα είναι το δεύτερο css.
Δηλαδή το χρώμα του στοιχείου θα είναι “orange”.
Cascading Order
Τώρα μπαίνει το ερώτημα:
Ποιό αρχείο css θα υπερισχύσει στην περίπτωση που δηλωθούν πολλά αρχεία css μέσα σε ένα έγγραφο html;
Σε γενικές γραμμές μπορούμε να πούμε οτι όλα τα css αθα εφαρμοστούν συνολικά και αθροιστικά πάνω σε κάθ εστοιχείο html.
Δγλαδή για παράδειγμα μια επικεφαλίδα μπορεί να πάρει χράωμα λόγω ενός αρχείου css και υπογράμμιση λόγω ενός άλλου αρχείου css.
Εάν όμως πάν ενα καθορίσουν την ίδι αιδιότητα τότε ισχύει η προτεραιώτητα:
Προηγείται η μορφοποίηση που προέρχεται από το inline style (ενσωματωμένο css)
Ακολουθεί η μορφοποίηση που προέρχεται external and internal style sheets
Αλλιώς εφαρμόζεται η προεπιλεγμένη μορφοποίηση του φυλλομετρητή.
Κατασκευή Ιστοσελίδων με CSS
Είναι πολύ σημαντικό για τον κατασκευαστή ιστοσελίδων να εφαρμόζει σωστά τη μορφοποίηση css. Είναι επίσης πολύ σημαντικό να γνωρίζει όλους τους κανόνες και να επιλέγει τον καταλληλότερο για κάθε περίπτωση. Κάθε σελίδα που κατασκευάζεται πρέπει να λειτουργεί σωστά όχι μόνο σε υπολογιστές, αλλά και σε tablet, σε smartphones και σε κάθε είδους συσκευή από την οποί αμπορεί να μπει ο χρήστης στο internet. Η σωστή εμφάνιση της σελίδας στηρίζεται κατά ένα τεράστιο ποσοστό στη σωστή χρήση του css. Εάν θέλετε να σσχοληθείτε σοβαρά με την κατασκευή ιστοσελίδων τότε θα πρέπει να δώσετε πολύ μεγάλη βαρύτητα στη σωστή κατανόηση του CSS.
