Το πρότυπο css χρησιμοποιείται για την εύκολη μαζική μορφοποίηση μια ιστοσελίδας ή ολόκληρου ιστοτόπου. Υπάρχουν δύο τρόποι να εισάγουμε αυτό το πρότυπο.
Στον πρώτο τρόπο οι εντολές css ενσωματώνονται στο html αρχείο. Οι κατάλληλες εντολές
περιλαμβάνονται ανάμεσα στους κωδικούς:
<STYLE TYPE="TEXT/CSS">
και
</STYLE>
.
Όλο αυτό το τμήμα θα πρέπει να περιλαμβάνεται
μεταξύ των κωδικών <HEAD> και </HEAD> του αρχείου html.
Στο δεύτερο τρόπο, δημιουργούμε ένα ξεχωριστό
αρχείο με τις κατάλληλες εντολές, το οποίο και καλείται
από τα αρχεία html.
Ξεκινούμε από την πρώτη περίπτωση. Ο γενικός κανόνας είναι η δήλωση του κωδικού, για παράδειγμα <P>, <UL>, <H1> κ.λπ., που ακολουθείται από τα ορίσματα που θέλουμε να επιβάλλουμε στον συγκεκριμένο κωδικό. Τα τελευταία αυτά πρέπει να βρίσκονται μέσα σε { }. Βέβαια, έχουμε και εισαγωγή νέας ονοματολογίας σε γνωστούς κωδικούς που δίνουν μεγαλύτερη ευχέρεια στη μορφοποίηση (π.χ.το όρισμα border του κωδικού <td> μπορεί να αναχθεί σε border-left-width, border-right-width κτλ. επιτρέποντας να ορίσουμε διαφορετικό πάχος για κάθε πλευρά του κελιού).
Ας αρχίσουμε με ένα απλό παράδειγμα. Θέλουμε οι
επικεφαλίδες H1 να γράφονται με πλάγια γράμματα (italics), επιπλέον του ότι ορίζει
ήδη ο κωδικός <H1>. Γράφουμε:
<HEAD>
...................
<STYLE TYPE="TEXT/CSS">
H1 {font-style:italic}
...................
</style>
...................
</HEAD>
Μπορούμε να ορίσουμε περισσότερα από ένα ορίσματα για τον κωδικό
<H1>. Τα ορίσματα χωρίζονται με το σύμβολο ;.
Για παράδειγμα, θα μπορούσαμε να γράφαμε:
H1 {font-style:italic;
text-align: center;
color: red;
font-size: 12pt}
οπότε οι επικεφαλίδες H1 θα γράφονται κεντραρισμένες, με κόκκινα γράμματα και με μέγεθος
γραμμάτων 12pt. Έχουμε, όμως, ακόμα μεγαλύτερες δυνατότητες: μπορούμε να εφαρμόσουμε τα νέα
ορίσματα σε ορισμένες περιπτώσεις. Συνεχίζοντας το παραπάνω απαράδειγμα, γράφουμε:
H1.myh1 {font-style:italic;
text-align: center;
color: red;
font-size: 12pt}
Σ' αυτή την περίπτωση, χρησιμοποιώντας τον κωδικό <H1> θα έχουμε τον κλασικό
τρόπο γραφής της επικεφαλίδας. Αν όμως γράψουμε:
<H1 class="myh1">
............
</H1>
τότε θα εφαρμοσθούν όλα τα ορίσματα της κλάσης myh1 που ορίσαμε. Μπορούμε ακόμα
να ορίσουμε δικές μας ανεξάρτητες κλάσεις. Έτσι, αν γράψουμε (πάντα μεταξύ των
<STYLE TYPE="TEXT/CSS"> και </STYLE>):
.mycolor {color:red}
(προσέξτε την τελεία που χρησιμοποιείται στην αρχή οριμού της κλάσης) τότε, αν γράψουμε:
<H1 class="mycolor"> ...... </H1>
η συγκεκριμένη επικεφαλίδα θα είναι με κόκκινα γράμματα. Αλλά ακόμα γράφοντας:
<p class="mycolor"> ......
η συγκεκριμένη παράγραφος θα είναι με κόκκινα γράμματα.
Οι δυνατότητες που παρουσιάζουν τα css είναι πράγματι
πολλές. Θα αναφέρουμε εδώ μόνο ορισμένες που θεωρούμε πολύ χρήσιμες.
Αν θέλουμε να καθορίσουμε τα ίδια ορίσματα σε δύο κωδικούς, απλά χωρίζουμε τους κωδικούς με κόμμα (,):
H1,I {color:red}
οπότε όλες οι επικεφαλίδες H1 και τα πλάγια γράμματα (italic) θα γράφονται με κόκκινα γράμματα.
Μπορούμε να προσδιορίσουμε πλήρως που ακριβώς θέλουμε να εφαρμοστεί μια επιλογή μας.
Γράφοντας:
ol ul {text-decoration:underline}
όλα τα στοιχεία μιας λίστας <UL> που είναι με τη σειρά της υπολίστα μιας άλλης λίστας
<OL> παρουσιάζονται υπογραμμισμένα.
Αν δεν μας αρέσει η υπογράμμιση και το μπλε χρώμα ως ένδειξη συνδέσμου (link) μπορούμε να το αλλάξουμε
(και μάλιστα επιλεκτικά):
a.mydec {colour:red;
text-decoration:none;
font-style:italic}
τότε η εντολή <a href="...">...<a> θα δείχνει το σύνδεσμο ως συνήθως (μπλε και υπογραμμισμένο), ενώ η
<a class="mydec" href="...">...<a> θα δείχνει το σύνδεσμο κόκκινο, δίχως υπογράμμιση και σε italic.
Όπως αναφέρθηκε στην αρχή μπορούμε να δηλώσουμε όλες τις εντολές css σε ξεχωριστό αρχείο το οποίο καλείται από το αρχείο html.
Σ' αυτήν την περίπτωση, στο αρχείο html εισάγουμε, πάλι μεταξύ <HEAD> και </HEAD>, την εντολή:
<LINK REL="stylesheet" TYPE="TEXT/CSS" href="filename.css">
όπου τώρα το αρχείο filename.css περιέχει απλά τις εντολές, με την ίδια μορφή που έχουν όταν ενσωματώνονται στο html αρχείο.
Παρακάτω δίνεται μια σειρά κωδικών και ορισμάτων:
font-weight: bold (ή bolder ή lighter)
font-style: normal (ή italic ή oblique)
text-decoration: none (ήunderline ή overline ή line-through)
text-indent: αριθμός σε px, cm, mm, in, pt, %
font-family:"Arial" (ή άλλες γραμματοσειρές)
font-size: small ή medium ή large ή x-small ή xx-small ή x-large ή xx-large ή αριθμός σε px, cm, mm, in, pt
text-align: left ή center ή righ ή justify
color: red ή τα άλλα βασικά χρώματα ή τη δεκαεξαδική μορφή του χρώματος
Μπορεί να υπάρχει συνδυασμός δήλωσης ενσωματωμένου css και σύνδεση με εξωτερικό αρχείο css αρχείου. Σ' αυτή την περίπτωση υπερισχύουν οι ενσωματωμένες δηλώσεις. Επίσης, αν σε οποιοδήποτε σημείο του αρχείου html δοθεί κάποιο όρισμα σε κα΄ποιο κωδικό, υπερισχύει όλων των άλλων ορισμάτων. Για παράδειγμα, αν μια παράγραφος ξεκινά με <p align="right"> θα υπερισχύσει, στην συγκεκριμένη παράγραφο, οποιουδήποτε άλλου ορίσματος εμφανίζεται σε εξωτερικό αρχείο css ή σε ενσωματομένες εντολές css. Επίσης, Πολύ συχνά χρησιμοποιούνται ενσωματωμένα css ως επέκταση η ιδιαιτεροποίηση του γενικού θέματος (εξωτερικό αρχείο) για συγκεκριμένες σελίδες του δυκτιακού τόπου.
| Προηγούμενη ενότητα | Επόμενη ενότητα |