Κατασκευή μιας απλής σελίδας με ενσωματωμένα 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 sheets

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

Τρέχουσα Ενότητα: Προχωρημένο HTML - Dreamweaver