CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font) Καθορίζουν τα χαρακτηριστικά της γραμματοσειράς του κειμένου των ιστοσελίδων (τύπο, στυλ, μέγεθος, πάχος, κ.λπ.)
CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font) Γενικές οικογένειες γραμματοσειρών (σύνολα παρόμοιων γραμματοσειρών) Serif (με ουρές) (π.χ. Times New Roman) Sans Serif (π.χ. Arial) (χωρίς ουρές) Monospace (π.χ. Courier) (όλα τα γράμματα έχουν το ίδιο πλάτος)
CSS – Cascading Style Sheets (Ιδιότητα font-family) Καθορίζει την οικογένεια και τον τύπο της γραμματοσειράς (π.χ. arial, courier, times και serif, sans-serif, monospace) Τιμή Περιγραφή τύπος γραμματοσειράς, όνομα οικογένειας λίστα τύπων γραμματοσειράς και ονομάτων οικογενειών, χωρισμένων με κόμμα
CSS – Cascading Style Sheets (Ιδιότητα font-family - παράδειγμα) <html> <head> <style type="text/css"> h1 {font-family: “Times New Roman”, Georgia, Serif} h2 {font-family: Arial, Verdana, “Sans Serif”} p {font-family: Courier, Monospace} </style> </head> <body> <h1>Επικεφαλίδα επιπέδου 1 (γραμματοσειρά με ουρές)</h1> <h2>Επικεφαλίδα επιπέδου 2 (γραμματοσειρά χωρίς ουρές)</h2> <p>Απλή παράγραφος (γραμματοσειρά ίδιους πλάτους)</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα font-style) Αυτή η ιδιότητα έχει τρεις τιμές: normal – κανονική εμφάνιση italic – πλάγιο κείμενο oblique – κείμενο παρόμοιο με το πλάγιο
CSS – Cascading Style Sheets (Ιδιότητα font-style - παράδειγμα) <html> <head> <style type="text/css"> p.nrml {font-style:normal} p.itlc {font-style:italic} p.oblq {font-style:oblique} </style> </head> <body> <p class="nrml">Αυτή η παράγραφος είναι κανονική.</p> <p class="itlc">Αυτή η παράγραφος είναι πλάγια.</p> <p class="oblq">Κι αυτή η παράγραφος είναι πλάγια.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα font-size) Απόλυτο μέγεθος Σχετικό μέγεθος (σε σχέση με το περιβάλλον στοιχείο)
CSS – Cascading Style Sheets (Ιδιότητα font-size – απόλυτο μέγεθος) Τιμή Περιγραφή Τιμή σε εικονοστοιχεία (pixel) Π.χ. 40px xx-small Έξτρα έξτρα μικρό μέγεθος x-small Έξτρα μικρό μέγεθος small Μικρό μέγεθος medium Μεσαίο μέγεθος large Μεγάλο μέγεθος x-large Έξτρα μεγάλο μέγεθος xx-large Έξτρα έξτρα μέγεθος smaller Μικρότερο μέγεθος από το γονικό στοιχείο larger Μεγαλύτερο μέγεθος από το γονικό στοιχείο
CSS – Cascading Style Sheets (Ιδιότητα font-size – σχετικό μέγεθος) Τιμή Περιγραφή Τιμή σε μονάδας μέτρησης em (1 em = 16 px) Τα 16 px είναι το προκαθορισμένο μέγεθος γραμμάτων των φυλλομετρητών) Π.χ. 40px Ποσοστό επί τοις % σε σχέση με το περιβάλλον (γονικό στοιχείο) Π.χ. 150%
CSS – Cascading Style Sheets (Ιδιότητα font-size – παράδειγμα 1o) <html> <head> <style> p.double {font-size:200%} p.half {font-size:1.5em} p.stndrd {font-size:16px} </style> </head> <body> <p class="double">Κείμενο δύο φορές μεγαλύτερο από το προκαθορισμένο μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body</p> <p class="half">Κείμενο μιάμιση φορά μεγαλύτερο από το προκαθορισμένο μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body</p> <p class="stndrd">Κείμενο ίσο με το ροκαθορισμένο μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα font-size – παράδειγμα 2o) <html> <head> <style> body {font-size:10px} p.double {font-size:200%} p.half {font-size:1.5em} p.stndrd {font-size:16px} </style> </head> <body> <p class="double">Κείμενο δύο φορές μεγαλύτερο από το (6px) του περιβάλλοντος (γονικού) στοιχείου body, δηλαδή 12px</p> <p class="half">Κείμενο μιάμιση φορά μεγαλύτερο από το μέγεθος (16px) του περιβάλλοντος (γονικού) στοιχείου body, δηλαδή 9px</p> <p class="stndrd">Κείμενο ίσο με το καθορισμένο μέγεθος (16px)</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα font-variant) Μετατρέπει τα γράμματα σε πεζοκεφαλαία Τιμή Περιγραφή normal Κανονικά γράμματα small-caps Πεζοκεφαλαία
CSS – Cascading Style Sheets (Ιδιότητα font-variant) <html> <head> <style type="text/css"> p.normal {font-variant:normal} p.small {font-variant:small-caps} </style> </head> <body> <p class="normal">Το όνομά μου είναι Γιώργος.</p> <p class="small">Το όνομά μου είναι Γιώργος.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα font-weight) Καθορίζει έντονους χαρακτήρες Τιμή Περιγραφή normal Κανονικοί χαρακτήρες (προκαθορισμένη τιμή) bold Έντονοι χαρακτήρες bolder Πιο έντονοι χαρακτήρες lighter Λιγότερο έντονοι χαρακτήρες 100, 200, …, 900 Διαβαθμίσεις (400 οι κανονικοί χαρακτήρες, 700 οι έντονοι χαρακτήρες)
CSS – Cascading Style Sheets (Ιδιότητα font) Καθορίζει όλες τις ιδιότητες γραμματοσειράς σε μία δήλωση Τιμή Περιγραφή τιμή ιδιότητας font-style Καθορίζει το στυλ των γραμμάτων (πλάγια ή κανονικά) τιμή ιδιότητας font-variant Καθορίζει αν οι χαρακτήρες θα είναι πεζοκεφαλαία τιμή ιδιότητας font-weight Καθορίζει αν οι χαρακτήρες θα είναι έντονοι τιμή ιδιότητας font-family Καθορίζει το είδος της γραμματοσειράς (π.χ. Arial, serif) ζευγάρι τιμών font-size/line-height Καθορίζει το μέγεθος γραμματοσειράς και το διάστιχο
CSS – Cascading Style Sheets (Ιδιότητα font – παράδειγμα) <html> <head> <style type="text/css"> p.ex1 {font:15px arial,sans-serif;} p.ex2 {font:italic bold 12px/30px Georgia, serif;} </style> </head> <body> <p class="ex1">Αυτή η παράγραφος έχει μέγεθος γραμμάτων ίσο με 15px και είδος γραμματοσειράς Arial.</p> <p class="ex2">Αυτή η παράγραφος έχει πλάγια και έντονα γράμματα, μέγεθος γραμματοσειράς ίσο με 12 εικονοστοιχεία, ύψος γραμμής (διάστιχο) 30 εικονοστοιχεία, και είδος γραμματοσειράς Georgia.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα font – άλλες τιμές) Καθορίζει όλες τις ιδιότητες γραμματοσειράς σε μία δήλωση Τιμή Περιγραφή caption Γραμματοσειρά που χρησιμοποιείται σε χειριστήρια με λεζάντα (π.χ. κουμπιά κ.λπ.) icon Γραμματοσειρά που χρησιμοποιείται σε εικονίδια ετικετών menu Γραμματοσειρά που χρησιμοποιείται σε πτυσσόμενα μενού message-box Γραμματοσειρά που χρησιμοποιείται σε πλαίσια διαλόγου small-caption Μικρότερου μεγέθους γραμματοσειρά που χρησιμοποιείται σε χειριστήρια με λεζάντα (π.χ. κουμπιά κ.λπ.) status-bar Γραμματοσειρά που χρησιμοποιείται στη γραμμή κατάστασης
CSS – Cascading Style Sheets (Ιδιότητα font – παράδειγμα) <html> <body> <p style="font:caption">Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε χειριστήρια με ετικέτες.</p> <p style="font:icon">Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε ετικέτες εικονιδίων.</p> <p style="font:menu">Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε πτυσσόμενα μενού.</p> <p style="font:message-box">Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε πλαίσια διαλόγου.</p> <p style="font:small-caption">Μικρότερου μεγέθους γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής σε χειριστήρια με ετικέτες.</p> <p style="font:status-bar">Η γραμματοσειρά που χρησιμοποιεί ο φυλλομετρητής στη γραμμή κατάστασης.</p> <p><b>Σημείωση:</b> Το αποτέλεσμα των τιμών της ιδιότητας font εξαρτάται από το φυλλομετρητή.</p> </body> </html>