CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες σχετικές µε παρουσιάσεις σε οθόνη. CSS2, Μάιος 1998 συµπεριλαµβάνει τις ιδιότητες του CSS1 και προσθέτει άλλες 70 νέες, οι οποίες καθορίζουν ηχητικές παρουσιάσεις και σελιδοποίηση (page breaks). Παραποµπές: http://www.w3.org/style/css/ http://www.w3.org/tr/rec-css1 http://www.w3.org/tr/rec-css2 2 1
CASCADING STYLE-SHEETS Τα CSS µπορούν να χρησιµοποιηθούν µε φυλλοµετρητές οι οποίοι υποστηρίζουν CSS, όπως π.χ. o Microsoft IE4, o Netscape Navigator 4, o Opera 3.5. Ο αριθµός των φυλλοµετρητών που υποστηρίζουν CSS αυξάνει συνεχώς. 3 Αρχές CSS Η εµφάνιση-στοιχειοθεσία ενός αρχείου HTML µπορεί να καθορισθεί από διάφορους παράγοντες, όπως: Οι προτιµήσεις του σχεδιαστή της σελίδας. Οι γενικές κατευθύνσεις τις οποίες ο σχεδιαστής έπρεπε να ακολουθήσει. Οι προτιµήσεις του χρήστη και οι περιορισµοί της συσκευής στην οποία θα εµφανιστεί το αρχείο. Συνεπώς είναι πολύ συχνή η ανάγκη συνδυασµού πολλαπλών οδηγών Εµφάνισης (style sheets), εξ ου και χρήση του όρου Cascading Style Sheets. 4 2
ιαχωρισµός Περιεχοµένου από Εµφάνιση Custom document type CSS style sheet WWW Custom document HTML document presentation 5 Στοιχειοθεσία µε πολλαπλούς Οδηγούς Εµφάνισης Custom document type Custom document CSS doctype style sheet CSS document style sheet HTML document WWW presentation HTML Browser 6 3
ιασύνδεση HTML µε CSS Με χρήση του στοιχείου <STYLE> και ενσωµάτωση των οδηγιών εµφάνισης στο αρχείο περιεχοµένου. Με χρήση του στοιχείου <LINK> και παραποµπή προς αρχείο οδηγιών εµφάνισης, µε καθορισµό του URL του. Με συνδυασµό των δύο εκδοχών. 7 Τι είναι το CSS; Σύνολο από κανόνες οι οποίοι εφαρµόζονται σε ένα αρχείο ΗΤΜL. Κάθε κανόνας αποτελείται από δύο µέρη: έναν επιλογέα (selector) και µια δήλωση (declaration). Π.χ.: P { color: green} Στο παράδειγµά µας, ο επιλογέας είναι το P (η οδηγία αφορά στην εµφάνιση των παραγράφων) και η δήλωση το color: green. Η δήλωση αρχικοποιεί µια ιδιότητα (property) σε κάποια τιµή (value). Υπάρχει η δυνατότητα χρήσης δηλώσεων που καθορίζουν πολλαπλές αρχικοποιήσεις, οι οποίες διακρίνονται µεταξύ τους µε ;. Π.χ.: Η1 { color: green; text-align: center } 8 4
Κληρονοµικότητα στα CSS Η ιεραρχικότητα που υπάρχει στα αρχεία ΗΤΜL, αξιοποιείται από τα CSS. Με την ιεραρχικότητα, επιτυγχάνεται η κληρονόµηση ιδιοτήτων εµφάνισης από στοιχεία ΗΤΜL πιό ψηλά στην ιεραρχία σε στοιχεία χαµηλότερα. Υπάρχει φυσικά η δυνατότητα αναίρεσης επιλογών που έχουν γίνει σε πιό ψηλά σηµεία της ιεραρχίας. <ΗΤΜL> color: green <BODY> <UL> color: blue <LI> 9 Που δεν ισχύει η κληρονοµικότητα Ορισµένες ιδιότητες δεν κληρονοµούνται από στοιχεία HTML που βρίσκονται πιό ψηλά στην ιεραρχία, σε στοιχεία που βρίσκονται πιο χαµηλά. Π.χ., η ιδιότητα background δεν κληρονοµείται στα στοιχεία που ανήκουν στο στοιχείο BODY. <STYLE TYPE= text/css > BODY { background: url(texture.gif) white; color: black; } </STYLE> 10 5
Επιλογείς των CSS Είναι ο µηχανισµός που επιτρέπει τον προσδιορισµό της εµφάνισης των στοιχείων µε βάση τον τύπο τους, τα κατηγορήµατά τους, τα συµφραζόµενα ενός στοιχείου ή εξωτερικές πληροφορίες για το στοιχείο. Σε κάθε περίπτωση, ο επιλογέας επιτρέπει τον περιορισµό του πεδίου ισχύος (scope) µιας δήλωσης CSS. Είδη επιλογέων: Type selectors Attribute selectors Contextual selectors External selectors 11 Επιλογείς τύπων Επιλέγουν ένα στοιχείο µε βάση τον τύπο του. Π.χ.: P { color : green } H1 { color : blue } H2 { color : blue } H3 { color : blue } H1, H2, H3 { color : blue } 12 6
Επιλογείς κατηγορηµάτων CLASS Η επιλογή στοιχείων µπορεί να γίνει µε βάση τις τιµές των κατηγορηµάτων CLASS και ID. Συνίσταται ο προσδιορισµός κλάσεων στοιχείων των αρχείων µιας εφαρµογής, πριν ξεκινήσει η συγγραφή της εφαρµογής. Η χρήση του κατηγορήµατος CLASS γίνεται για να µπορούν οι συγγραφείς εφαρµογών HTML να δηµιουργούν τις δικές τους λογικές κλάσεις στοιχείων, οι οποίες δεν περιορίζονται σε ένα συγκεκριµένο τύπο στοιχείου. Π.χ.:.IMPORTANT { color: red } 13 Επιλογείς κατηγορηµάτων ID Η χρήση του κατηγορήµατος ID σε συνδυασµό µε CSS γίνεται για τον µοναδικό προσδιορισµό της εµφάνισης ενός συγκεκριµένου στιγµιοτύπου ενός στοιχείου. Σηµειωτέον ότι δύο στιγµιότυπα του ίδιου στοιχείου δεν µπορούν να έχουν το ίδιο ID. Π.χ.: <P ID= COPYRIGHT >The copyright for. #COPYRIGHT { font-size: small } 14 7
Το κατηγόρηµα STYLE εν αποτελεί επιλογέα αλλά µπορεί να χρησιµοποιηθεί µε παρόµοια αποτελέσµατα, για να προσδιορίσει απευθείας την στοιχειοθέτηση συγκεκριµένου στοιχείου. Π.χ.: <P STYLE= font-style: italic >This text demonstrates Είναι προτιµότερη η σήµανση της εµφάνισης στοιχείων µε χρήση του κατηγορήµατος STYLE παρά µε χρήση ειδικών σηµαντήρων της ΗΤΜL (π.χ. BLOCKQUOTE). Ωστόσο, πρέπει να προτιµάται ο πιό ξεκάθαρος διαχωρισµός περιεχοµένου από στοιχειοθεσία µε χρήση των ενσωµατωµένων ή των εξωτερικών οδηγιών εµφάνισης. 15 Επιλογείς συµφραζοµένων Επιτρέπουν τον καθορισµό της εµφάνισης ενός στοιχείου από τα συµφραζόµενα της θέσης στην οποία αυτό τοποθετείται. Γι αυτό τον σκοπό, χρησιµοποιούµε συνδυασµούς απλών επιλογέων που προσδιορίζουν τα συµφραζόµενα (context) στα οποία εφαρµόζονται οι οδηγίες εµφάνισης που ακολουθούν. Π.χ.: LI P { margin-top: 0mm} -- όλα τα στοιχεία P που προκύπτουν στο περιεχόµενο ενός στοιχείου LI TABLE.SMALL P { font-size: smaller } όλες οι παράγραφοι που βρίσκονται µέσα σε ένα στοιχείο κλάσης τύπου SMALL, το οποίο είναι τµήµα ενός πίνακα Σηµ. Οι απλοί επιλογείς που εµφανίζονται στ αριστερά ενός επιλογέα συµφραζοµένων, πρέπει να βρίσκονται σε υψηλότερο επίπεδο της ιεραρχίας από αυτούς που βρίσκονται δεξιότερα. 16 8
Εξωτερικοί επιλογείς Σε ορισµένες περιπτώσεις είναι επιθυµητή η εµφάνιση περιεχοµένου µε βάση πληροφορίες εξωτερικές στο αντίστοιχο αρχείο HTML. To CSS1 ορίζει δύο τύπους εξωτερικών πληροφοριών: Ψευδοκλάσεις: ιδιότητα ενός στοιχείου η οποία χαρακτηρίζεται από την κατάσταση ενός υπερσυνδέσµου δηλ. αν έχει τύχει επιλογής από τον χρήστη ή όχι. Ψευδοστοιχεία: αφορούν σε τµήµατα του περιεχοµένου τα οποία δεν σηµαίνονται ρητώς από την HTML. Π.χ., το πρώτο γράµµα µιας παραγράφου, το οποίο αναλόγως του τύπου της παρουσίασης, µπορεί να τύχει διαφορετικής παρουσίασης. 17 Ψευδοκλάσεις Το CSS1 καθορίζει τρεις ψευδοκλάσεις, οι οποίες σχετίζεται µε τρεις δυνατές καταστάσεις στις οποίες µπορεί να βρεθεί ένας υπερσύνδεσµοςστοιχείο <A>. Οι ψευδοκλάσεις αυτές είναι: link: ο σύνδεσµος δεν έχει επιλεχθεί από τον χρήστη για το άνοιγµα κάποιου άλλου αρχείου. visited: ο σύνδεσµος έχει επιλεχθεί προηγουµένως (η πληροφορία αυτή διατηρείται στον φυλλοµετρητή). Μέσω της λέξης κλειδί visited, µπορούµε να καθορίσουµε την εµφάνιση επιλεγµένων αγκυρών. active: αφορά σε υπερσύνδεσµο την (σύντοµη) χρονική στιγµή που αυτός επιλέγεται από τον χρήστη. Π.χ.: A:LINK { color: green } A:ACTIVE { color: red } A:VISITED { color:blue } 18 9
Ψευδοστοιχεία Καθορίζονται από τµήµατα του περιεχοµένου τα οποία δεν επισηµαίνονται ρητά από υπάρχοντα στοιχεία ΗΤΜL: first-letter first-line Παράδειγµα: P.INITIAL:FIRST-LETTER { font-size: 200%; float: left } P.INITIAL:FIRST-LINE { text-transofrm: uppercase } Εξήγηση: η πρώτη παράγραφος ενός κεφαλαίου ή υποκεφαλαίου, η οποία σηµαίνεται ως ανήκουσα στην κλάση INITIAL, εµφανίζεται µε το πρώτο γράµµα της διπλάσιο από το υπόλοιπο κείµενο. Το γράµµα αυτό εµφανίζεται σε διαφορετική στοίχιση από τα υπόλοιπα. Η πρώτη γραµµή της παραγράφου αυτής εµφανίζεται µε κεφαλαία γράµµατα. 19 Νέα στοιχεία Για τον προσδιορισµό της εµφάνισης περιεχοµένου το οποίο δεν εντάσσεται σε συγκεκριµένα στοιχεία της HTML, µπορεί να χρησιµοποιηθούν τα κατηγορήµατα CLASS και ID σε συνδυασµό µε τα στοιχεία DIV και SPAN. Το στοιχείο DIV χρησιµοποιείται για τον καθορισµό της εµφάνισης block-level περιεχοµένου ενώ το SPAN για inline περιεχόµενο. Χωρίς τον ορισµό CLASS ή ID και τον συνδυασµό τους µε οδηγίες εµφάνισης, τα DIV και SPAN δεν επηρεάζουν την εµφάνιση περιεχοµένου ΗΤΜL. 20 10
Συνδυασµός επιλογέων Παραδείγµατα: P.INITIAL:FIRST-LETTER { font-size: 200%; float: left } P.INITIAL:FIRST-LETTER { font-size: 200%; float: left } TABLE P.INITIAL:FIRST-LETTER { font-weight: bold } 21 Μονάδες µέτρησης Χρωµάτων: 16 ονόµατα χρωµάτων Τριάδες RGB: Μήκους: Ποσοστά εκαδικοί αριθµοί εκαεξαδικοί αριθµοί Περιγραφή µήκους σε σχέση µε το µέγεθος της γραµµατοσειράς (em πλάτος M, ex ύψος x ) ή της οθόνης (px µέγεθος ενός εικονοστοιχείου). Απόλυτα µήκη: in, cm, mm, pt, pc 22 11
ηλώσεις γραµµατοσειρών στην CSS1 Πέντε οικογένειες γραµµατοσειρών (sans-serif, serif, κλπ) Αριθµός παραµέτρων για κάθε γραµµατοσειρά: style, variant, weight, size. font-family font-style font-variant font-weight font-size font 23 ηλώσεις χώρου στην CSS1 margin border Simple text exampleee Heeeeere Simple textt Exampeeeeele hereeee padding content 24 12
Συνήθεις χρήσεις του CSS Καθορισµός γραµµατοσειρών. Π.χ.: Η1 { font-size: 36pt; font-family: serif; font-style: italic; font-weight: bold; font-variant: normal; line-height: normal; } 25 Συνήθεις χρήσεις του CSS Καθορισµός περιθωρίων. Π.χ. (η µονάδα µέτρησης em αναφέρεται σε µέγεθος σχετικό µε αυτό της χρησιµοποιούµενης γραµµατοσειράς πλάτος του γράµµατος Μ ). BLOCKQUOTE { margin-top: 1em; margin-right: 0em; margin-bottom: 1em; margin-left: 0em; font-style: italic; } BLOCKQUOTE { margin: 1em 0em 0em 1em; font-style: italic; background: #EDB; padding: 0.5em } 26 13
Συνήθεις χρήσεις του CSS Υπερσύνδεσµοι. Π.χ.: Α:visited { text-decoration: none } A:link, A:visited { text-decoration: none } A:hover { background: cyan} (CSS2) 27 Επικαλύψεις (cascading) Σε ένα έγγραφο ΗΤΜL «εφαρµόζονται» περισσότερες της µιάς οδηγίας εµφάνισης. Ακόµη κι αν προσδιορίζεται ένας µόνο οδηγός εµφάνισης, ο οδηγός αυτός συνδυάζεται µε τον οδηγό του φυλλοµετρητή. ιαφορετικά ήδη οδηγιών: Οδηγίες Εµφάνισης Φυλλοµετρητή. Οδηγίες Εµφάνισης Χρήστη: καθορίζονται µε επιλογές του χρήστη πάνω στον φυλλοµετρητή και επικρατούν των default οδηγιών του φυλλοµετρητή. Οδηγίες Εµφάνισης Σχεδιαστή: καθορίζονται από τον σχεδιαστή µιας σελίδας και επικρατούν των προτιµήσεων του χρήστη. Πολλαπλές Οδηγίες Σχεδιαστή: προκύπτουν από την χρήση και συνδυασµό πολλών stylesheet. Π.χ.: <LINK REL= stylesheet HREF= special.css TYPE= text/css > <LINK REL= stylesheet HREF= common.css TYPE= text/css > H ΗΤΜL καθορίζει ότι η σειρά µε την οποία εµφανίζονται τα στοιχεία LINK είναι σηµαντική. Το πιο εξειδικευµένο stylesheet καθορίζεται πρώτο (special.css) και τα πιό γενικά stylesheet έπονται. 28 14
Επικαλύψεις (cascading) και συγκρούσεις Όταν ένας φυλλοµετρητής χρησιµοποιεί πολλαπλές οδηγίες εµφάνισης, για την παρουσίαση ενός στοιχείου αναζητεί στα stylesheets την κατάλληλη οδηγία για το συγκεκριµένο στοιχείο. Αν δεν βρεί κάτι τέτοιο, ανατρέχει στο δένδρο της κληρονοµικότητας για να βρεί τις απαιτούµενες οδηγίες. Πότε προκύπτουν συγκρούσεις; Όταν για το ίδιο στοιχείο συνυπάρχουν διαφορετικοί κανόνες εµφάνισης. 29 Επίλυση συγκρούσεων 1. Βρες όλους τους σχετικούς κανόνες που εφαρµόζονται σε κάποιο στοιχείο. 2. Ταξινόµησε τους κανόνες µε βάση το ρητά καθορισµένο βάρος τους (ένας κανόνας µπορεί να σηµατοδοτηθεί ως!important για να έχει προτεραιότητα. Εφόσον βρεθεί ένας (µόνο) τέτοιος κανόνας, η αναζήτησή µας σταµατάει εδώ. 3. Ταξινόµησε τους κανόνες µε βάση την καταγωγή τους: µεγαλύτερη προτεραιότητα δίνεται στους εξειδικευµένους κανόνες του σχεδιαστή. Μετά από αυτό το βήµα, αποµένουν µόνο κανόνες οι οποίοι ανήκουν στο ίδιο stylesheet. 4. Ταξινόµησε τους κανόνες µε βάση την εξειδίκευσή τους. Π.χ., ένας κανόνας για το P είναι πιό γενικός από τον κανόνα για το LI P. Ο βαθµός εξειδίκευσης είναι ανάλογος µε το πλήθος των κατηγορηµάτων ID, CLASS, και των ονοµάτων στοιχείων που εµπλέκονται στον επιλογέα. 5. Ταξινόµησε τους κανόνες µε βάση την σειρά ορισµού τους οι τελευταίοι στο stylesheet επικρατούν των πρώτων. 30 15
Προτεραιότητα επικαλυπτόµενων stylesheet Browser HTML Document <BODY> <UL> <LI> <HTML> <HEAD> <LINK REL= stylesheet HREF= > <LINK REL= stylesheet HREF= > <BODY> </HTML> Browser style-sheet <BODY> <BODY> <BODY> <UL> <UL> <UL> <LI> <LI> <LI> User style-sheet 1. designer style-sheet 2. designer style-sheet 31 16