Κατά τη διάρκεια αυτής της σειράς έχει γίνει αναφορά αρκετές φορές στα φύλλα στυλ. Αυτά τα φύλλα στυλ επιτρέπουν τον αυστηρή χωρισμό της διάταξης και του σχεδιασμού. Τα στοιχεία HTML είναι υπεύθυνα μόνο για τη λογική ή σημασιολογική περιγραφή του εγγράφου στον ιστό χάρη στο CSS.
Όπως έχει δειχθεί προηγουμένως, είναι χρήσιμο αρχικά να γνωρίζετε πως φαίνεται ένα φύλλο στυλ. Δείτε ένα πρώτο παράδειγμα γι' αυτό.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>Το έγγραφο φαίνεται έτσι στον browser:
Στην περιοχή body του αρχείου HTML έχουν οριστεί δύο στοιχεία:
• μία επικεφαλίδα
• ένα παράγραφο κειμένου
Με το CSS γίνεται η μορφοποίηση αυτών των δύο στοιχείων. Γι' αυτό στην περιοχή head ορίζεται ένα τμήμα φύλλου στύλ με την εντολή style. Μέσα σε αυτό το τμήμα γίνεται η μορφοποίηση των στοιχείων.
Εδώ είναι ξανά η ορισμός για την επικεφαλίδα h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Με τη σύνταξη που παρουσιάστηκε ορίζονται δύο πράγματα:
• Καθορίζεται η οικογένεια γραμματοσειράς.
• Ορίζεται το μέγεθος γραμματοσειράς.
Σε αυτό το σημείο, ας μιλήσουμε αρχικά γενικά για τη σύνταξη που χρησιμοποιείται. Κάθε δήλωση CSS αποτελείται βασικά από δύο μέρη - έναν επιλογέα και τη δήλωση CSS. Με τον επιλογέα καθορίζεται το στοιχείο που θα μορφοποιηθεί. Το πώς θα φαίνεται τελικά η μορφοποίηση καθορίζεται από τη δήλωση CSS. Ο επιλογέας βρίσκεται πάντα αριστερά, ενώ η δήλωση CSS βρίσκεται δεξιά μέσα σε άγκιστρα.
Η ίδια η δήλωση CSS αποτελείται και πάλι από δύο στοιχεία, δηλαδή την ιδιότητα και την τιμή. Η ιδιότητα και η τιμή χωρίζονται με ένα άνω και κάτω τελεία. Μετά την τιμή ακολουθεί ένα ερωτηματικό.
Επιλογέας {
Ιδιότητα: Τιμή;
}Ενσωμάτωση φύλλων στυλ
Υπάρχουν πολλοί τρόποι να ενσωματώσετε φύλλα στυλ σε ιστοσελίδες. Αρχικά, μπορείτε να αναθέσετε οδηγίες στυλ απευθείας σε ένα tag HTML. Ένα παράδειγμα:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Σε αυτό το παράδειγμα, η επικεφαλίδα εμφανίζεται με μπλε χρώμα.
Μπορείτε επίσης να προσθέσετε πολλές οδηγίες στυλ σε ένα tag HTML.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Σημειώστε απλώς αυτές τις οδηγίες μετά από άλλες, χωρισμένες με ένα ερωτηματικό από τη μια άλλη.
Αρχικά, αυτά τα λεγόμενα Inline-Styles είναι χρήσιμα μόνον όταν πρέπει να μορφοποιήσετε επιμέρους περιοχές μέσα σε μια σελίδα. Κανονικά, θα πρέπει να αποφεύγετε αυτό τον τρόπο άμεσης μορφοποίησης, καθώς ο κώδικας HTML γίνεται λιγότερο ξεκάθαρος.
Κεντρικός ορισμός στην περιοχή head
Μπορείτε να ορίσετε ένα κεντρικό φύλλο στυλ εντός της κεφαλής του αρχείου HTML. Εκεί θα ορίζονται όλα τα στυλ που θα ισχύουν για αυτό το αρχείο.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Το πλεονέκτημα αυτής της παραλλαγής: Σε αντίθεση με την ενσωμάτωση, τα οριζόμενα στυλ μπορούν να χρησιμοποιούνται πολλές φορές στο έγγραφο. Στο προηγούμενο παράδειγμα, ορίστηκε η CSS κλάση text (Αναλυτικές πληροφορίες σχετικά με τους επιλογείς όπως η κλάση που χρησιμοποιήθηκε εδώ, θα ακολουθήσουν στο επόμενο εκπαιδευτικό οδηγό). Αυτή η κλάση μπορεί να χρησιμοποιηθεί τώρα αυθαίρετα πολλές φορές στο έγγραφο.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Ένας τέτοιος ορισμός έχει φυσικά το πλεονέκτημα, σε αντίθεση με την ενσωμάτωση, ότι οι αλλαγές μπορούν να γίνουν πολύ γρήγορα.
Εξωτερική αποθήκευση των οδηγιών CSS
Η πλέον πρακτική μέθοδος ορισμού CSS είναι η αποθήκευση των στυλ σε ένα εξωτερικό αρχείο. Με αυτό τον τρόπο, μπορούν να αποκτήσουν πρόσβαση σε αυτό το αρχείο CSS αυθαίρετα πολλά αρχεία HTML. Έτσι γίνεται εφικτή η ομοιόμορφη μορφοποίηση όλων των αρχείων που σχετίζονται με το διαδικτυακό έργο. Μελλοντικές αλλαγές που θέλουν να έχουν επίδραση σε όλες τις σελίδες μπορούν να εφαρμοστούν εύκολα μέσω αυτής της διαδικασίας.
<link rel="stylesheet" type="text/css" href="css/styles.css">
Στην κεφαλή του αρχείου HTML ορίζεται το στοιχείο link. Εντός του link καθορίζετε πρώτα τον συνδυασμό τιμής-ιδιότητας rel="stylesheet". Έπειτα ακολουθεί το type="text/css". Στο href αναθέτετε το αντίστοιχο αρχείο CSS. Πρέπει να προσέ
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Ως εναλλακτική λύση για τον τύπο σύνδεσης που παρουσιάστηκε παραπάνω, μπορούν επίσης να εισαχθούν φύλλα στυλ μέσω εισαγωγής. Και εδώ, οι δηλώσεις CSS βρίσκονται σε ένα εξωτερικό αρχείο. Η σύνταξη που χρησιμοποιείται είναι η ακόλουθη:
<style type="text/css">
@import url("css/styles.css");
</style>
Μέσα στις αγκύλες καθορίζεται το μονοπάτι προς το αρχείο CSS που θέλετε να εισάγετε. Παρεμπιπτόντως, το @import είναι μια CSS σύνταξη. Επομένως, η εντολή @import μπορεί να χρησιμοποιηθεί και μέσα σε αρχεία CSS. Με αυτόν τον τρόπο γίνεται δυνατή η κλήση άλλων φύλλων στυλ από ένα φύλλο στυλ, κάτι που διευκολύνει την ταξινόμηση των φύλλων στυλ.
Φυσικά, προκύπτει η ερώτηση εάν πρέπει να χρησιμοποιήσετε τον τύπο σύνδεσης link ή το @import. Γενικά, προτιμώ το link, καθώς αυτός ο τρόπος είναι απλά πιο γρήγορος, με καλύτερη επίδοση της σελίδας.
Φύλλα στυλ για Συγκεκριμένα Μέσα
Μπορείτε να ορίσετε φύλλα στυλ για πολύ διαφορετικά μέσα όπως εκτυπωτές ή την οθόνη. Χρησιμοποιείται το χαρακτηριστικό media. Μπορείτε να αναθέσετε ένα φύλλο στυλ σε περισσότερα από ένα μέσα που διαχωρίζονται με κόμμα.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Σε αυτήν την περίπτωση κλήθηκαν δύο φύλλα στυλ, ένα για την οθόνη και ένα για την περίπτωση που θα εκτυπωθεί η σελίδα. Το αρχείο CSS druck.css θα φορτωθεί όταν κληθεί η λειτουργία εκτύπωσης του προγράμματος περιήγησης. Συνολικά, διατίθενται τα ακόλουθα media τιμές:
• all – Ισχύει για όλα τα μέσα εξόδου.
• aural – Το αρχείο CSS χρησιμοποιείται για το σύστημα ομιλίας.
• braille – Το αρχείο CSS προορίζεται για εκτυπωτές Braille με ανάδραση αφής που μπορούν να δημιουργήσουν τη λεγόμενη "Κωδική Σημαία".
• embossed – Αποστέλλει τις σελίδες σε εκτυπωτές Braille.
• handheld – Προορίζεται για συσκευές Handheld.
• print – Το αρχείο CSS εφαρμόζεται για εκτύπωση σε χαρτί. Οι περιηγητές πρέπει να ανατρέχουν αυτόματα σε αυτό το αρχείο, όταν καλείται η λειτουργία εκτύπωσης.
• projection – Αυτή η εκδοχή είναι προβλεπτική για προβολές.
• screen – Προβλέπεται για εμφάνιση οθόνης.
• tty – Το αρχείο CSS ισχύει για μέσα που χρησιμοποιούν σταθερό καμβά χαρακτήρων. Αυτοί μπορεί να είναι για παράδειγμα τηλεγράφοι και τερματικά.
• tv – Εδώ εξυπηρετούνται συσκευές παρόμοιες με τηλεόραση. Υποθέτεται ότι οι συσκευές αυτές έχουν χαμηλή ανάλυση και περιορισμένη δυνατότητα κύλισης.
Πέρα από τη σύνταξη HTML που παρουσιάστηκε μέσω του στοιχείου σύνδεσης, υπάρχουν επίσης ειδικές παραλλαγές CSS. Εδώ χρησιμοποιείται το @import ή το @media.
<style type="text/css">
@media screen, projection {
/* Μορφές για οθόνη */
}
@media print {
/* Μορφές για εκτύπωση */
}
</style>
Μέσα στο στοιχείο style ορίζετε με τη χρήση του @media έναν τομέα με ορισμούς μορφής που προορίζονται για ένα συγκεκριμένο μέσο εξόδου. Πίσω από το @media, διαχωρισμένο με κενό, πρέπει να αναφέρετε έναν από τους προηγουμένως περιγραμμένους τύπους μέσου. Πολλά μέσα εξόδου αναφέρονται, χωρισμένα με κόμματα.
