Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS

Transcript

1 Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας γραμμής κειμένου normal number (px) max-height max-width Ορίζει το μέγιστο ύψος ενός στοιχείου Ορίζει το μέγιστο πλάτος ενός στοιχείου none (px) none min-height Ορίζει το ελάχιστο ύψος ενός στοιχείου (px) min-width Ορίζει το ελάχιστο πλάτος ενός στοιχείου width Ορίζει το πλάτος ενός στοιχείου none (px) CSS Ιδιότητες Μορφοποίησης Λιστών list-style Συντομογραφία ιδιότητας για τον ορισμό ιδιοτήτων μιας λίστας list-style-type list-style-image Θέτει μια εικόνα ως το χαρακτηριστικό σημάδι στοιχείου λίστας none urli list-style-position Ορίζει το σημείο τοποθέτησης του χαρακτηριστικού σημαδιού στοιχείου λίστας list-style-position list-style-image Inside outside list-style-type Ορίζει τον τύπο του χαρακτηριστικού σημαδιού στοιχείου λίστας none disc circle square decimal decimal-leading-zero lower-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin CSS Ιδιότητες Μορφοποίησης Φόντου Στοιχείων background Συντομογραφία ιδιότητας για τον ορισμό ιδιοτήτων φόντου background-color background-image background-repeat background-attachment background-position background-attachment Ορίζει αν μια εικόνα φόντου είναι σταθερή ή κυλάει μαζί με την υπόλοιπη σελίδα Scroll fixed background-color Θέτει το χρώμα φόντου του στοιχείου στο οποίο εφαρμόζεται color-rgb color-hex color-name transparent

2 background-image Θέτει μια εικόνα ως φόντο url none background-position Ορίζει το σημείο αρχικής top τοποθέτησης μια εικόνας φόντου left top center top right center left center center center right bottom left bottom center bottom right x- y- x-pos y-pos background-repeat Ορίζει τον τρόπο επανάληψης μιας repeat εικόνας φόντου repeat-x repeat-y no-repeat CSS Ιδιότητες Μορφοποίησης Κειμένου COLOR Θέτει το χρώμα ενός κειμένου color direction Ορίζει την κατεύθυνση ανάγνωσης του κειμένου ltr - Αριστερά προς δεξιά rlt -Δεξιά προς αριστερά letter-spacing Αυξάνει ή μειώνει την απόσταση ανάμεσα στους χαρακτήρες normal του κειμένου text-align Ορίζει την οριζόντια στοίχιση του κειμένου left right center justify text-decoration Ορίζει επιπλέον μορφοποιήσεις του κειμένου none underline overline line-through blink text-indent Δημιουργία εσοχής για την πρώτη γραμμή κειμένου στο εφαρμοζόμενο στοιχείο text-transform Επιβολή μορφοποίησης κειμένου σε πεζά ή κεφαλαία γράμματα none capitalize uppercase lowercase white-space word-spacing Ορίζει τον τρόπο χειρισμού των λευκών χαρακτήρων ενός κειμένου μέσα στο εφαρμοζόμενο στοιχείο Αύξηση ή μείωση της απόστασης ανάμεσα σε λέξεις ι normal pre nowrap normal CSS Ιδιότητες Μορφοποίησης Γραμματοσειράς font Συντομογραφία για τον ορισμό όλων των font-style ιδιοτήτων για τη γραμματοσειρά του κειμένου font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar font-family Λίστα προτεραιότητας ονομάτων οικογενειών γραμματοσειρών και/ή γενικά ονόματα οικογενειών family-name generic-family font-size Ορίζει το μέγεθος της γραμματοσειράς XX-small

3 font-size Ορίζει το μέγεθος της γραμματοσειράς X-small small medium large x-large xx-large smaller larger font-style Ορίζει το ύφος έκφρασης της γραμματοσειράς normal italic oblique font-variant Ορίζει την παραλλαγή μορφοποίησης της γραμματοσειράς normal small-caps font-weight Ορίζει το πάχος (βάρος) της γραμματοσειράς normal bold bolder lighter 100,200,300,400, , 700, 800, 900 CSS Ιδιότητες Μορφοποίησης Περιθωρίων margin Συντομογραφία για τον ορισμό όλων των ιδιοτήτων για τα περιθώρια του στοιχείου (Απόσταση από τα εξωτερικά τοιχώματα άλλων στοιχείων ή γονικού στοιχείου) margin-top margin-right margin-bottom margin-left margin-bottom margin-left margin-right margin-top Ορίζει το κάτω περιθώριο ενός στοιχείου από άλλα στοιχεία Ορίζει το αριστερό περιθώριο ενός στοιχείου από άλλα στοιχεία Ορίζει το δεξί περιθώριο ενός στοιχείου από άλλα στοιχεία Ορίζει το άνω περιθώριο ενός στοιχείου από άλλα στοιχεία auto auto auto auto Σημείωση: Αν ένα αντικείμενο της HTML, χρειάζεται να στοιχιστεί στο κέντρο του διαθέσιμου οριζόντιου χώρου, αυτό μπορεί να επιτευχθεί με τη χρήση της τιμής auto στις ιδιότητες margin-left και margin-right. CSS Ιδιότητες Μορφοποίησης Περιθωρίων Γεμίσματος padding Συντομογραφία για τον ορισμό όλων των padding-top ιδιοτήτων για τα περιθώρια γεμίσματος του padding-right στοιχείου (Απόσταση εσωτερικά padding-bottom τοποθετημένων στοιχείων-παιδιών από τα εσωτερικά τοιχώματα του padding-left στοιχείου) padding-bottom Ορίζει το κάτω περιθώριο γεμίσματος ενός auto στοιχείου padding-left Ορίζει το αριστερό περιθώριο auto γεμίσματος ενός στοιχείου padding-right Ορίζει το δεξί περιθώριο γεμίσματος ενός auto στοιχείου padding-top Ορίζει το άνω περιθώριο γεμίσματος ενός auto στοιχείου

4 CSS Ιδιότητες Μορφοποίησης Περιγραμμάτων border border-bottom Συντομογραφία για τον ορισμό όλων των ιδιοτήτων για τα περιγράμματα του στοιχείου Συντομογραφία για τον ορισμό όλων των ιδιοτήτων για το κάτω περίγραμμα του στοιχείου border-width border-style border-color border-bottom-width border-bottom-style border-bottom-color border-bottom-color Ορίζει το χρώμα του κάτω περιγράμματος border-color border-bottom-style Ορίζει το στυλ του κάτω περιγράμματος border-style border-bottom-width Ορίζει το πάχος του κάτω περιγράμματος border-width border-color Ορίζει το χρώμα και των τεσσάρων πλευρών περιγράμματος COLOR border-left Συντομογραφία για τον ορισμό όλων των ιδιοτήτων για το αριστερό περίγραμμα του στοιχείου border-left-width border-left-style border-left-color border-left-color Ορίζει το χρώμα του αριστερού περιγράμματος border-color border-left-style Ορίζει το στυλ του αριστερού περιγράμματος border-style border-left-width Ορίζει το πάχος του αριστερού περιγράμματος border-width border-right Συντομογραφία για τον ορισμό όλων των ιδιοτήτων για το δεξί περίγραμμα του στοιχείου border-right-width border-right-style border-right-color border-right-color Ορίζει το χρώμα του δεξιού περιγράμματος border-color border-right-style Ορίζει το στυλ του δεξιού περιγράμματος border-style border-right-width Ορίζει το πάχος του δεξιού περιγράμματος border-width border-style Ορίζει το στυλ περιγράμματος των τεσσάρων πλευρών του στοιχείου none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-top Συντομογραφία για τον ορισμό όλων των ιδιοτήτων για το άνω περίγραμμα του στοιχείου border-right-width border-right-style border-right-color border-top-color Ορίζει το χρώμα του άνω περιγράμματος border-color border-top-style Ορίζει το στυλ του άνω περιγράμματος border-style border-top-width Ορίζει το πάχος του άνω περιγράμματος border-width border-width Ορίζει το πάχος περιγράμματος των τεσσάρων πλευρών του στοιχείου thin medium hick

5 CSS Ιδιότητες Κατηγοριοποίησης Στοιχείων clear Ορίζει τις πλευρές ενός στοιχείου όπου άλλα μεταβλητά στοιχεία δεν επιτρέπονται left right both none cursor Ορίζει τον τύπο του δείκτη ποντικιού για το στοιχείο url auto crosshair default pointer move (e/ne/nw/n)-resize (se/sw/s/w)-resize text wait help display Ορίζει το πώς και αν θα εμφανίζεται ένα στοιχείο none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption float Ορίζει που 9α εμφανίζεται μια εικόνα ή ένα κείμενο μέσα σε ένα άλλο στοιχείο left right none position Τοποθετεί ένα στοιχείο σε στατική, σχετική, static απόλυτη ή αμετάβλητη θέση relative absolute visibility Ορίζει αν ένα στοιχείο είναι ορατό ή αόρατο fixed visible hidden collapse

