Κατασκευή μιας απλής σελίδας με style sheets

Συνήθως ο ορισμός των styles της σελίδας μας γίνεται με την τοποθέτηση ειδικών κανόνων (δηλαδή κατάλληλα διατυπωμένων ρυθμίσεων) μετά την οδηγία <HTML> και πριν από την οδηγία <BODY>. Για παράδειγμα, ο κώδικάς μας μπορεί να είναι:

<HTML> <STYLE TYPE="text/css"></STYLE><HEAD><TITLE>Η πρώτη μου σελίδα με styles</TITLE></HEAD><BODY>

Τι είναι οι κανόνες (rules):

Οι κανόνες αποτελούν το θεμέλιο των Stylesheets. Στο παραπάνω παράδειγμα υπάρχει ο κανόνας

H2 { color: blue }

ο οποίος δηλώνει στον browser πως όπου συναντήσει την οδηγία <H2>...</H2>, όλο το κείμενο που περικλύεται από αυτήν θα πρέπει να εμφανιστεί με μπλε χρώμα.

Κάθε κανόνας αποτελείται από στοιχεία (selectors) και επιλογές (declarations). Στο παραπάνω παράδειγμα το στοιχείο (selector) μας είναι η οδηγία H2 (όλες οι οδηγίες HTML αποτελούν selectors), ενώ η επιλογή (declaration) μας είναι το color: blue. Κάθε επιλογή αποτελείται από παραμέτρους (properties) και τιμές (values). Στο παραπάνω παράδειγμα το color είναι η παράμετρος (property) και το blue είναι η τιμή (value).

Μπορούμε να χρησιμοποιήσουμε ως στοιχείο οποιαδήποτε οδηγία HTML. Επίσης, μπορούμε να ομαδοποιήσουμε στοιχεία και να τους ορίσουμε τις ίδιες επιλογές. Για παράδειγμα το

H2, P, BLOCKQUOTE { font-family: arial }

δηλώνει πως οτιδήποτε περικλύεται από τις οδηγίες <H2>, <P> και <BLOCKQUOTE> θα εμφανιστεί με arial γραμματοσειρά. Έτσι, ο κώδικας για τον ταυτόχρονο ορισμό αυτών των τριών στοιχείων θα είναι:

<HTML> <STYLE TYPE="text/css"></STYLE><HEAD><TITLE>Η πρώτη μου σελίδα με styles</TITLE></HEAD><BODY>

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

<HTML> <STYLE TYPE="text/css"></STYLE><HEAD><TITLE>Η πρώτη μου σελίδα με styles</TITLE></HEAD><BODY>

Στο παραπάνω παράδειγμα ορίζουμε πως τα περιεχόμενα της H2 θα είναι πράσινα, ενώ τα περιεχόμενα των P και BLOCKQUOTE θα εμφανιστούν με arial γραμματοσειρά.

Ισχύς των κανόνων:

Οι κανόνες που ορίζουμε με την οδηγία <STYLE> έχουν ισχύ σε ολόκληρη τη web σελίδα αν δεν αναιρούνται από ένα άλλο Stylesheet. Επίσης, κληρονομούν τις ιδιότητές τους σε όλα τα μέρη της σελίδας που επηρεάζονται από τα οριζόμενα στοιχεία. Για παράδειγμα, ας υποθέσουμε πως έχουμε τον ακόλουθο κώδικα:

<HTML> <STYLE TYPE="text/css"></STYLE><BODY>...........<B>Τα πάντα <u><i>πρέπει</i></u> να δουλεύουν τέλεια</B>, είπε ο <u><i>Θανάσης</i></u>....</BODY></HTML>

Εδώ έχουμε ορίσει πως το style της <B> θα είναι μπλε αλλά δεν έχουμε ορίσει τίποτε για τις <u> και <i>. Γι' αυτό, το περιεχόμενό τους θα αποκτήσει το μπλε χρώμα το οποίο, σύμφωνα με όσα έχουμε δηλώσει, εφαρμόζεται σε οτιδήποτε βρίσκεται μέσα στην οδηγία <B>.

Η εμφάνιση του κειμένου λοιπόν θα είναι:

Τα πάντα πρέπει να δουλεύουν τέλεια, είπε ο Θανάσης.

Επιστροφή στον Οδηγό StyleSheets

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων