Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης
Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε Άδεια χρήσης άλλου τύπου, αυτή πρέπει να αναγράφεται ρητώς.
Βασικά στοιχεία της HTML >Επάλληλα Φύλλα Στυλ (Cascading Style Sheets): Μια σύντομη εισαγωγή (1/14) Το πρότυπο css χρησιμοποιείται για την εύκολη μαζική μορφοποίηση μια ιστοσελίδας ή ολόκληρου ιστότοπου. Υπάρχουν δύο τρόποι να εισάγουμε αυτό το πρότυπο.
Μια σύντομη εισαγωγή (2/14) Στον πρώτο τρόπο οι εντολές css ενσωματώνονται στο html αρχείο. Οι κατάλληλες εντολές περιλαμβάνονται ανάμεσα στους κωδικούς: <STYLE TYPE="TEXT/CSS"> και </STYLE> Όλο αυτό το τμήμα θα πρέπει να περιλαμβάνεται μεταξύ των κωδικών <HEAD> και </HEAD> του αρχείου html. Στο δεύτερο τρόπο, δημιουργούμε ένα ξεχωριστό αρχείο με τις κατάλληλες εντολές, το οποίο και καλείται από τα αρχεία html.
Μια σύντομη εισαγωγή (3/14) Ξεκινούμε από την πρώτη περίπτωση. Ο γενικός κανόνας είναι η δήλωση του κωδικού, για παράδειγμα <P>, <UL>, <H1> κ.λπ., που ακολουθείται από τα ορίσματα που θέλουμε να επιβάλλουμε στον συγκεκριμένο κωδικό. Τα τελευταία αυτά πρέπει να βρίσκονται μέσα σε { }. Βέβαια, έχουμε και εισαγωγή νέας ονοματολογίας σε γνωστούς κωδικούς που δίνουν μεγαλύτερη ευχέρεια στη μορφοποίηση (π.χ. το όρισμα border του κωδικού <td> μπορεί να αναχθεί σε border-left-width, border-right-width κτλ. επιτρέποντας να ορίσουμε διαφορετικό πάχος για κάθε πλευρά του κελιού).
Μια σύντομη εισαγωγή (4/14) Ας αρχίσουμε με ένα απλό παράδειγμα. Θέλουμε οι επικεφαλίδες H1 να γράφονται με πλάγια γράμματα (italics), επιπλέον του ότι ορίζει ήδη ο κωδικός <H1>. Γράφουμε: <HEAD>... <STYLE TYPE="TEXT/CSS"> H1 {font-style:italic}... </style>... </HEAD>
Μια σύντομη εισαγωγή (5/14) Μπορούμε να ορίσουμε περισσότερα από ένα ορίσματα για τον κωδικό <H1>. Τα ορίσματα χωρίζονται με το σύμβολο;. Για παράδειγμα, θα μπορούσαμε να γράφαμε: H1 {font-style:italic; text-align: center; color: red; font-size: 12pt} οπότε οι επικεφαλίδες H1 θα γράφονται κεντραρισμένες, με κόκκινα γράμματα και με μέγεθος γραμμάτων 12pt. Έχουμε, όμως, ακόμα μεγαλύτερες δυνατότητες: μπορούμε να εφαρμόσουμε τα νέα ορίσματα σε ορισμένες περιπτώσεις.
Μια σύντομη εισαγωγή (6/14) Συνεχίζοντας το παραπάνω παράδειγμα, γράφουμε: H1.myh1 {font-style:italic; text-align: center; color: red; font-size: 12pt} Σ' αυτή την περίπτωση, χρησιμοποιώντας τον κωδικό <H1> θα έχουμε τον κλασικό τρόπο γραφής της επικεφαλίδας.
Μια σύντομη εισαγωγή (7/14) Αν όμως γράψουμε: <H1 class="myh1">... </H1> τότε θα εφαρμοσθούν όλα τα ορίσματα της κλάσης myh1 που ορίσαμε. Μπορούμε ακόμα να ορίσουμε δικές μας ανεξάρτητες κλάσεις.
Μια σύντομη εισαγωγή (8/14) Έτσι, αν γράψουμε (πάντα μεταξύ των <STYLE TYPE="TEXT/CSS"> και </STYLE>):.mycolor {color:red} (προσέξτε την τελεία που χρησιμοποιείται στην αρχή ορισμού της κλάσης) Τότε, αν γράψουμε: <H1 class="mycolor">... </H1> η συγκεκριμένη επικεφαλίδα θα είναι με κόκκινα γράμματα.
Μια σύντομη εισαγωγή (9/14) Αλλά ακόμα γράφοντας: <p class="mycolor">... η συγκεκριμένη παράγραφος θα είναι με κόκκινα γράμματα. Οι δυνατότητες που παρουσιάζουν τα css είναι πράγματι πολλές. Θα αναφέρουμε εδώ μόνο ορισμένες που θεωρούμε πολύ χρήσιμες. Αν θέλουμε να καθορίσουμε τα ίδια ορίσματα σε δύο κωδικούς, απλά χωρίζουμε τους κωδικούς με κόμμα (,): H1,I {color:red} οπότε όλες οι επικεφαλίδες H1 και τα πλάγια γράμματα (italic) θα γράφονται με κόκκινα γράμματα.
Μια σύντομη εισαγωγή (10/14) Μπορούμε να προσδιορίσουμε πλήρως που ακριβώς θέλουμε να εφαρμοστεί μια επιλογή μας. Γράφοντας: ol ul {text-decoration:underline} όλα τα στοιχεία μιας λίστας <UL> που είναι με τη σειρά της υπολίστα μιας άλλης λίστας <OL> παρουσιάζονται υπογραμμισμένα.
Μια σύντομη εισαγωγή (11/14) Αν δεν μας αρέσει η υπογράμμιση και το μπλε χρώμα ως ένδειξη συνδέσμου (link) μπορούμε να το αλλάξουμε (και μάλιστα επιλεκτικά): a.mydec {colour:red; text-decoration:none; font-style:italic} τότε η εντολή <a href="...">...<a> θα δείχνει το σύνδεσμο ως συνήθως (μπλε και υπογραμμισμένο), ενώ η <a class="mydec" href="...">...<a> θα δείχνει το σύνδεσμο κόκκινο, δίχως υπογράμμιση και σε italic.
Μια σύντομη εισαγωγή (12/14) Όπως αναφέρθηκε στην αρχή μπορούμε να δηλώσουμε όλες τις εντολές css σε ξεχωριστό αρχείο το οποίο καλείται από το αρχείο html. Σ' αυτήν την περίπτωση, στο αρχείο html εισάγουμε, πάλι μεταξύ <HEAD> και </HEAD>, την εντολή: <LINK REL="stylesheet" TYPE="TEXT/CSS" href="filename.css"> όπου τώρα το αρχείο filename.css περιέχει απλά τις εντολές, με την ίδια μορφή που έχουν όταν ενσωματώνονται στο html αρχείο.
Μια σύντομη εισαγωγή (13/14) Παρακάτω δίνεται μια σειρά κωδικών και ορισμάτων: 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 ή τα άλλα βασικά χρώματα ή τη δεκαεξαδική μορφή του χρώματος
Μια σύντομη εισαγωγή (14/14) Μπορεί να υπάρχει συνδυασμός δήλωσης ενσωματωμένου css και σύνδεση με εξωτερικό αρχείο css αρχείου. Σ' αυτή την περίπτωση υπερισχύουν οι ενσωματωμένες δηλώσεις. Επίσης, αν σε οποιοδήποτε σημείο του αρχείου html δοθεί κάποιο όρισμα σε κάποιο κωδικό, υπερισχύει όλων των άλλων ορισμάτων. Για παράδειγμα, αν μια παράγραφος ξεκινά με <p align="right"> θα υπερισχύσει, στην συγκεκριμένη παράγραφο, οποιουδήποτε άλλου ορίσματος εμφανίζεται σε εξωτερικό αρχείο css ή σε ενσωματωμένες εντολές css. Επίσης, Πολύ συχνά χρησιμοποιούνται ενσωματωμένα css ως επέκταση η ιδιαιτεροποίηση του γενικού θέματος (εξωτερικό αρχείο) για συγκεκριμένες σελίδες του δικτυακού τόπου.
Άσκηση 7: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζεται η παρακάτω σελίδα. Χρησιμοποιήστε ενσωματωμένες εντολές css πρώτα και μετά εξωτερικό αρχείο css:
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα Ε.Μ.Π.» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικού πόρους.