6 ΕΙΔΙΚΕΣ ΜΟΡΦΟΠΟΙΗΣΕΙΣ Επιπρόσθετα των ήδη αναφερθέντων μορφοποιήσεων, υπάρχουν δυνατότητες οι οποίες έχουν ειδική χρήση από τις διάφορες ιστοσελίδες. Οι ειδικές αυτές μορφοποιήσεις αναλύονται στην ενότητα αυτή. Ορισμός Διαφάνειας Σε αρκετά στοιχεία-αντικείμενα της HTML μπορεί να εφαρμοστεί ένα ειδικό οπτικό εφέ, αυτό της διαφάνειας. Οτιδήποτε βρίσκεται κάτω από το αντικείμενο στο οποίο εφαρμόζεται το εφέ της διαφάνειας, εμφανίζεται ως μέρος του αντικειμένου, ενώ το ίδιο το αντικείμενο χάνει τη συνοχή του και φαίνεται ξεθωριασμένο. Στο παράδειγμα που ακολουθεί δεν υπάρχει κάποιο άλλο αντικείμενο ή χρώμα κάτω από την εικόνα. Η τιμή 100 υποδεικνύει πλήρη αδιαφάνεια, δηλαδή το αντικείμενο θα εμφανίζεται συμπαγές. Η τιμή 50 ορίζει ένα ημιδιαφανές αντικείμενο. Στον κώδικα CSS, η αδιαφάνεια (ορ&οΐίγ) ενός αντικειμένου ορίζεται με την ακόλουθη ιδιότητα. Η τιμή της ιδιότητας μορφοποίησης ορ&οΐίγ βρίσκεται εντός της αριθμητικής περιοχής 0.0 (πλήρη διαφάνεια) έως 1.0 (πλήρη αδιαφάνεια). opacity:0.6 Δυστυχώς, ο Internet Explorer της Microsoft δεν υποστηρίζει την παραπάνω σύνταξη, η οποία χρησιμοποιείται από την έκδοση CSS3 που βρίσκεται υπό διαδικασία προτυποποίησης. Αντίθετα, ο Internet Explorer χρησιμοποιεί την ακόλουθη σύνταξη, στην οποία η τιμή της ιδιότητας ορ&οΐίγ βρίσκεται εντός της αριθμητικής περιοχής 0 (πλήρη διαφάνεια) έως 100 (πλήρη αδιαφάνεια). filter: alpha(opacity=60) Για λόγους συμβατότητας ανάμεσα στους διαφορετικούς Web Browsers, προτείνεται η ταυτόχρονη δήλωση και των δύο παραπάνω τρόπων σύνταξης αυτής της ιδιότητας μορφοποίησης. Παράδειγμα των παραπάνω εμφανίζεται στον ακόλουθο κώδικα.

7 Ψευδοστοιχεία Άλλη μια περίπτωση ειδικών μορφοποιήσεων είναι τα ψευδοστοιχεία (Pseudo-elements). Αυτά αποτελούν προγραμματιστικά ψευδοαντικείμενα, τα οποία καλούνται να αναγνωρίσει ο Web Browsers και να μορφοποιήσει κατάλληλα. Η γενική σύνταξη μορφοποίησης των ψευδοστοιχείων φαίνεται στη συνέχεια. css_selector:pseudo-element{property:value} Η παραπάνω γενική σύνταξη μπορεί να επεκταθεί κατάλληλα, έτσι ώστε να αναφέρεται σε κλάση ενός επιλογέα, όπως εμφανίζεται στη συνέχεια. css_selector.class:pseudo-element{property:value} Το Ψευδοστοιχείο first-letter To ψευδοστοιχείο first-letter, χρησιμοποιείται για τη μορφοποίηση του πρώτου χαρακτήρα κειμένου του επιλογέα. Συνηθέστερα, χρησιμοποιείται για τη δημιουργία εφέ αρχιγράμματος, σε παραγράφους ενός κειμένου. Σχετικό παράδειγμα εμφανίζεται στη συνέχεια. Το οπτικό αποτέλεσμα του παραδείγματος εμφανίζεται παρακάτω.

