Τα Διαδοχικά Φύλλα Στυλ CSS 22η Συνάντηση Εκπ/κών σε Θέματα Τ.Π.Ε. στη Δυτική Μακεδονία Στυλιάδης Κων/νος, Υπ. Κέντρου ΠΛΗ.ΝΕ.Τ. Ν. Φλώρινας, 15 Νοεμβρίου 2009
Τι Είναι τα CSS Τα Διαδοχικά Φύλλα Στυλ CSS (Cascading Style Sheets), ορίζουν τον τρόπο εμφάνισης των στοιχείων της HTML και αποθηκεύονται σε Φύλλα Στυλ (Style Sheets), που μπορεί να είναι και εξωτερικά αρχεία με επέκταση.css. Τα tags της HTML σχεδιάσθηκαν αρχικά για να ορίσουν το περιεχόμενο ενός εγγράφου. Η δουλειά τους ήταν να έλεγαν "Αυτή είναι μια επικεφαλίδα", "Αυτή είναι μια παράγραφος", "Αυτός είναι ένας πίνακας", χρησιμοποιώντας tags όπως <h1>, <p>, <table> κοκ.
Γιατί Δημιουργήθηκαν τα CSS Καθώς οι φυλλομετρητές συνέχιζαν να προσθέτουν νέα HTML tags και χαρακτηριστικά (attributes) στις αρχικές προδιαγραφές της HTML, γινόταν ολοένα και δυσκολότερη η δημιουργία ιστοσελίδων όπου το περιεχόμενο των εγγράφων HTML θα μπορούσε να ξεχωρίζει καθαρά από τη διάταξη παρουσίασης του εγγράφου. Για να λύσει αυτό το πρόβλημα, το World Wide Web Consortium (W3C) – το μη κερδοσκοπικό consortium ορισμού στάνταρτς που είναι υπεύθυνο για την στανταρτατοποίηση της HTML – δημιούργησε τα στυλ (styles) ως προσθήκη στην HTML 4.0.
Η Χρησιμότητα των CSS Τα εξωτερικά φύλλα στυλ (external style sheets) μάς δίνουν τη δυνατότητα να αλλάξουμε την εμφάνιση και τη διάταξη όλων των ιστοσελίδων ενός Web site, με μια απλή επεξεργασία ενός και μόνο CSS εγγράφου. Για παράδειγμα, αν έχουμε ποτέ προσπαθήσει να αλλάξουμε τη γραμματοσειρά (font) ή το χρώμα (color) όλων των επικεφαλίδων (headings) σ’ όλες τις ιστοσελίδες μας, τότε θα καταλάβουμε γιατί τα CSS μπορούν να μας γλυτώσουν από πολλή δουλειά.
Η Προτεραιότητα των Φύλλων Στυλ Φύλλα στυλ μπορούμε να έχουμε στα εξής σημεία : Σε εξωτερικό αρχείο με επέκταση .css (εξωτερικό φύλλο στυλ, external style sheet). Στα tags <style> και </style> μέσα στο τμήμα <head> μιας ιστοσελίδας (εσωτερικό φύλλο στυλ, internal style sheet). Μέσα στο ίδιο το HTML tag (inline style). Υπερισχύει πάντα το ειδικότερο του γενικότερου, δηλ. το inline style υπερισχύει του internal style sheet και αυτό του external style sheet.
Η Σύνταξη των CSS Ένα φύλλο στυλ αποτελείται από τρία μέρη : επιλογέα (selector), ιδιότητα (property) και τιμή (value) : επιλογέας { selector { ιδιότητα: τιμή property: value } } Ο επιλογέας είναι συνήθως το στοιχείο/tag που θέλουμε να ορίσουμε, η ιδιότητα είναι το χαρακτηριστικό που θέλουμε να αλλάξουμε και η κάθε ιδιότητα μπορεί να πάρει μια τιμή.
Η Σύνταξη των CSS – Παραδείγματα Η ιδιότητα και η τιμή ξεχωρίζουν με τον χαρακτήρα : και περικλείονται από τους χαρακτήρες { }, ως εξής : body {color: black} Αν η τιμή αποτελείται από πολλές λέξεις, πρέπει να τοποθετήσουμε εισαγωγικά : p {font-family: "sans serif"} Αν θέλουμε να καθορίσουμε περισσότερες από μία ιδιότητες, πρέπει να ξεχωρίσουμε την κάθε ιδιότητα με τον χαρακτήρα ;, ως εξής : p {text-align: center; color: red}
Η Ομαδοποίηση (Grouping) Μπορούμε να ομαδοποιήσουμε τους επιλογείς, ξεχωρίζοντας τον κάθε επιλογέα με κόμμα. Στο παρακάτω παράδειγμα έχουμε ομαδοποιήσει όλα τα στοιχεία επικεφαλίδας (h1 έως h6) και το κάθε στοιχείο επικεφαλίδας θα έχει χρώμα πράσινο : h1, h2, h3, h4, h5, h6 { color: green }
Το Χαρακτηριστικό Class – 1/2 Με το χαρακτηριστικό (attribute) class μπορούμε να ορίσουμε διαφορετικά στυλ για το ίδιο στοιχείο (element), όπως δύο είδη παραγράφων στο έγγραφό μας : μια δεξιά στοιχισμένη και μια κεντραρισμένη. p.right { text-align: right } p.center { text-align: center
Το Χαρακτηριστικό Class – 2/2 Μπορούμε να χρησιμοποιήσουμε το χαρακτηριστικό class σ’ ένα HTML έγγραφο, ως εξής : <p class="right"> Αυτή είναι μια παράγραφος </p> Το κείμενο αυτής της παραγράφου θα είναι δεξιά στοιχισμένο. <p class="center"> Αυτή είναι μια άλλη παράγραφος </p> Το κείμενο αυτής της παραγράφου θα είναι κεντραρισμένο.
Το Χαρακτηριστικό (Attribute) Id #right {text-align: right} Στο HTML έγγραφο πρέπει να γράψουμε τα εξής : <p id="right"> Αυτή είναι μια παράγραφος με κείμενο δεξιά στοιχισμένο. </p> <h3 id="right"> Αυτή είναι μια επικεφαλίδα, δεξιά στοιχισμένη. </h3> Το χαρακτηριστικό id πρέπει να έχει μια μοναδική τιμή στο έγγραφο.
Τα Σχόλια (Comments) στα CSS p { text-align: center; /* Αυτό είναι ένα ακόμη σχόλιο */ color: black; font-family: arial }
Παράδειγμα Συνδυασμού HTML και CSS Κώδικα – 1/2 Ένα HTML αρχείο χρησιμοποιεί το tag <link> για να συνδεθεί μ’ ένα εξωτερικό φύλλο στυλ, ως εξής : <html><head> <link rel="stylesheet" type="text/css" href="ex1.css"> </head><body> <h1> Αυτή η επικεφαλίδα έχει μέγεθος 36 pt </h1> <h2> Αυτή η επικεφαλίδα έχει χρώμα μπλε </h2> <p> Αυτή η παράγραφος έχει αριστερό περιθώριο (left margin) 50 pixels </p> </body> </html>
Παράδειγμα Συνδυασμού HTML και CSS Κώδικα – 2/2 Το αρχείο του εξωτερικού φύλλου στυλ, δηλ. το ex1.css, έχει το εξής περιεχόμενο : body { background-color: yellow } h1 { font-size: 36pt h2 { color: blue p { margin-left: 50px
Σύνδεση με Εξωτερικό Φύλλο Στυλ Ένα εξωτερικό φύλλο στυλ (external style sheet) είναι ιδανικό όταν το στυλ εφαρμόζεται σε πολλές ιστοσελίδες. Μ’ ένα εξωτερικό φύλλο στυλ μπορούμε να αλλάξουμε την εμφάνιση ενός ολόκληρου Web site αλλάζοντας ένα μόνο αρχείο. Η κάθε ιστοσελίδα πρέπει να περιέχει έναν δεσμό (link) προς το φύλλο στυλ μέσα στο τμήμα head, ως εξής : <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Τα Εξωτερικά Φύλλα Στυλ Ο φυλλομετρητής θα διαβάσει τους ορισμούς στυλ από το αρχείο mystyle.css και θα μορφοποιήσει το έγγραφο σύμφωνα μ’ αυτό το αρχείο. Ένα εξωτερικό φύλλο στυλ μπορεί να γραφεί σ’ έναν οποιονδήποτε text editor, δεν πρέπει να περιέχει καθόλου html tags και πρέπει να αποθηκευθεί με την επέκταση .css. Ένα παράδειγμα ενός αρχείου φύλλου στυλ είναι το εξής : hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
Τα Εσωτερικά Φύλλα Στυλ Ένα εσωτερικό φύλλο στυλ (internal style sheet) χρησιμοποιείται όταν ένα έγγραφο έχει ένα δικό του μοναδικό στυλ. Ορίζουμε τα εσωτερικά φύλλα στυλ στο τμήμα head με το tag <style>, ως εξής : <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("florina.gif")} </style> </head> Ο φυλλομετρητής θα διαβάσει τους ορισμούς των στυλ και θα μορφοποιήσει ανάλογα το έγγραφο.
Τα Inline Styles Για να χρησιμοποιήσουμε τα inline styles χρησιμοποιούμε το χαρακτηριστικό (attribute) style στο σχετικό tag. Το χαρακτηριστικό style μπορεί να περιέχει οποιαδήποτε ιδιότητα CSS. Το παρακάτω παράδειγμα δείχνει πώς μπορούμε να αλλάξουμε το χρώμα και το αριστερό περιθώριο μιας παραγράφου : <p style="color: sienna; margin-left: 20px"> Αυτή είναι μια παράγραφος </p>
Τα Πολλαπλά Φύλλα Στυλ Αν μερικές ιδιότητες έχουν ορισθεί για τον ίδιο επιλογέα (selector) σε διαφορετικά φύλλα στυλ, οι τιμές θα κληρονομηθούν από το γενικότερο φύλλο στυλ αλλά θα υπερισχύουν οι τιμές του ειδικότερου φύλλου στυλ. Για παράδειγμα, αν ένα εξωτερικό φύλλο στυλ είναι : h3 {color: red; text-align: left; font-size: 8pt} Και ένα εσωτερικό φύλλο στυλ είναι : h3 {text-align: right; font-size: 20pt} Αν η σελίδα με το εσωτερικό φύλλο στυλ συνδέεται επίσης στο εξωτερικό φύλλο στυλ, οι ιδιότητες του h3 θα είναι οι εξής : color: red; text-align: right; font-size: 20pt