CSS – Cascading Style Sheets (Ιδιότητες κειμένου - text) Καθορίζουν την εμφάνιση του κειμένου των ιστοσελίδων (χρώμα, διάστιχο, απόσταση χαρακτήρων, εσοχή, γραμματοσειρά, στοίχιση, κ.λπ.)
CSS – Cascading Style Sheets (Ιδιότητα color) Καθορίζει το χρώμα του κειμένου Τιμή Περιγραφή Χρώμα όνομα χρώματος (π.χ. red) τιμή rgb (π.χ. rgb(255,0,0)) δεκαεξαδική τιμή (π.χ. #ff0000)
CSS – Cascading Style Sheets (Ιδιότητα color - παράδειγμα εφαρμογής χρώματος σε κείμενο) <html> <head> <style type="text/css"> h1 {color: green} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>Επικεφαλίδα επιπέδου 1</h1> <h2>Επικεφαλίδα επιπέδου 2</h2> <p>Απλή παράγραφος</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα direction) Καθορίζει την κατεύθυνση του κειμένου Τιμή Περιγραφή ltr Από αριστερά προς τα δεξιά (εξορισμού τιμή) rtl Από δεξιά προς τα αριστερά
CSS – Cascading Style Sheets (Ιδιότητα direction) <html> <head> <style type="text/css"> h1 {direction: rtl} h2 {direction: ltr} </style> </head> <body> <h1>Επικεφαλίδα επιπέδου 1</h1> <h2>Επικεφαλίδα επιπέδου 2</h2> <p>Απλή παράγραφος</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα line-height) Καθορίζει την απόσταση μεταξύ των γραμμών του κειμένου Τιμή Περιγραφή normal Κανονική απόσταση (εξορισμού τιμή) αριθμός Η απόσταση καθορίζεται από το γινόμενο του αριθμού επί το μέγεθος της γραμματοσειράς τιμή Σταθερή απόσταση ίση με την τιμή σε pixel % Ποσοστό επί τοις εκατό του μεγέθους της γραμματοσειράς
CSS – Cascading Style Sheets (Ιδιότητα line-height – ποσοστό % του μεγέθους γραμματοσειράς) <html> <head> <style type="text/css"> p.small {line-height: 90%} p.big {line-height: 200%} </style> </head> <body> <p>Αυτή είναι μια παράγραφος με τυπικό διάστιχο. Το εξορισμού διάστιχο στους περισσότερους φυλλομετρητές είναι από 110% έως 120% του μεγέθους της γραμματοσειράς.</p> <p class="small">Αυτή είναι μια παράγραφος με μικρότερο διάστιχο, ίσο με το 90% του μεγέθους της γραμματοσειράς.</p> <p class="big">Αυτή είναι μια παράγραφος με μεγαλύτερο διάστιχο, ίσο με 200% της γραμματοσειράς.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα line-height – τιμή διάστιχου σε εικονοστοιχεία) <html> <head> <style type="text/css"> p.small {line-height: 10px} p.big {line-height: 30px} </style> </head> <body> <p>Αυτή είναι μια παράγραφος με τυπικό διάστιχο. Το εξορισμού διάστιχο στους περισσότερους φυλλομετρητές είναι περίπου 20 εικονοστοιχεία (pixel).</p> <p class="small">Αυτή είναι μια παράγραφος με μικρότερο διάστιχο, ίσο με το 10 εικονοστοιχεία (pixel).</p> <p class="big">Αυτή είναι μια παράγραφος με μεγαλύτερο διάστιχο, ίσο με 30 εικονοστοιχεία (pixel).</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα line-height – αριθμητικός συντελεστής διάστιχου) <html> <head> <style type="text/css"> p.small {line-height: 0.5} p.big {line-height: 2} </style> </head> <body> <p>Αυτή είναι μια παράγραφος με τυπικό διάστιχο. Το εξορισμού διάστιχο στους περισσότερους φυλλομετρητές υπολογίζεται περίπου με συντελεστή 1.</p> <p class="small">Αυτή είναι μια παράγραφος με μικρότερο διάστιχο, που υπολογίζεται με συντελεστή 0.5.</p> <p class="big">Αυτή είναι μια παράγραφος με μεγαλύτερο διάστιχο, που υπολογίζεται με συντελεστή 2.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα letter-spacing) Καθορίζει την απόσταση μεταξύ των γραμμάτων του κειμένου (δέχεται και αρνητικές τιμές) Τιμή Περιγραφή normal Κανονική απόσταση (εξορισμού τιμή) τιμή Σταθερή απόσταση ίση με την τιμή σε pixel ή σε εκατοστά
CSS – Cascading Style Sheets (Ιδιότητα letter-spacing) <html> <head> <style type="text/css"> h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} </style> </head> <body> <h1>Επικεφαλίδα επιπέδου 1</h1> <h4>Επικεφαλίδα επιπέδου 4</h4> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα text-align) Καθορίζει τη στοίχιση του στοιχείου html Τιμή Περιγραφή left Αριστερή στοίχιση right Δεξιά Στοίχιση center Στοίχιση στο κέντρο justify Πλήρης στοίχιση (ευθυγράμμιση με το δεξιό και το αριστερό περιθώριο)
CSS – Cascading Style Sheets (Ιδιότητα text-align) <html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} p {text-align: justify} </style> </head> <body> <h1>Επικεφαλίδα επιπέδου 1</h1> <h2>Επικεφαλίδα επιπέδου 2</h2> <h3>Επικεφαλίδα επιπέδου 3</h3> <p>Αυτή είναι μια παράγραφος με πλήρη στοίχιση. Το κείμενο ευθυγραμμίζεται και με το αριστερό και με το δεξιό περιθώριο. Μικρύνετε το παράθυρο του φυλλομετρητή ώστε η ευθυγράμμιση να φανεί καλύτερα.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα text-decoration) Χρησιμεύει στη «διακόσμηση» του κειμένου Τιμή Περιγραφή none Εξορισμού τιμή. Κανονικό κείμενο underline Υπογράμμιση overline Επιγράμμιση line-through Διαγράμιση blink Το κείμενο αναβοσβήνει (δεν λειτουργεί στον Internet Explorer)
CSS – Cascading Style Sheets (Ιδιότητα text-decoration) <html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} </style> </head> <body> <h1>Επικεφαλίδα επιπέδου 1</h1> <h2>Επικεφαλίδα επιπέδου 2</h2> <h3>Επικεφαλίδα επιπέδου 3</h3> <h4>Επικεφαλίδα επιπέδου 4</h4> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα text-indent) Δημιουργεί εσοχή πρώτης γραμμής στο κείμενο (δέχεται και αρνητικές τιμές για δημιουργία προεξοχής) Τιμή Περιγραφή τιμή Καθορίζει σταθερή εσοχή ίση με την τιμή σε εικονοστοιχεία ή εκατοστά % Εσοχή ίση με το ποσοστό % του πλάτους του γονικού στοιχείου
CSS – Cascading Style Sheets (Ιδιότητα text-indent) <html> <head> <style type="text/css"> p {text-indent: 1cm} </style> </head> <body> <p>Αυτή είναι μια παράγραφος κειμένου με εσοχή πρώτης γραμμής ίση με 1 εκατοστό. Μικρύνετε το παράθυρο του φυλλομετρητή για να φανεί καλύτερα η εσοχή.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα text-transform) Μετατρέπει τα γράμματα του κειμένου σε κεφαλαία ή μικρά Τιμή Περιγραφή none Εξορισμού τιμή. Κανονικό κείμενο. capitalize Τα πρώτα γράμματα όλων των λέξεων κεφαλαία uppercase Όλα τα γράμματα κεφαλαία lowercase Όλα τα γράμματα μικρά
CSS – Cascading Style Sheets (Ιδιότητα text-transform) <html> <head> <style type="text/css"> p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <p class="uppercase">Αυτό είναι το κείμενο μιας παραγράφου</p> <p class="lowercase"> Αυτό είναι το κείμενο μιας παραγράφου</p> <p class="capitalize"> Αυτό είναι το κείμενο μιας παραγράφου</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα white-space) Χειρίζεται τον κενό χώρο (διαστήματα και γραμμές) σε ένα στοιχείο html Τιμή Περιγραφή normal Εξορισμού τιμή. Ο κενός χώρος αγνοείται από το φυλλομετρητή. pre Ο κενός χώρος διατηρείται ως έχει. nowrap Το κείμενο δεν αναδιπλώνεται μέχρι να εντοπιστεί ετικέτα <br>
CSS – Cascading Style Sheets (Ιδιότητα white-space – παράδειγμα μη αναδίπλωσης κειμένου) <html> <head> <style type="text/css"> p {white-space: nowrap} </style> </head> <body> <p>Αυτή η παράγραφος κειμένου δεν αναδιπλώνεται ποτέ όσο κι αν μικρύνουμε το παράθυρο του φυλλομετρητή.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα white-space – παράδειγμα διατήρησης κενού χώρου) <html> <head> <style type="text/css"> p {white-space: pre} </style> </head> <body> <p>Αυτή η παράγραφος κειμένου διατηρεί τα κενά διαστήματα, τις αλλαγές γραμμών και τις κενές γραμμές.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα word-spacing) Μεταβάλλει την απόσταση μεταξύ των λέξεων (δέχεται και αρνητικές τιμές) Τιμή Περιγραφή normal Εξορισμού τιμή. Κανονική απόσταση μεταξύ των λέξεων. απόσταση Μια τιμή απόστασης σε εικονοστοιχεία ή εκατοστά.
CSS – Cascading Style Sheets (Ιδιότητα word-spacing) <html> <head> <style type="text/css"> p { word-spacing: 30px } </style> </head> <body> <p>Οι λέξεις αυτού του κειμένου απέχουν μεταξύ τους κατά 30 εικονοστοιχεία.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα text-shadow) Δημιουργεί σκιά στα γράμματα του κειμένου Δέχεται τρεις παραμέτρους: την οριζόντια μετατόπιση και την κατακόρυφη μετατόπιση, και το χρώμα της σκιάς π.χ. p {text-shadow: 0.1cm 0.1cm red}
CSS – Cascading Style Sheets (Ιδιότητα text-shadow) <html> <head> <style type="text/css"> p {text-shadow: 0.1cm 0.1cm red } </style> </head> <body> <p>Οι λέξεις αυτού του κειμένου έχουν κόκκινη σκιά.</p> </body> </html>
CSS – Cascading Style Sheets (Ιδιότητα vertical-align) Καθορίζει την κατακόρυφη στοίχιση ενός στοιχείου Τιμή Περιγραφή απόσταση Μετατόπιση κατά την καθοριζόμενη απόσταση (και αρνητικές τιμές) % Μετατόπιση κατά το καθοριζόμενο ποσοστό σε σχέση με την ιδιότητα line-height (και αρνητικές τιμές) baseline Στοίχιση της γραμμής βάσης του στοιχείου με τη γραμμή βάσης του γονικού στοιχείου (προεπιλεγμένη τιμή) sub Στοίχιση του στοιχείου σαν να ήταν δείκτης
CSS – Cascading Style Sheets (Ιδιότητα vertical-align) Τιμή Περιγραφή super Στοίχιση του στοιχείου σαν να ήταν εκθέτης top Το πάνω μέρος του στοιχείου στοιχίζεται με το πάνω μέρος του ψηλότερου στοιχείου της γραμμής text-top Το πάνω μέρος του στοιχείου στοιχίζεται με το πάνω μέρος της γραμματοσειράς του γονικού στοιχείου middle Το στοιχείο τοποθετείται στη μέση του γονικού στοιχείου bottom Το κάτω μέρος του στοιχείου στοιχίζεται με το χαμηλότερο στοχείο της γραμμής text-bottom Το κάτω μέρος του στοιχείου στοιχίζεται με το κάτω μέρος της γραμματοσειράς του γονικού στοιχείου
CSS – Cascading Style Sheets (Ιδιότητα vertical-align) <html> <head> <style type="text/css"> img.tp {vertical-align:top} img.mddl {vertical-align:middle} img.bttm {vertical-align:bottom} </style> </head> <body> <p>Μια <img class="tp" src="logo.gif" /> εικόνα μέσα σε παράγραφο με κατακόρυφη στοίχιση top.</p> <p>Μια <img class="mddl" src="logo.gif" /> εικόνα μέσα σε παράγραφο με κατακόρυφη στοίχιση middle.</p> <p>Μια <img class="bttm" src="logo.gif" /> εικόνα μέσα σε παράγραφο με κατακόρυφη στοίχιση bottom.</p> </body> </html>