8 Το Ψευδοστοιχείο first-line To ψευδοστοιχείο first-line χρησιμοποιείται για τη μορφοποίηση της αρχικής γραμμής του κειμένου του επιλογέα. Χαρακτηριστικό που θα πρέπει να λαμβάνει υπόψη του ο σχεδιαστής του εγγράφου είναι ότι ο όρος "αρχική γραμμή" αναφέρεται σε αυτό που θα εμφανίσει ως αρχική γραμμή ο Web Browser και όχι αναγκαστικά αυτό που ο ίδιος πιστεύει. Αν η τροποποίηση του παραθύρου του Web Browser αναγκάσει την αναδίπλωση του κειμένου (στο οποίο εφαρμόζεται το ψευδοστοιχείο) σε διαφορετικό από το επιθυμητό σημείο, η αρχική γραμμή αυτού θα αλλάξει. Ακολουθεί παράδειγμα χρήσης του ψευδοστοιχείου first-line.

9 Το οπτικό αποτέλεσμα του παραπάνω κώδικα είναι το ακόλουθο. Ψευδοκλάσεις Οι ψευδοκλάσεις έχουν αντίστοιχη συμπεριφορά με τα ψευδοστοιχεία. Η διαφορά τους εντοπίζεται στο γεγονός ότι οι ψευδοκλάσεις αναφέρονται σε ειδικές προγραμματιστικές καταστάσεις των στοιχείων στα οποία εφαρμόζονται, αντί να δημιουργούν εικονικά στοιχεία. Η γενική σύνταξη μορφοποίησης των ψευδοκλάσεων φαίνεται στη συνέχεια. css_selector:pseudo-class{property:value} Η παραπάνω γενική σύνταξη μπορεί να επεκταθεί ώστε να αναφέρεται σε κλάση ενός επιλογέα, όπως εμφανίζεται στη συνέχεια. css_selector.class:pseudo-class {property:value} Οι πιο σημαντικές και συχνά χρησιμοποιούμενες ψευδοκλάσεις αναλύονται στη συνέχεια της υποενότητας. Παρότι υπάρχουν και άλλες ψευδοκλάσεις, αυτές δεν χρησιμοποιούνται τόσο συχνά λόγω της αμφισβητούμενης χρησιμότητας τους και της ελλιπούς υποστήριξης από κάποιους Web Browser. Οι παρακάτω ψευδοκλάσεις χρησιμοποιούνται για τον καθορισμό των ειδικών μορφοποιήσεων που θα λαμβάνουν οι υπερσύνδεσμοι ενός εγγράφου HTML (ετικέτα a) όταν ενεργοποιείται κάποιο συγκεκριμένο γεγονός (event). Η δήλωση τους στον κώδικα CSS θα πρέπει να γίνεται πάντα με τη σειρά που αυτά εμφανίζονται στη σελίδα αυτή και στο σχετικό παράδειγμα. Η Ψευδοκλάση link Η ψευδοκλάση link, καθορίζει τη μορφοποίηση ενός υπερσυνδέσμου, όταν ο αναγνώστης του εγγράφου HTML δεν τον έχει ακόμα επισκεφθεί. Η Ψευδοκλάση visited Η ψευδοκλάση visited, καθορίζει τη μορφοποίηση ενός υπερσυνδέσμου, όταν ο αναγνώστης του εγγράφου HTML τον έχει επισκεφθεί στο πρόσφατο παρελθόν. Η Ψευδοκλάση hover Η ψευδοκλάση hover, καθορίζει τη μορφοποίηση ενός υπερσυνδέσμου, όταν ο αναγνώστης του εγγράφου HTML τοποθετεί το ποντίκι του πάνω από αυτόν.

10 Η Ψευδοκλάση active Η ψευδοκλάση active, καθορίζει τη μορφοποίηση ενός υπερσυνδέσμου, όταν ο αναγνώστης του εγγράφου HTML επιλέγει τον υπερσύνδεσμο αλλά δεν έχει ακόμα μεταβεί σε αυτόν, π.χ. όταν πατάει επάνω του με το ποντίκι αλλά δεν αφήνει το πλήκτρο. Ακολουθεί παράδειγμα χρήσης των παραπάνω ψευδοκλάσεων. Καθώς το οπτικό αποτέλεσμα είναι δυναμικό, αυτό δεν μπορεί να αποτυπωθεί στο χαρτί και ο αναγνώστης θα πρέπει να δοκιμάσει ο ίδιος το παράδειγμα, προκειμένου να επιβεβαιώσει τα σχόλια του κώδικα CSS.