Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής
Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari 5.1.7 Opera 39.0 2
Μονάδες μέτρησης mm (millimeters) cm (centimeters) in (inches): 1in = 2.54cm pt (points): 1pt = 1/72in pc (picas): 1pc = 12pt px (pixels): 1px = 1/96th of 1in em: 1em = 1 φορά το μέγεθος του font-size 3
Περιεχόμενα Χρώμα κειμένου ιδιότητα color Κατεύθυνση κειμένου ιδιότητα direction Κατεύθυνση κειμένου - ιδιότητα unicode-bidi Απόσταση χαρακτήρων ιδιότητα letter-spacing Ύψος γραμμών ιδιότητα line-height Οριζόντια στοίχιση κειμένου ιδιότητα text-align Επιπλέον μορφοποιήσεις κειμένου ιδιότητα text-decoration Εσοχή κειμένου ιδιότητα text-indent Σκίαση κειμένου ιδιότητα text-shadow Αλλαγή πεζών / κεφαλαίων ιδιότητα text-transform 4
Περιεχόμενα Κατακόρυφη στοίχιση ιδιότητα vertical-align Ρύθμιση κενών διαστημάτων κειμένου ιδιότητα white-space Ρύθμιση απόστασης ανάμεσα στις λέξεις ιδιότητα word-spacing 5
Χρώμα κειμένου Ιδιότητα "color" Η ιδιότητα color χρησιμοποιείται για να οριστεί το χρώμα του κειμένου. Σύνταξη: color: χρώμα initial inherit; Τιμές: χρώμα: όνομα_χρώματος ή κωδικός_χρώματος ή rgb(x,x,x). initial: Ορίζει στην ιδιότητα την προκαθορισμένη τιμή της. inherit: Κληρονομεί την ιδιότητα αυτή από το γονικό του στοιχείο. 6
Χρώμα κειμένου Ιδιότητα "color" p{color:red;} p{color:#ff0000;} p{color:rgb(255,0,0);} Το προεπιλεγμένο χρώμα κειμένου για τη σελίδα ορίζεται στο body selector. body{color: blue;} 7
Χρώμα κειμένου Ιδιότητα "color" <!DOCTYPE html> <html> <head> <title>δοκιμή</title> <meta charset="utf-8" /> <style type="text/css"> body{color: blue;} p{color: rgb(255,0,0);} </style> </head> <body> <h1>επικεφαλίδα 1</h1> <p>κείμενο παραγράφου.</p> </body> </html> 8
Χρώμα κειμένου Ιδιότητα "color" <style type="text/css"> body{color: blue;} p{color: initial;} </style> <style type="text/css"> body{color: blue;} p{color: inherit;} </style> 9
Κατεύθυνση κειμένου Ιδιότητα "direction" Η ιδιότητα direction ορίζει την κατεύθυνση ανάγνωσης του κειμένου. Σύνταξη: direction: ltr rtl initial inherit; Τιμές: ltr: Αριστερά προς δεξιά (left-to-right). rtl: Δεξιά προς αριστερά (right-to-left). <style type="text/css"> body{color: blue} p{color: red; direction: rtl;} </style> 10
Κατεύθυνση κειμένου Ιδιότητα "unicode-bidi" Η ιδιότητα unicode-bidi χρησιμοποιείται μαζί με την ιδιότητα direction για να ορίσει ή να επιστρέψει το κείμενο που θα πρέπει να παρακαμφθεί ώστε να υποστηρίζει πολλαπλές γλώσσες στο ίδιο έγγραφο. Σύνταξη: unicode-bidi: normal embed bidi-override intitial inherit; Τιμές: normal: Προεπιλογή. Δεν χρησιμοποιεί ένα επιπλέον επίπεδο ενσωμάτωσης. embed: Δημιουργεί ένα πρόσθετο επίπεδο της ενσωμάτωσης. bidi-override: Δημιουργεί ένα επιπλέον επίπεδο ενσωμάτωσης. Η αναδιάταξη εξαρτάται από την ιδιότητα "direction". 11
Κατεύθυνση κειμένου Ιδιότητα "unicode-bidi" <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css" > div.dir1 { direction: rtl; unicode-bidi: bidi-override; } </style> </head> <body> <div>1o ΕΠΑΛ Κατερίνης</div> <div class="dir1">1o ΕΠΑΛ Κατερίνης</div> </body> </html> 12
Απόσταση χαρακτήρων Ιδιότητα "letter-spacing" Η ιδιότητα letter-spacing αυξάνει ή μειώνει την απόσταση ανάμεσα στους χαρακτήρες του κειμένου. Σύνταξη: letter-spacing:normal μήκος; Τιμές: normal: Κανένα κενό μεταξύ των χαρακτήρων (default). μήκος: Τιμή σε px ή cm (θετική για επέκταση ή αρνητική για σύμπτυξη, π.χ. 5px, -5px, 1cm, -0.2cm). <style type="text/css"> body{color: blue; letter-spacing: -5px;} p{color: red; letter-spacing: 5px; } </style> 13
Ύψος γραμμών Ιδιότητα "line-height" Η ιδιότητα line-height καθορίζει το ύψος της γραμμής και παίρνει μόνο θετικές τιμές. Σύνταξη: line-height: normal τιμή μήκος initial inherit; Τιμές: normal: Κανονικό ύψος γραμμής (προεπιλογή). τιμή: Ένας αριθμός που θα πρέπει να πολλαπλασιαστεί με το τρέχον μέγεθος της γραμματοσειράς για να ρυθμίσετε το ύψος της γραμμής. μήκος: Ένα σταθερό ύψος γραμμής σε px, pt, cm, κ.λπ. ποσοστό(%): Ένα ύψος γραμμής σε ποσοστό του τρέχοντος μεγέθους γραμματοσειράς. 14
Ύψος γραμμών Ιδιότητα "line-height" <style type="text/css"> body{line-height: 150%;} p{line-height: 50px;} </style> </head> 15
Οριζόντια στοίχιση κειμένου Ιδιότητα "text-align" Η ιδιότητα text-align ορίζει την οριζόντια στοίχιση του κειμένου. Σύνταξη: text-align:left right center justify; Τιμές στοίχισης: left: αριστερή right: δεξιά center: κεντρική και justify: πλήρη. <style type="text/css"> body{color: blue; text-align: center;} p{color: red; text-align: right; } </style> 16
Επιπλέον μορφοποιήσεις κειμένου Ιδιότητα "text-decoration" Η ιδιότητα text-decoration ορίζει επιπλέον μορφοποιήσεις του κειμένου. Σύνταξη: text-decoration:none underline overline line-through initial inherit; Τιμές: none: καμία (default τιμή). underline: κάτω υπογράμμιση. overline: άνω υπογράμμιση. line-through: γραμμή στη μέση. 17
Επιπλέον μορφοποιήσεις κειμένου Ιδιότητα "text-decoration" <style type="text/css"> body{text-decoration: underline;} p{text-decoration: overline underline line-through;} </style> 18
Εσοχή κειμένου Ιδιότητα "text-indent" Η ιδιότητα text-indent ορίζει εσοχή για τη πρώτη γραμμή ενός κειμένου στο εφαρμοζόμενο στοιχείο. Τιμές που μπορεί να πάρει: μήκος (σε px, pt, cm, mm, em, κ.λπ. με default το 0) ή ποσοστό (%), initial και inherit. <style type="text/css"> p{ text-indent: 20px; } </style> 19
Σκίαση κειμένου Ιδιότητα "text-shadow" Η ιδιότητα text-shadow προσθέτει σκιά στο κείμενο και μπορεί να δεχτεί μια λίστα από τιμές διαχωρισμένες μεταξύ τους με κόμμα. Σύνταξη: text-shadow: h-shadow v-shadow blur-radius color none initial inherit; Τιμές: h-shadow: Απαιτείται. Η θέση της οριζόντιας σκιάς. Επιτρέπονται και αρνητικές τιμές. v-shadow: Απαιτείται. Η θέση της κατακόρυφης σκιάς. Επιτρέπονται και αρνητικές τιμές. blur-radius: Προαιρετική. Η ακτίνα θόλωσης. Η προεπιλεγμένη τιμή είναι 0. 20
Σκίαση κειμένου Ιδιότητα "text-shadow" Τιμές συνέχεια: color: Προαιρετικά. Το χρώμα της σκιάς. none: Προεπιλεγμένη τιμή. Καμία σκιά. <style type="text/css"> body{text-shadow: 4px 5px 20px #0000ff;} p{text-shadow: 6px 2px 4px #ff0000;} </style> 21
Σκίαση κειμένου Ιδιότητα "text-shadow" <style type="text/css"> body{text-shadow:4px 5px 20px #0000ff, 0 0 3px #ff0000;} p{text-shadow: 6px 2px 4px #ff0000, 2px 2px 4px #000000;} </style> 22
Αλλαγή πεζών / κεφαλαίων Ιδιότητα "text-transform" Η επιβολή μορφοποίησης κειμένου σε πεζά ή κεφαλαία γράμματα, ανεξάρτητα από το πως είναι γραμμένα στον πηγαίο κώδικα της σελίδας, γίνεται με την ιδιότητα text-transform. Σύνταξη: text-transform: none capitalize upercase lowercase initial inherit; Τιμές: none: Προεπιλογή. Καμία. capitalize: Γράμματα τίτλου (εμφανίζει το πρώτο γράμμα κάθε λέξης του κειμένου με κεφαλαία). uppercase: Εμφανίζει το κείμενο με κεφαλαία. lowercase: Εμφανίζει το κείμενο με πεζά. 23
Αλλαγή πεζών / κεφαλαίων Ιδιότητα "text-transform" <body> <p style="text-transform: uppercase;">1<sup>o</sup> επαλ Κατερίνης</p> <p style="text-transform: lowercase;">1<sup>o</sup> ΕΠΑΛ Κατερίνης</p> <p style="text-transform: capitalize;">1<sup>o</sup> επαλ κατερίνης</p> </body> 24
Κατακόρυφη στοίχιση Ιδιότητα "vertical-align" Η ιδιότητα vertical-align ορίζει την κατακόρυφη στοίχιση των στοιχείων της σελίδας. Σύνταξη: vertical-align: baseline length sub super top text-top middle bottom text-bottom initial inherit; Τιμές: baseline: Προεπιλογή. Ευθυγραμμίζει την αρχική τιμή του στοιχείου με τη γραμμή βάσης του γονικού στοιχείου. μήκος: Αυξάνει ή να χαμηλώνει ένα στοιχείο με το καθορισμένο μήκος. Επιτρέπονται και αρνητικές τιμές. ποσοστό (%): Αυξάνει ή να μειώνει ένα στοιχείο σε ένα ποσοστό της ιδιότητας "line-height". Επιτρέπονται και αρνητικές τιμές. sub: Στοιχίζει το στοιχείο σαν να ήταν δείκτης. 25
Κατακόρυφη στοίχιση Ιδιότητα "vertical-align" Τιμές συνέχεια: super: Ευθυγραμμίζει το στοιχείο σαν να ήταν εκθέτης. top: Η κορυφή του στοιχείου ευθυγραμμίζεται με την κορυφή του ψηλότερου στοιχείου επί της γραμμής. text-top: Η κορυφή του στοιχείου ευθυγραμμίζεται με την κορυφή της γραμματοσειράς του γονικού στοιχείου. middle: Το στοιχείο τοποθετείται στο μέσον του γονικού στοιχείου. bottom: Το κάτω μέρος του στοιχείου ευθυγραμμίζεται με το χαμηλότερο στοιχείο στη γραμμή. text-bottom: Το κάτω μέρος του στοιχείου ευθυγραμμίζεται με το κάτω μέρος της γραμματοσειράς του γονικού στοιχείου. 26
Κατακόρυφη στοίχιση Ιδιότητα "vertical-align" <!DOCTYPE html> <html> <head> <title>δοκιμή</title> <meta charset="utf-8" /> <style type="text/css"> span#va1{vertical-align: super;} span#va2{vertical-align: -5px;} </style> </head> <body> 1<span id="va1">ο</span> ΕΠΑΛ <span id="va2"> Κατερίνης</span> </body> </html> 27
Ρύθμιση κενών διαστημάτων κειμένου Ιδιότητα "white-space" Η ιδιότητα white-space ορίζει το τρόπο χειρισμού των λευκών χαρακτήρων ενός κειμένου μέσα στο εφαρμοζόμενο στοιχείο. Σύνταξη: white-space:normal nowrap pre pre-line pre-wrap initial inherit; Τιμές: normal: Προεπιλογή. Τα κενά διαστήματα αγνοούνται από το browser. nowrap: Το κείμενο δεν θα αλλάξει γραμμή ακόμη και αν υπερβεί το μήκος του χώρου που βρίσκεται, ενώ θα αλλάξει γραμμή μόνο όταν δει την ετικέτα <br/>. pre: Τα κενά διαστήματα εμφανίζονται όπως στο πηγαίο κώδικα, χωρίς ο browser να αγνοήσει κανένα από αυτά. 28
Ρύθμιση κενών διαστημάτων κειμένου Ιδιότητα "white-space" Τιμές συνέχεια: pre-line: Ακολουθίες από κενά θα συμπτυχθούν σε ένα κενό, ενώ το κείμενο θα αναδιπλώνεται όταν είναι απαραίτητο και στις αλλαγές γραμμής. pre-wrap: Το κενό διατηρείται από το browser, ενώ το κείμενο θα αναδιπλώνεται όταν είναι απαραίτητο και στις αλλαγές γραμμής. 29
Ρύθμιση κενών διαστημάτων κειμένου Ιδιότητα "white-space" <body> <p style="white-space: pre;">1<sup>o</sup> Ε Π Α Λ Κατερίνης</p> <p style="white-space: pre-line;">1<sup>o</sup> Ε Π Α Λ Κατερίνης</p> </body> 30
Ρύθμιση απόστασης ανάμεσα στις λέξεις Ιδιότητα "word-spacing" Η ιδιότητα word-spacing αυξάνει ή μειώνει την απόσταση ανάμεσα σε λέξεις. Σύνταξη: word-spacing :normal μήκος Τιμές: normal (default τιμή 0,25em), μήκος (τιμή σε px ή cm - θετική για επέκταση, αρνητική για σύμπτυξη, π.χ. 5px, -5px, 1cm, -0.2cm), initial και inherit. <body> <p style="word-spacing: 1cm;">1<sup>o</sup> ΕΠΑΛ Κατερίνης</p> </body> 31
Βιβλιογραφία W3schools.com (http://www.w3schools.com/css/css_text.asp) WLearn (http://www.wlearn.gr/index.php/css-88) Πίνακες ιδιοτήτων CSS2 (https://iekgalatsiou.files.wordpress.com) 32