Σημασιολογικός Ιστός (Semantic Web) - XML

Transcript

1 Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 8/11/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr

2 Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων XML Εμφάνιση εγγράφων XML με τη χρήση CSS

3 Φύλλα Επάλληλων Στυλ (CSS) To φύλλο επάλληλων στυλ είναι ένα αρχείο που περιέχει εντολές για τη μορφοποίηση του εγγράφου XML Στην XML o browser δεν έχει ενσωματωμένες πληροφορίες σχετικά με το πώς να εμφανίσει τα στοιχεία Ένας τρόπος εμφάνισης είναι ένα φύλλο επάλληλων στυλ και το προσαρτούμε στο έγγραφο Ένα έγγραφο XML με προσαρτημένο φύλλο επάλληλων στυλ ανοίγει κατευθείαν στον IE Η διατήρηση των εντολών εμφάνισης σε ένα φύλλο στυλ, δηλαδή σε ξεχωριστό σημείο και όχι στο ίδιο το έγγραφο ΧΜL, αυξάνει την ευελιξία του εγγράφου και κάνει πιο εύκολη τη συντήρησή του Προσαρμογή δεδομένων εμφάνισης εγγράφου ΧΜL σε πολλές και διαφορετικές περιστάσεις προσαρτώντας απλώς το κατάλληλο φύλλο στυλ χωρίς αλλαγή της δομής του ίδιου του εγγράφου

4 Φύλλα Επάλληλων Στυλ (CSS) Η πιο απλή μέθοδος για εμφάνιση εγγράφου XML ΟΜΩΣ έχει περιορισμένες δυνατότητες σε σύγκριση με άλλες μεθόδους εμφάνισης XML Το CSS παρέχει αρκετά υψηλό ποσοστό ελέγχου του τρόπου με τον οποίο ο browser μορφοποιεί το περιεχόμενο των στοιχείων σε ένα έγγραφο XML, ΑΛΛΑ δεν επιτρέπει την αλλαγή της μορφής ή της διάταξης του περιεχομένου αυτού Δεν δίνει δυνατότητα πρόσβασης σε ιδιότητες, οντότητες, εντολές επεξεργασίας, και άλλα συστατικά μέρη των εγγράφων XML, ούτε και επεξεργασίας των πληροφοριών που περιέχουν αυτά

5 Βασικά βήματα για χρήση CSS Δημιουργία του αρχείου του φύλλου στυλ Το φύλλο επάλληλων στυλ (cascading style sheet) είναι ένα απλό αρχείο κειμένου, συνήθως με την προέκταση.css Περιέχει σύνολο κανόνων που λένε στον browser πώς να μορφοποιήσει και να εμφανίσει τα στοιχεία σε ένα συγκεκριμένο έγγραφο XML Παράδειγμα Inventory01.css Σύνδεση με το Inventory01.xml

6 Inventory01.css

7 Inventory01.xml

8 Σύνδεση φύλλου στυλ στο έγγραφο της XML Για τη σύνδεση ενός φύλλου επάλληλων στυλ σε ένα έγγραφο XML, προσθέτουμε τη δεσμευμένη εντολή επεξεργασίας xml-stylesheet στο έγγραφο Μορφή εντολής: <?xml-stylesheet type= "text/css href = CSSFilePath?> CSSFilePath είναι ένα URL που δείχνει τη θέση του αρχείου φύλλου στυλ Πλήρως προσδιορισμένο URL: <?xml-stylesheet type="text/css" href= " Σχετική θέση: <?xml-stylesheet type="text/css" href="inventory0l.css"?>

9 Σύνδεση φύλλου στυλ στο έγγραφο της XML Περισσότερα από ένα φύλλα στυλ στο έγγραφο, προσθέτοντας από μία εντολή επεξεργασίας xml-stylesheet σε καθένα από αυτά: <?xml version="1.0"?> <?xml-stylesheet type="text/css href="bookol.css"?> <?xml-stylesheet type="text/css" href="book02.css"?> <INVENTORY> <! -- περιεχόμενα στοιχείου εγγράφου --> </INVENTORY> Η δυνατότητα σύνδεσης πολλών φύλλων στυλ στο έγγραφο επιτρέπει αποθήκευση τμημάτων σχετικών μεταξύ τους κανόνων σε ξεχωριστά αρχεία και συνδυασμό Προτεραιότητα με αντικρουόμενους κανόνες: οι κανόνες του φύλλου στυλ που συνδέθηκε τελευταίο στο έγγραφο

10 Στοιχεία φύλλου στυλ Ένα φύλλο στυλ αποτελείται από έναν ή περισσότερους κανόνες (γνωστούς και ως σύνολα κανόνων) Ο κανόνας περιέχει τις πληροφορίας παρουσίασης ενός συγκεκριμένου τύπου στοιχείου στο έγγραφο XML To Inventory01.css περιέχει τρεις κανόνες: ένα για τα στοιχεία BOOK, ένα για τα στοιχεία TITLE, και ένα για τα στοιχεία AUTHOR Κανόνας για το στοιχείο BOOK, με όλα τα συστατικά του μέρη:

11 Στοιχεία φύλλου στυλ Επιλογέας (selector): όνομα τύπου στοιχείου στο οποίο εφαρμόζονται οι πληροφορίες παρουσίασης Τμήμα δήλωσης (declaration block): οριοθετημένο με αγκύλες {} και περιέχει μία ή περισσότερες δηλώσεις που χωρίζονται μεταξύ τους με ; Κάθε δήλωση προσδιορίζει μια συγκεκριμένη ιδιότητα, (π.χ. μέγεθος γραμματοσειράς για την εμφάνιση στοιχείου) Μια δήλωση αποτελείται από: ιδιότητα : τιμή Δήλωση που ορίζει το μέγεθος γραμματοσειράς σε 10pt:

12 Στοιχεία φύλλου στυλ Ένα φύλλο στυλ μπορεί να περιέχει σχόλια Ένα σχόλιο φύλλου στυλ αρχίζει με /* και τελειώνει με */ Πληκτρολόγηση οποιουδήποτε κειμένου ανάμεσα στα ζεύγη οριοθέτησης /* File Name: Inventory0l.css */ Χρήση σχολίων για απενεργοποίηση προσωρινά κάποιου κανόνα ή μέρος κανόνα Αν θέλατε να δούμε πώς θα φαίνονταν τα στοιχεία BOOK χωρίς άνω περιθώριο, θα μπορούσατε να προσθέσετε προσωρινά χαρακτήρες σχολίων: BOOK {display:block; /* margin-top: 12pt; */ font-size: 10pt}

13 Δηλώσεις παραδείγματος display:block Προσθέτει αλλαγή γραμμής πριν και μετά από το κείμενο του στοιχείου margin-top:12pt Προσθέτει περιθώριο 12 στιγμών πάνω από το κείμενο του στοιχείου font-size:10pt Ρυθμίζει το μέγεθος της γραμματοσειράς, που θα χρησιμοποιηθεί για να εμφανίσει το κείμενο του στοιχείου σε 10 στιγμές font-style:italic Εμφανίζει το κείμενο του στοιχείου με πλάγιους χαρακτήρες font-weight:bold Εμφανίζει το κείμενο του στοιχείου με έντονους χαρακτήρες

14 Μη διάκριση πεζών και κεφαλαίων στα CSS ΟΧΙ διάκριση μεταξύ κεφαλαίων και πεζών TITLE {font-style: italic} Title {FONT-STYLE: Italic} title {Font-Style: ITALIC} Και τα τρία το ίδιο!!! ΟΜΩΣ τα έγγραφα XML κάνουν διάκριση πεζώνκεφαλαίων ΑΡΑ καλό να μην ορίζουμε τύπους στοιχείων των οποίων τα ονόματα διαφέρουν μόνο στο είδος των χαρακτήρων (κεφαλαία-πεζά) Book και BOOK Σε ένα CSS τα δύο ονόματα θα θεωρούνταν ο ίδιος τύπος στοιχείου και δεν θα μπορούσαμε να ορίσουμε διαφορετικές ιδιότητες

15 Κληρονομικότητα ρυθμίσεων ιδιοτήτων Μια ρύθμιση ιδιότητας που ορίζεται για ένα συγκεκριμένο στοιχείο (BOOK) επηρεάζει με άμεσο ή έμμεσο τρόπο όλα τα θυγατρικά, ένθετα σε αυτό στοιχεία, εκτός αν η ιδιότητα αυτή υποσκελίζεται (override) από κάποια άλλη ρύθμιση που αφορά ένα συγκεκριμένο θυγατρικό στοιχείο. Οι παρακάτω ιδιότητες αποτελούν εξαιρέσεις και δεν κληρονομούνται από τα θυγατρικά στοιχεία: Η ιδιότητα display Η ιδιότητα vertical-align Οι ιδιότητες πλαισίου

16 Κληρονομικότητα ρυθμίσεων ιδιοτήτων BOOK {display: block; margin-top: 12pt; font-size: 10pt} Κάθε στοιχείο BOOK έχει πέντε θυγατρικά στοιχεία Η ιδιότητα font-size είναι κληρονομούμενη και όλα τα θυγατρικά στοιχεία μέσα σε ένα στοιχείο BOOK εμφανίζονται με γραμματοσειρά 10 στιγμών Τα θυγατρικά στοιχεία όμως δεν κληρονομούν τις ιδιότητες display και margin-top {margin-top είναι μία από τις ιδιότητες πλαισίου) Στην περίπτωση μη κληρονομούμενης ιδιότητας, αν δεν οριστεί τιμή ιδιότητας για κάποιο συγκεκριμένο στοιχείο, ο browser χρησιμοποιεί την προεπιλεγμένη τιμή της ιδιότητας

17 Κληρονομικότητα ρυθμίσεων ιδιοτήτων Αφού πολλές τιμές ιδιοτήτων είναι κληρονομούμενες, όταν σχεδιάζουμε ένα φύλλο στυλ καλό είναι να ξεκινάμε από τα στοιχεία ανωτάτου επιπέδου και στη συνέχεια να συνεχίζουμε στα ένθετα στοιχεία, όπου θα χρειαστεί να κάνουμε απλώς μικρορυθμίσεις και να προσθέσουμε κάποια προσωρινή ρύθμιση υποσκέλισης Ελαχιστοποίηση περιττών ιδιοτήτων (εκείνες που κληρονομούν τα θυγατρικά στοιχεία και δεν χρειάζεται να ορίσουμε)

18 Χρήση πολλαπλών στοιχείων και πολλαπλών κανόνων Εφαρμογή κανόνα σε σειρά στοιχείων όπου συμπεριλαμβάνουμε όλα τα ονόματα των στοιχείων αυτών στον επιλογέα και τα χωρίζουμε μεταξύ τους με, Εφαρμογή κανόνα στους τύπους στοιχείων POEM, TITLE, AUTHOR, DATE, και STANZA: POEM, TITLE, AUTHOR, DATE, STANZA {display: block; margin-bottom: 12pt} Αν ένα σύνολο στοιχείων έχει κοινή ομάδα ιδιοτήτων, τότε όλα τα στοιχεία ΣΕ ΕΝΑΝ ΚΑΙ ΜΟΝΟ κανόνα!

19 Χρήση πολλαπλών στοιχείων και πολλαπλών κανόνων Ένας δεδομένος τύπος στοιχείου μπορεί να είναι σε περισσότερους από έναν κανόνες μέσα στο ίδιο φύλλο στυλ Και στους δύο κανόνες που ακολουθούν περιέχεται το στοιχείο DATE: POEM, TITLE, AUTHOR, DATE, STANZA {display: block; margin-bottom: 12pt} DATE {font-style: italic} 1 ος κανόνας: περιλαμβάνει τις δηλώσεις που το στοιχείο DATE έχει κοινές με τα υπόλοιπα στοιχεία της λίστας 2 ος κανόνας: ρυθμίζει το στοιχείο DATE ορίζει ρύθμιση ιδιότητας που εφαρμόζεται μόνο σε αυτό

20 Χρήση θεματικών επιλογέων Σε επιλογέα: όνομα στοιχείου μαζί με ονόματα ενός ή περισσότερων προγονικών στοιχείων (το γονικό, το γονικό συν το προγονικό, κοκ) Ο κανόνας εφαρμόζεται μόνο στα στοιχεία με το συγκεκριμένο όνομα που είναι ένθετα με αυτόν τον τρόπο Ο επιλογέας που περιλαμβάνει ένα ή περισσότερα ονόματα γονικών στοιχείων είναι γνωστός ως θεματικός επιλογέας (contextual selector) Ο επιλογέας που δεν περιλαμβάνει ονόματα γονικών στοιχείων είναι γνωστός ως γενικός επιλογέας (generic selector) Αν συγκεκριμένη ιδιότητα έχει ρύθμιση σε κανόνα με θεματικό επιλογέα και άλλη έχει ρύθμιση σε κανόνα με γενικό επιλογέα για το ίδιο στοιχείο, η ρύθμιση που βρίσκεται στο θεματικό επιλογέα προηγείται επειδή είναι πιο συγκεκριμένη

21 Χρήση θεματικών επιλογέων Βασικό στοιχείο ενός εγγράφου XML: <MAPS> </MAPS> <CITY> <NAME>Santa Fe</NAME> <STATE>New Mexico</STATE> </CITY> <STATE>California</STATE> Κανόνες CSS: CITY STATE {font-style: normal} STATE {font-style: italic} Όχι κόμμα ανάμεσα στα ονόματα των στοιχείων. ΑΛΛΙΩΣ ο κανόνας θα εφαρμοστεί για όλα τα στοιχεία και όχι απλώς για το θυγατρικό στοιχείο που παρατίθεται τελευταίο Mορφοποίηση του "New Mexico" με normal, ενώ του "California" με italic Το New Mexico στο στοιχείο STATE ταιριάζει και με το θεματικό επιλογέα στον κανόνα CITY STATE και με το γενικό επιλογέα στον κανόνα STATE, ΟΜΩΣ ο επιλογέας στον κανόνα CITY STATE είναι πιο συγκεκριμένος και προηγείται

22 Βασικά επίπεδα ορισμού τιμής σε ιδιότητα Εστω το συνδεδεμένο σε αυτό φύλλο στυλ περιέχει τους κανόνες: CITY STATE STATE {font-style:normal} {font-style:italic} Τότε χρησιμοποιείται ο κανόνας CITY STATE για μορφοποίηση στοιχείου "New Mexico" του STATE, επειδή έχει θεματικό επιλογέα και έτσι ο κανόνας αυτός προηγείται του κανόνα STATE, που έχει γενικό επιλογέα. Επομένως, το στοιχείο "New Mexico" θα εμφανιστεί με κανονική γραμματοσειρά

23 Βασικά επίπεδα ορισμού τιμής σε ιδιότητα Αν δεν οριστεί τιμή για συγκεκριμένη ιδιότητα σε κανόνα με ανάλογο θεματικό επιλογέα, τότε χρησιμοποιείται η τιμή που ορίζεται σε κανόνα με γενικό επιλογέα (δηλ επιλογέα που περιέχει μόνο το όνομα του στοιχείου) Στο παράδειγμα, ο browser δε θα μπορούσε να βρει αντίστοιχο θεματικό κανόνα για το στοιχείο "California" του STATE, οπότε γενικό κανόνας STATE, εμφάνιση "California" με πλάγιους χαρακτήρες

24 Βασικά επίπεδα ορισμού τιμής σε ιδιότητα Αν δεν οριστεί τιμή συγκεκριμένης ιδιότητας σε γενικό κανόνα για το στοιχείο, τότε ρύθμιση που ισχύει για το πιο κοντινό προγονικό στοιχείο (γονικό, γονικό γονέα κοκ) Παράδειγμα: στο Inventory01.css, ο κανόνας για το στοιχείο TITLE δεν ορίζει κάποια τιμή για την ιδιότητα font-size: TITLE {font-style: italic} Τότε ρύθμιση font-size από γονικό στοιχείο του BOOK (BOOK είναι ο γονέας του TITLE στο έγγραφο ΧΜL): BOOK {display: block; margin-top: 12pt; font-size: 10pt} Επομένως κείμενο στοιχείου TITLE με χαρακτήρες 10pt Μόνο για κληρονομημένες ιδιότητες

25 Βασικά επίπεδα ορισμού τιμής σε ιδιότητα Αν το φύλλο στυλ δεν περιλαμβάνει ρύθμιση ιδιότητας για κανένα προγονικό στοιχείο, τότε ο browser χρησιμοποιεί τη δική του ρύθμιση - προεπιλεγμένη τιμή, ενσωματωμένη ή κάποια τιμή που έχει ορίσει ο χρήστης Παράδειγμα inventory01.css δεν ορίζει την ιδιότητα fontsize για όλα τα στοιχεία Για αυτό, ο browser χρησιμοποιεί δική του τιμή font-size για να εμφανίσει όλα τα στοιχεία (Times New Roman, εκτός αν ο χρήστης του φυλλομετρητή ορίσει διαφορετική γραμματοσειρά από Internet Options Tools) Μόνο για κληρονομημένες ιδιότητες

26 Βασικά επίπεδα ορισμού τιμής σε ιδιότητα ΑΡΑ η γενική αρχή είναι η εξής: αν, σε διαφορετικά επίπεδα, έχουμε αντικρουόμενες τιμές για μια ιδιότητα, ο φυλλομετρητης δίνει προτεραιότητα στον πιο συγκεκριμένο κανόνα Μια ρύθμιση ιδιότητας για το ίδιο το στοιχείο είναι πιο συγκεκριμένη από μια ρύθμιση για το γονικό και επομένως έχει προτεραιότητα Αν ο γονέας ενός θυγατρικού στοιχείου έχει και θεματικό και γενικό κανόνα, ποιον κανόνα θα χρησιμοποιήσει ο φυλλομετρητής για το θυγατρικό στοιχείο? Θεματικός κανόνας!

27 Βασικά επίπεδα ορισμού τιμής σε ιδιότητα Τι γίνεται όταν σε συγκεκριμένη ιδιότητα έχουν δοθεί αντικρουόμενες ρυθμίσεις στο ίδιο επίπεδο; Τότε τελευταία ρύθμιση που επεξεργάζεται Παράδειγμα: αν δύο κανόνες για το ίδιο στοιχείο έχουν αντικρουόμενες ρυθμίσεις για την ιδιότητα font-style, τότε ο browser χρησιμοποιεί τη 2 η επειδή επεξεργάζεται τελευταία: TITLE, AUTHOR, BINDING, PRICE AUTHOR {display: block; font-size: 12pt; font-weight: bold; font-style: italic} {font-style: normal} ΑΡΑ θα μορφοποιήσει τα στοιχεία AUTHOR με κανονικούς χαρακτήρες και όχι πλάγιους.

28 Ρύθμιση της ιδιότητας display Η ιδιότητα display ελέγχει τη βασική διαδικασία με την οποία ο browser εμφανίζει το κείμενο ενός στοιχείου. Για την ιδιότητα αυτή ορίzονται μία από τις τρεις λέξεις κλειδιά CSS που ακολουθούν: block inline (προεπιλογή) none

29 Ρύθμιση της ιδιότητας display: block block. Ο browser προσθέτει αλλαγή γραμμής πριν και μετά από το κείμενο του στοιχείου (το οποίο περιλαμβάνει το κείμενο που ανήκει σε κάθε θυγατρικό στοιχείο). Επομένως, το κείμενο του στοιχείου εμφανίζεται σε ένα ξεχωριστό "block", πάνω από το οποίο βρίσκεται το κείμενο που προηγείται και κάτω από αυτό το κείμενο που ακολουθεί. Ο ορισμός της τιμής block δίνει τη δυνατότητα μορφοποίησης του κειμένου εφαρμόζοντας διάφορες ιδιότητες πλαισίου στο τμήμα αυτό του κειμένου, όπως περιθώρια, ορατά περιγράμματα, και συμπληρώματα. ένα στοιχείο block είναι σαν ενότητα σε πρόγραμμα επεξεργασίας κειμένου, που διαχωρίζεται με αλλαγές γραμμών από το κείμενο που προηγείται και από εκείνο που ακολουθεί και μπορεί ουσιαστικά να μορφοποιηθεί με περιθώρια, περιγράμματα

30 Ρύθμιση της ιδιότητας display: inline inline (προεπιλογή). Ο browser δεν προσθέτει αλλαγή γραμμής πριν ή μετά από το κείμενο του στοιχείου (εκτός αν το κείμενο που προηγείται έχει φτάσει στη δεξιά άκρη του παραθύρου και ο browser πρέπει να το αναδιπλώσει στην επόμενη γραμμή) Μπορεί να προσθέσει στο κείμενο του στοιχείου αλλαγές γραμμών, μόνον αν είναι απαραίτητο για να χωρέσει το κείμενο στο παράθυρο. Έτσι, το κείμενο του στοιχείου μπορεί να βρίσκεται στην ίδια γραμμή με το προηγούμενο ή το επόμενο

31 Ρύθμιση της ιδιότητας display: nοne none. Ο επεξεργαστής δεν εμφανίζει το στοιχείο. Χρησιμοποιούμε τη ρύθμιση αυτή για στοιχεία που αποθηκεύουν πληροφορίες και δε θέλουμε να φαίνονται στην οθόνη Η προδιαγραφή CSS ορίζει ότι η ιδιότητα display δεν κληρονομείται από τα θυγατρικά στοιχεία Π.χ ορίζουμε με τη ρύθμιση block την ιδιότητα display ενός στοιχείου. Τα θυγατρικά στοιχεία ΟΜΩΣ κληρονομούν τη ρύθμιση none επειδή, όταν ορίζουμε με τη ρύθμιση αυτή την ιδιότητα display των γονικών στοιχείων, κρύβουμε αυτόματα όλα τα θυγατρικά στοιχεία Τα θυγατρικά στοιχεία ενός στοιχείου inline θα είναι επίσης inline, εκτός αν έχουν ιδιότητα display επειδή inline είναι η προεπιλεγμένη ρύθμιση.

32 Παράδειγμα Έστω το παρακάτω φύλλο στυλ (Inventory01a.css): BOOK TITLE AUTHOR PAGES {display: block; margin-top: 12pt; font-size: 10pt} {font-style: italic} {font-weight: bold} {display: none}

33 Παράδειγμα Λόγω του ότι στην ιδιότητα display του στοιχείου BOOK έχει δοθεί η τιμή block, ο browser προσθέτει πάντα αλλαγή γραμμής πριν και μετά από το κείμενο του στοιχείου To BOOK έχει περιεχόμενο στοιχείου. Το κείμενό του αποτελείται από το κείμενο που ανήκει σε όλα τα θυγατρικά στοιχεία Λόγω του ότι το φύλλο στυλ δεν ορίζει τιμές ιδιότητας display τα στοιχεία TITLE, AUTHOR, BINDING, και PRICE (και τα στοιχεία αυτά δεν κληρονομούν την τιμή display από το γονικό τους στοιχείο), ο browser τα αντιμετωπίζει ως στοιχεία inline, που είναι η προεπιλογή. O browser δεν προσθέτει αλλαγές γραμμών ανάμεσα στα στοιχεία αυτά και - εφόσον το παράθυρο είναι αρκετά πλατύ - τα εμφανίζει όλα στην ίδια γραμμή. Λόγω του ότι η ιδιότητα display του στοιχείου PAGES έχει την τιμή none, ο browser δεν εμφανίζει το στοιχείο αυτό.

34 Ρύθμιση ιδιοτήτων γραμματοσειράς Ιδιότητες που τροποποιούν τη γραμματοσειρά που χρησιμοποιείται για την εμφάνιση κειμένου στοιχείου: font-family font-size font-style font-weight font-variant Όλες οι ιδιότητες κληρονομούνται στα θυγατρικά στοιχεία

35 Ρύθμιση της ιδιότητας font-family Καθορίζει το όνομα της γραμματοσειράς που χρησιμοποιείται για να εμφανίσει το κείμενο του στοιχείου: BOOK {font-family: Arial} Επιλογή οπoιασδήποτε γραμματοσειράς Αν ο browser δεν μπορεί να τη βρει, θα την αντικαταστήσει με άλλη Αν το όνομα μιας γραμματοσειράς περιέχει κενά διαστήματα, τότε τοποθέτηση σε εισαγωγικά: BOOK {font-family: "Times New Roman"} Προσθήκη εναλλακτικών επιλογών, χωρισμένες μεταξύ τους με κόμμα, κατά σειρά προτίμησης: BOOK {font-family: Arial, Helvetica} Αύξηση πιθανοτήτων συμπεριλαμβάνοντας λέξη-κλειδί CSS στο τέλος της λίστας η οποία να δείχνει το γενικό τύπο προτιμώμενης γραμματοσειράς: BOOK {font-family: Arial, Helvetica, sans-serif}

36 Ρύθμιση της ιδιότητας font-family Πίνακας με λέξεις-κλειδιά για το γενικό τύπο γραμματοσειράς: γενικά ονόματα οικογενειών (generic family names) Όνομα γραμματοσειράς που ανήκει στην οικογένεια + δείγμα κειμένου που εμφανίζει ο IE

37 Ρύθμιση της ιδιότητας font-family Σύνδεση φύλλου στυλ (Inventory01_fontfamily.css) στο γνωστό μας έγγραφο ΧΜL: BOOK TITLE AUTHOR {display: block; margin-top: 12pt; font-family: Arial, sans-serif; font-size: 12pt} {font-style: italic} {font-family: "Times New Roman", serif}

38 Ρύθμιση της ιδιότητας font-family Η γραμματοσειρά Arial που ορίστηκε στην ιδιότητα fontfamily του στοιχείου BOOK κληρονομείται σε όλα τα θυγατρικά στοιχεία εκτός από το AUTHOR που έχει τη δική του τιμή font-family ("Times New Roman", serif)

39 Ρύθμιση της ιδιότητας font-size Η ιδιότητα font-size ρυθμίζει το ύψος της γραμματοσειράς που χρησιμοποιείται για να εμφανίσει το κείμενο του στοιχείου Τέσσερις διαφορετικοί τύποι τιμών για την ιδιότητα: Τιμή σχετική με το μέγεθος της γραμματοσειράς του browser Τιμή σχετική με το μέγεθος της γονικής γραμματοσειράς Ποσοστό του μεγέθους της γονικής γραμματοσειράς Συγκεκριμένη τιμή μεγέθους

40 font-size: Τιμή σχετική με το μέγεθος γραμματοσειράς browser x-small}

41 font-size: Τιμή σχετική με το μέγεθος γραμματοσειράς browser

42 font-size: Τιμή σχετική με το μέγεθος γονικής γραμματοσειράς

43 font-size: Ποσοστό μεγέθους γονικής γραμματοσειράς Αντί των λέξεων-κλειδιών smaller ή larger, ορισμός με μεγαλύτερη ακρίβεια μεγέθους σχετικού με το μέγεθος της γραμματοσειράς του γονικού στοιχείου, δίνοντας ποσοστιαία τιμή στην ιδιότητα font-size Ορισμός γραμματοσειράς μιάμιση φορά μεγαλύτερη από τη γονική: TITLE {font-size:150%} Ορισμός γραμματοσειράς λίγο μεγαλύτερη από την προηγούμενη: TITLE {font-size:160%} Το ποσοστό για το βασικό στοιχείο βασίζεται στο μέγεθος της γραμματοσειράς του browser

44 font-size: Συγκεκριμένη τιμή μεγέθους Ορισμός μεγέθους γραμματοσειράς στοιχείου δίνοντας στην ιδιότητα font-size τιμή μεγέθους Ορισμός μεγέθους γραμματοσειράς 12 pts: TITLE {font-size:12 pt} Ορισμός γραμματοσειράς δύο φορές πιο μεγάλη από τη γραμματοσειρά του γονικού στοιχείου: TITLE {font-size:2 em} Ισοδυναμεί με: TITLE {font-size:200%}

45 Καθορισμός τιμών μεγέθους Απόλυτη τιμή μεγέθους: ορίζει το ακριβές μέγεθος χρησιμοποιώντας πρότυπες μονάδες μέτρησης cm: εκατοστά, in: ίντσες, mm: χιλιοστά, pc: picas, pt: points

46 Καθορισμός τιμών μεγέθους Σχετική τιμή μεγέθους: η τιμή που προσδιορίζει ένα μέγεθος σχετικό με το ύψος της γραμματοσειράς του στοιχείου, ή σχετικό με το μέγεθος του εικονοστοιχείου (pixel) της οθόνης στην οποία εμφανίζεται το έγγραφο Εξαίρεση αποτελεί η περίπτωση κατά την οποία ορίζονται οι μονάδες em ή ex στην ιδιότητα font-size, οπότε η τιμή αμναφέρεται στο μέγεθος της γραμματοσειράς του γονικού στοιχείου

47 Ρύθμιση της ιδιότητας font-style Η ιδιότητα font-style ελέγχει αν το κείμενο ενός στοιχείου εμφανίζεται με πλάγιους ή με όρθιους χαρακτήρες Τρεις τιμές λέξεων-κλειδιών font-style font-style font-style

48 Ρύθμιση της ιδιότητας font-weight {font-weight:normal} {font-weight:bold} {font-weight:bolder} {font-weight:lighter}

49 Ρύθμιση της ιδιότητας font-weight {font-weight:100} {font-weight:200} {font-weight:300} {font-weight:400} {font-weight:500}

50 Ρύθμιση της ιδιότητας font-weight {font-weight:600} {font-weight:700} {font-weight:800} {font-weight:900}

51 Ρύθμιση της ιδιότητας font-variant H ιδιότητα font-variant μετατρέπει τους χαρακτήρες του κειμένου σε κεφαλαίους {font-variant:small-caps} {font-variant:normal}

52 Ρύθμιση της ιδιότητας color Η ιδιότητα color καθορίζει το χρώμα του κειμένου ενός στοιχείου Ορισμός γαλάζιου χρώματος για το κείμενο του στοιχείου AUTHOR: AUTHOR {color: blue} Ο παρακάτω κανόνας ορίζει κόκκινο για το κείμενο του στοιχείου AUTHOR: AUTHOR {color: rgb( 255, 0,0)} Η ιδιότητα color κληρονομείται από τα θυγατρικά στοιχεία Η ιδιότητα color ορίζει το χρώμα των χαρακτήρων στο κείμενο (μερικές φορές αποκαλείται και χρώμα προσκηνίου). Για τον ορισμό του χρώματος φόντου, χρησιμοποιείται η ιδιότητα background-color

53 Ρύθμιση της ιδιότητας color Σύνδεση φύλλου στυλ (Inventory01_color.css) στο γνωστό μας έγγραφο ΧΜL: BOOK TITLE AUTHOR PRICE {display: block; margin-top: 12pt; font-size: 10pt; color: blue} {font-style: italic} {font-weight: bold} {color: red}

54 Ρύθμιση της ιδιότητας color

55 Ορισμός χρωματικών τιμών Οι ιδιότητες που παίρνουν χρωματικές τιμές είναι οι: color, background-color, border-color Ορισμός χρωματικής τιμής μέσω των ακόλουθων μορφών Λέξη-κλειδί CSS PARA {color:red} Δεκαδική μορφή RGB με τιμή χρωματικής απόχρωσης από 0 ως 255 PARA {color:rgb(255,0,0)} Δεκαεξαδική μορφή RGB με εξαψήφιο δεκαεξαδικό αριθμό από ως FFFFFF, τα δύο πρώτα ψηφία ορίζουν την ένταση του κόκκινου, τα δύο επόμενα την ένταση του πράσινου, τα δύο τελευταία την ένταση του μπλε PARA {color:#ff0000} Ποσοστιαία μορφή RGB όπου κάθε χρωματική ένταση ορίζεται μέσω ποσοστιαίας τιμής από 0% ως 100% PARA {color:rgb(100%,0%,0%)}

56 Ορισμός χρωματικών τιμών

57 Ορισμός χρωματικών τιμών

58 Ρύθμιση ιδιοτήτων φόντου Το πρότυπο CSS προβλέπει τις παρακάτω ιδιότητες, οι οποίες επιτρέπουν την τροποποίση του φόντο ενός στοιχείου: background-color background-image background-repeat background position Φόντο είναι η περιοχή που περιβάλλει τους χαρακτήρες του κειμένου του στοιχείου - κάποιο χρώμα ή μια εικόνα μπορεί να οριστεί ως φόντο κάποιου στοιχείου Τα θυγατρικά στοιχεία δεν κληρονομούν τις ιδιότητες αυτές. Όμως το φόντο στοιχείου είναι εξ ορισμού διαφανές. ΑΡΑ, αν αφαιρέσουμε από ένα θυγατρικό στοιχείο όλες τις ιδιότητες φόντου, τότε διακρίνεται το φόντο του γονικού στοιχείου (ή του browser) δίνοντας στο θυγατρικό στοιχείο το ίδιο φόντο με του γονικού (ή του browser)

59 Ρύθμιση της ιδιότητας background-color Ορισμός συμπαγούς χρωματικού φόντου σε στοιχείο, δίνοντας χρωματική τιμή στην ιδιότητα backgroundproperty Ορισμός χρώματος φόντου για το στοιχείο TITLE το ανοιχτό κίτρινο: TITLE {background-color:yellow} Η ιδιότητα color ορίζει το χρώμα προσκηνίου ενός στοιχείου (το χρώμα που θα έχουν οι χαρακτήρες) Ο παρακάτω κανόνας δημιουργεί μπλε γράμματα σε κίτρινο φόντο: TITLE {color: blue; background-color: yellow}

60 Ρύθμιση της ιδιότητας background-color Αν δεν θέλουμε να ορίσουμε συμπαγές χρώμα φόντου για κάποιο στοιχείο, δίνουμε στην ιδιότητα background-color την τιμή transparent: TITLE {background-color: transparent} Μπορούμε να παραλείψουμε την ιδιότητα backgroundcolor από το στοιχείο αυτό, γιατί είναι προεπιλεγμένη Αν δεν ορίσουμε κάποια εικόνα φόντου για το στοιχείο, η ρύθμιση transparent εμφανίζει το φόντο του γονικού στοιχείου (ή του browser)

61 Ρύθμιση της ιδιότητας background-image Προσθήκη εικόνας φόντου σε στοιχείο, αποδίδοντας στην ιδιότητα background-image το URL ενός αρχείου εικόνας Απόδοση στο στοιχείο STANZA της εικόνας φόντου που περιέχεται στο αρχείο Leaf.bmp: STANZA {background-image:url(leaf.bmp)} Leaves.css Leaf.bmp Leaves.xml

62 Leaves.css

63 Leaves.xml

64 Ρύθμιση της ιδιότητας background-image H εικόνα επαναλαμβάνεται (δηλαδή βρίσκεται σε παράθεση) για να καλύψει ολόκληρη την περιοχή που καταλαμβάνει το περιεχόμενο του στοιχείου, και εκτείνεται σχεδόν μέχρι τη δεξιά άκρη του παραθύρου του browser Αν δεν θέλουμε να ορίσουμε εικόνα φόντου για κάποιο στοιχείο, δίνουμε στην ιδιότητα background-image την τιμή none: STANZA {background-image: none} Η τιμή none είναι η προεπιλεγμένη και μπορεί να παραληφθεί η ιδιότητα background-image από το στοιχείο Η ρύθμιση none προκαλεί την εμφάνιση του φόντου του γονικού στοιχείου (ή του browser), εκτός αν οριστεί συμπαγές χρώμα φόντου για το στοιχείο.

65 Ρύθμιση της ιδιότητας background-repeat Αν έχει οριστεί κάποιο αρχείο εικόνας στην ιδιότητα background-image, τότε ο τρόπος με τον οποίο επαναλαμβάνεται η εικόνα ελέγχεται δίνοντας στην ιδιότητα background-repeat μία από τις προεπιλεγμένες τιμές: repeat (προεπιλογή) repeat-x repeat-y no-repeat

66 Ρύθμιση της ιδιότητας background-repeat: repeat Επαναλαμβάνεται η εικόνα οριζόντια και κατακόρυφα Επειδή η τιμή αυτή είναι η προεπιλογή, η προσθήκη της ιδιότητας background-repeat:repeat στον κανόνα STANZA, στο φύλλο στυλ Leaves.css, δε θα επηρεάσει καθόλου τον τρόπο με τον οποίο εμφανίζεται το έγγραφο: STANZA {background-image: url( Leaf.bmp); background-repeat: repeat}

67 Ρύθμιση της ιδιότητας background-repeat: repeat

68 Ρύθμιση της ιδιότητας background-repeat: repeat-x Επαναλαμβάνεται η εικόνα μόνο οριζόντια STANZA {background-image: url( Leaf.bmp); background-repeat: repeat-x}

69 Ρύθμιση της ιδιότητας background-repeat: repeat-x

70 Ρύθμιση της ιδιότητας background-repeat: repeat-y Επαναλαμβάνεται η εικόνα μόνο κατακόρυφα STANZA {background-image: url( Leaf.bmp); background-repeat: repeat-y}

71 Ρύθμιση της ιδιότητας background-repeat: repeat-y

72 Ρύθμιση της ιδιότητας background-repeat: no-repeat Η εικόνα εμφανίζεται μόνο μία φορά STANZA {background-image: url( Leaf.bmp); background-repeat: no-repeat}

73 Ρύθμιση της ιδιότητας background-repeat: no-repeat

74 Ρύθμιση της ιδιότητας background-position H άνω αριστερή γωνία της εικόνας φόντου (ή η άνω αριστερή γωνία του άνω αριστερού αντίγραφου της εικόνας, αν επαναλαμβάνεται) βρίσκεται σε ευθυγράμμιση με την άνω αριστερή γωνία του στοιχείου Αλλαγή αυτής της ευθυγράμμισης γίνεται ορίζοντας μια τιμή για την ιδιότητα background-position Τρεις διαφορετικοί τύποι τιμών: Τιμές οριζόντιου και κατακόρυφου μεγέθους Οριζόντιες και κατακόρυφες ποσοστιαίες τιμές Τιμές λέξεων-κλειδιών

75 Ρύθμιση της ιδιότητας background-position Τιμές οριζόντιου και κατακόρυφου μεγέθους: Η πρώτη τιμή δείχνει την οριζόντια θέση της εικόνας μέσα στο στοιχείο, ενώ η δεύτερη τιμή την κατακόρυφη θέση της Τοποθέτηση της άνω αριστερής γωνίας της εικόνας.5 ίντσες πιο δεξιά και.25 ίντσες πιο κάτω από την άνω αριστερή γωνία ενός στοιχείου STANZA: STANZA {background-image:url( Leaf.bmp); background-repeat:no-repeat; background-position:.5in.25in}

76 Ρύθμιση της ιδιότητας background-position

77 Ρύθμιση της ιδιότητας background-position Όταν η εικόνα επαναλαμβάνεται, όπως ορίζεται στον κανόνα που ακολουθεί, ολόκληρο το μοτίβο των επαναλαμβανόμενων εικόνων μετατοπίζεται αντίστοιχα: STANZA {background-image:url(leaf.bmp); background-repeat:repeat; background-position:.5in.25in}

78 Ρύθμιση της ιδιότητας background-position

79 Ρύθμιση της ιδιότητας background-position Οριζόντιες και κατακόρυφες ποσοστιαίες τιμές Δύο ποσοστιαίες τιμές: η πρώτη δείχνει την οριζόντια θέση της εικόνας μέσα στο στοιχείο, όπου το 0% την τοποθετεί προς τα αριστερά (στην προεπιλεγμένη οριζόντια θέση της), το 50% την τοποθετεί στο οριζόντιο κέντρο του στοιχείου και το 100% την τοποθετεί στα δεξιά του στοιχείου η δεύτερη ποσοστιαία τιμή δείχνει την κατακόρυφη θέση της εικόνας, όπου το 0% την τοποθετεί στο πάνω μέρος (στην προεπιλεγμένη κατακόρυφη θέση της), το 50% την τοποθετεί στο κατακόρυφο κέντρο του στοιχείου και το 100% την τοποθετεί στο κατώτατο μέρος του στοιχείου Τοποθέτηση εικόνας στο κέντρο του στοιχείου: STANZA {background-image:url(leaf.bmp); background-repeat: no-repeat; background-position:50% 50%}

80 Ρύθμιση της ιδιότητας background-position

81 Ρύθμιση της ιδιότητας background-position με repeat

82 Ρύθμιση της ιδιότητας background-position Τιμές λέξεων-κλειδιών Ορισμός εικόνας φόντου με μία ή δύο λέξεις κλειδιά Με προσθήκη λέξεων right και bottom τοποθέτηση εικόνας στην κάτω δεξιά θέση του στοιχείου: STANZA {background-image:url(leaf.bmp); background-repeat: no-repeat; background-position:right bottom}

83 Ρύθμιση της ιδιότητας background-position

84 Θέσεις εικόνας από κάθε συνδυασμό λέξεων-κλειδιών

85 Ρύθμιση ιδιοτήτων απόστασης και στοίχισης κειμένου Υπάρχουν οι παρακάτω ιδιότητες με τις οποίες τροποποιούνται η απόσταση, η στοίχιση, και άλλα χαρακτηριστικά του κειμένου: letter-spacing vertical-align text-align text-indent line-height text-transform text-decoration Τα θυγατρικά στοιχεία κληρονομούν όλες τις ιδιότητες εκτός από τη vertical-align

86 Ρύθμιση της ιδιότητας letterspacing Χρήση ιδιότητας letter-spacing για να μεγαλώσει ή να μικρύνει η απόσταση ανάμεσα στους χαρακτήρες του κειμένου ενός στοιχείου Θετική τιμή ώστε να μεγαλώσει η απόσταση μεταξύ των χαρακτήρων Αύξηση απόστασης χαρακτήρων κατά το ένα τέταρτο του ύψους του κειμένου: TITLE {letter-spacing:.25em} Αρνητική τιμή ώστε να μειωθεί η απόσταση των χαρακτήρων Μείωση απόστασης χαρακτήρων κατά μισή στιγμή: TITLE {letter-spacing:-.5pt} Επιλογή κανονικού διαστήματος μεταξύ χαρακτήρων με την τιμή normal

87 Ρύθμιση της ιδιότητας letterspacing Ορισμός αυξημένης απόστασης μεταξύ χαρακτήρων για το στοιχείο TITLE και κανονικής απόστασης μεταξύ χαρακτήρων για το στοιχείο SUBTITLE (σημαντικός ο ορισμός δεύτερης τιμής - αν παραλειπόταν, το στοιχείο SUBTITLE θα κληρονομούσε από το γονικό του στοιχείο, TITLE, την αυξημένη απόσταση μεταξύ χαρακτήρων): POEM {font-size: 145%} POEM, TITLE, SUBTITLE, AUTHOR, SECTION, NUMBER, STANZA, VERSE {display: block} SECTION, STANZA TITLE SUBTITLE {margin-top: 1em} {letter-spacing:.5em} {letter-spacing: normal}

88 Ρύθμιση της ιδιότητας letterspacing

89 Ρύθμιση της ιδιότητας verticalalign Δημιουργία κειμένου εκθέτη ή δείκτη Η ιδιότητα αυτή επηρεάζει μόνο τα στοιχεία inline (τιμή της ιδιότητας display) Ορισμός vertical-align με λέξεις-κλειδιά CSS Για να φτιάξουμε κάθε δείγμα κειμένου της τελευταίας γραμμής, ορισμός ρύθμισης για την ιδιότητα vertical-align μόνο του στοιχείου CHILD, ενός στοιχείου inline που εμφανίζεται στο έγγραφο ως εξής: <PARENT>PARENT ELEMENT </PARENT> <CHILD>CHILD ELEMENT</CHILD> Τα θυγατρικά στοιχεία δεν κληρονομούν την ιδιότητα vertical-align

90 Ρύθμιση της ιδιότητας verticalalign

91 Ρύθμιση της ιδιότητας text-align Χρήση ιδιότητας text-align για έλεγχο οριζόντιας στοίχισης κειμένου στοιχείου Η ιδιότητα αυτή λειτουργεί κανονικά μόνον αν οριστεί σαφώς για ένα στοιχείο block Στην περίπτωση αυτή θα επηρεάσει και το στοιχείο καθώς και οποιαδήποτε θυγατρικά στοιχεία περιλαμβάνονται σε αυτό, ανεξαρτήτως αν τα θυγατρικά αυτά στοιχεία είναι block ή inline Η ιδιότητα text-align επηρεάζει τη στοίχιση στην περιοχή του κειμένου. Η περιοχή αυτή εκτείνεται και καλύπτει ολόκληρο σχεδόν το πλάτος του παραθύρου του browser Μπορεί να πάρει μία από τις τρεις τιμές: left right center

92 Ρύθμιση της ιδιότητας text-align: left Στοιχίζει κάθε γραμμή αριστερά POEM {text-align: left}

93 Ρύθμιση της ιδιότητας text-align: right Στοιχίζει κάθε γραμμή δεξιά POEM {text-align: right}

94 Ρύθμιση της ιδιότητας text-align: center Κεντράρει κάθε γραμμή οριζόνται POEM {text-align: center}

95 Ρύθμιση της ιδιότητας text-indent Τοποθέτηση σε εσοχή της πρώτης γραμμής κειμένου στοιχείου Τοποθέτηση σε εσοχή, κατά τρεις φορές το ύψος του χαρακτήρα του, του πρώτου στίχου του στοιχείου VERSE: VERSE {text-indent:3em} It is in his walk, the carriage of his neck, the flex of his waist and knees dress does not hide him; Ορισμός εσοχής ως ποσοστιαία μονάδα συνολικού πλάτους κειμένου στοιχείου Τοποθέτηση σε εσοχή του πρώτου στίχου του στοιχείου VERSE κατά το μισό του πλάτους του στοιχείου: VERSE {text-indent: 50%} It is in his walk, the carriage of his neck, the flex of his waist and knees dress does not hide him;

96 Ρύθμιση της ιδιότητας text-indent Για τοποθέτηση σε εσοχή όλων των γραμμών στοιχείου (και όχι μόνο της πρώτης), τότε ιδιότητα margin-left Ορισμός αρνητικής τιμής - τιμή μεγέθους ή ποσοστό - για μετακίνηση πρώτης γραμμής προς αριστερά. Αν όμως δοθεί αρνητική τιμή στην ιδιότητα text-indent, το πρώτο μέρος της γραμμής θα κρυφτεί: Για αποφυγή, ορίζουμε αριστερό περιθώριο στο στοιχείο Ορισμός αριστερού περιθωρίου 4em (margin-left:4em) και μετακίνηση πρώτης γραμμής κατά 2em {text-indent:2em): VERSE {margin-left:4em; text-indent:-2em}

97 Ρύθμιση της ιδιότητας line-height Eλέγχει την απόσταση ανάμεσα στις γραμμές βάσης διαδοχικών γραμμών κειμένου στοιχείου. Προσαρμογή κατακόρυφης απόστασης μεταξύ γραμμών κειμένου Leaves.css STANZA {line-height:2em} Το κείμενο STANZA θα εμφανιστεί με γραμμές διπλής απόστασης Aνάλογο τρόπο, μπορεί να οριστεί το ύψος γραμμής ως ποσοστιαία μονάδα του ύψους του κειμένου Ισοδύναμος κανόνας! STANZA {line-height:200%}

98 Ρύθμιση της ιδιότητας line-height

99 Ρύθμιση της ιδιότητας texttransform Έλεγχος μετατροπής σε κεφαλαίους των χαρακτήρων κειμένου στοιχείου, κατά την εμφάνισή του στο browser

100 Ρύθμιση της ιδιότητας textdecoration Σχεδιασμός διαφόρων ειδών γραμμών στο κείμενο στοιχείου Εφαρμογή περισσοτέρων από ένα είδη γραμμών με πολλές τιμές. (Αν ανάμεσα στις τιμές none, ακυρώνονται οι προηγούμενες) Σχεδιασμός γραμμής πάνω και κάτω από το κείμενο: TITLE {text-decoration: underline overline}

101 Ρύθμιση ιδιοτήτων πλαισίου Για τη μορφοποίηση κειμένου που ανήκει σε στοιχείο Τύποι ιδιοτήτων πλαισίου: Margin (ττεριθώριο). Ορισμός διαφανούς περιθωρίου γύρω από το στοιχείο, έξω από το ορατό περίγραμμα (αν υπάρχει) Border (περίγραμμα). Εμφάνιση ορατού περιγράμματος - σε διάφορα στυλ - γύρω από το στοιχείο, έξω από το παραγέμισμα (padding - αν υπάρχει) Padding (παραγέμισμα). Πρόσθεση κενού διαστήματος έξω ακριβώς από το περιεχόμενο ενός στοιχείου, μέσα από το περίγραμμα (αν υπάρχει). Size (μέγεθος). Οι ιδιότητες height και width ελέγχουν τις διαστάσεις του περιεχομένου του στοιχείου και οποιοδήποτε παραγέμισμα ή περίγραμμα περιλαμβάνεται σε αυτό Positioning (θέση). Οι ιδιότητες float και clear ελέγχουν τη θέση του στοιχείου σε σχέση με τα γειτονικά του

102 Ρύθμιση ιδιοτήτων πλαισίου Εφαρμογή τεσσάρων πρώτων ιδιοτήτων πλαισίου σε στοιχείο block:

103 Ρύθμιση ιδιοτήτων πλαισίου Στοιχείο block είναι το στοιχείο εκείνο του οποίου η ιδιότητα display έχει πάρει την τιμή block, ενώ inline το στοιχείο εκείνο του οποίου η ιδιότητα display έχει πάρει την τιμή inline Οι πρώτες τρεις ομάδες ιδιοτήτων {margin, border, και padding) μπορούν να εφαρμοστούν σε στοιχεία block και σε στοιχεία inline Τα θυγατρικά στοιχεία δεν κληρονομούν τις ιδιότητες πλαισίου

104 Ρύθμιση ιδιοτήτων περιθωρίου Το πλάτος των περιθωρίων γύρω από ένα στοιχείο είναι εξ ορισμού μηδέν Για προσθήκη περιθωρίου σε μία ή περισσότερες πλευρές του στοιχείου, ορισμός μη μηδενικής τιμής για μία ή περισσότερες από τις παρακάτω ιδιότητες: margin-top margin-right margin-bottom margin-left

105 Ρύθμιση ιδιοτήτων περιθωρίου Προσθήκη περιθωρίου δεξιά και αριστερά από το στοιχείο STANZA. To πλάτος του περιθωρίου είναι δύο φορές το ύψος του κειμένου του στοιχείου: STANZA {margin-left:2em; margin-right:2em} Ορισμός μεγέθους ενός περιθωρίου ως ποσοστό του πλάτους του γονικού στοιχείου Δημιουργία αριστερού περιθωρίου ίσο με το 1/4 του πλάτους του γονικού στοιχείου: STANZA {margin-left:25%}

106 Ρύθμιση ιδιοτήτων περιθωρίου Raven.css Raven.xml Προσθήκη κανόνα στο φύλλο στυλ που τοποθετεί αυτόματα περιθώριο 2,5em που περικλείει και τα δύο στοιχεία STANZA STANZA {margin:2.5em}

107 Raven.css

108 Raven.xml

109 Ρύθμιση ιδιοτήτων περιθωρίου

110 Ρύθμιση ιδιοτήτων περιγράμματος Για σχεδιασμό ορατών περιγραμμάτων γύρω από ένα στοιχείο: border-style border-width border-color

111 Ρύθμιση ιδιότητας border-style Για προσθήκη ορατού περιγράμματος σε μία ή περισσότερες πλευρές του στοιχείου και για ορισμό στυλ περιγράμματος

112 Ρύθμιση ιδιότητας border-style

113 Ρύθμιση ιδιότητας border-style Περίγραμμα διαφορετικού στυλ σε κάθε πλευρά του στοιχείου, ορίζοντας τέσσερις διαφορετικές τιμές για την ιδιότητα border-style Οι τιμές αυτές αναφέρονται κατά σειρά στο πάνω, δεξιό, κάτω, και αριστερό περίγραμμα Συμπαγές περίγραμμα στην πάνω και στην κάτω πλευρά ενός στοιχείου TITLE, κανένα όμως περίγραμμα στην αριστερή ή στη δεξιά πλευρά: TITLE {border-style:solid none solid none) Περίγραμμα σε όλες τις πλευρές του στοιχείου STANZA και ένα περιθώριο έξω από το περίγραμμα: STANZA {margin: 2.5 em; border-style: double solid double solid}

114 Ρύθμιση ιδιότητας border-style

115 Ρύθμιση ιδιότητας border-width Προσαρμογή ορατού περιγράμματος σε μία ή περισσότερες πλευρές ενός στοιχείου χρησιμοποιώντας την ιδιότητα border-width solid; thick}

116 Ρύθμιση ιδιότητας border-width Εφαρμογή γύρω από όλες τις πλευρές του στοιχείου TITLE περιγράμματος με πλάτος 1 pixel (το πιο λεπτό περίγραμμα που μπορεί να εμφανίσει μια οθόνη): TITLE {border-style: solid; border-width: 1px} Διαφοροποίηση πλάτους περιγράμματος σε κάθε πλευρά του στοιχείου, δίνοντας τέσσερις διαφορετικές λέξεις-κλειδιά ή τιμές μεγέθους στην ιδιότητα width - Οι τιμές αναφέρονται κατά σειρά στο πάνω, δεξιό, κάτω, και αριστερό περίγραμμα Δημιουργία συμπαγούς περιγράμματος γύρω από όλες τις πλευρές του στοιχείου STANZA: STANZA {margin:2.5em; border-style:solid; border-width:1px thick 1px thick}

117 Ρύθμιση ιδιότητας border-width

118 Ρύθμιση ιδιότητας border-color Περιγράμματα που δημιουργoύνται με την border-style έχουν το ίδιο χρώμα με τη ρύθμιση color που ισχύει για το στοιχείο -> Αλλαγή χρώματος περιγραμμάτων με την ιδιότητα border-color Προσθήκη συμπαγών κόκκινων περιγραμμάτων σε όλες τις πλευρές του στοιχείου TITLE: TITLE {border-style: solid; border-color: red} Αλλαγή χρώματος σε καθένα από τα περιγράμματα στοιχείου, δίνοντας τέσσερις διαφορετικές χρωματικές τιμές Συμπαγή κόκκινα περιγράμματα στην πάνω και στην κάτω πλευρά του στοιχείου TITLE και συμπαγή πράσινα περιγράμματα στη δεξιά και στην αριστερή πλευρά: TITLE {border-style: solid; border-color: red green red green}

119 Ρύθμιση ιδιοτήτων παραγεμίσματος Οι ιδιότητες παραγεμίσματος (padding) προσθέτουν κενό διάστημα ανάμεσα στο περιεχόμενο ενός στοιχείου και στο περίγραμμά του Χωρίς την ιδιότητα padding, τα περιγράμματα εμφανίζονται πολύ κοντά στο κείμενο του στοιχείου Βελτίωση εμφάνισης περιγράμματος με παραγέμισμα Πλάτος περιοχής παραγεμίσματος γύρω από ένα στοιχείο εξ ορισμού μηδέν padding-top padding-right padding-bottom padding-left

120 Ρύθμιση ιδιοτήτων παραγεμίσματος Προσθήκη padding στο πάνω και στο κάτω μέρος του στοιχείου STANZA. To πλάτος της περιοχής padding είναι δύο φορές το ύψος του κειμένου του στοιχείου: STANZA {padding-top:2em; padding-bottom:2em} Ορισμός πλάτους περιοχής padding ως ποσοστό, σε αναλογία με το πλάτος του γονικού στοιχείου Προσθήκη padding στην αριστερή πλευρά του στοιχείου STANZA. To πάχος του padding είναι ίσο με το 1/4 του πλάτους του γονικού στοιχείου: STANZA {padding-left: 25%}

121 Ρύθμιση ιδιοτήτων παραγεμίσματος Προσθήκη padding ίσου πάχους και στις τέσσερις πλευρές του στοιχείου, με μία μόνο τιμή - μεγέθους ή ποσοστιαία - στην ιδιότητα padding Παράδειγμα: STANZA {margin: 2.5em; border-style: solid; padding:2em} Εμφάνιση των παρακάτω χαρακτηριστικών μορφοποίησης γύρω από κάθε στοιχείο STANZA: Παραγέμισμα πάχους 2em, που περιβάλλει το στοιχείο Συμπαγες περίγραμμα γύρω από το παραγέμισμα Περιθώριο γύρω από το περίγραμμα

122 Ρύθμιση ιδιοτήτων padding - Η περιοχή padding, όπως και η περιοχή περιεχομένου στοιχείου, εμφανίζει όποιο χρώμα ή όποια εικόνα φόντου έχει οριστεί για το στοιχείο - Αλλιώς η περιοχή περιγράμματος εμφανίζει το φόντο του φονικού στοιχείου

123 Ρύθμιση ιδιοτήτων μεγέθους Οι ιδιότητες μεγέθους width και height ελέγχουν τις διαστάσεις του περιεχομένου του στοιχείου, μεταξύ των οποίων και τα παραγεμίσματα και τα περιγράμματα που ενδεχομένως να υπάρχουν Τύποι τιμών για τις ιδιότητες width και height: Οποιαδήποτε από τις τιμές μεγέθους που είδαμε στον "Καθορισμό τιμών μεγέθους Μερικό ποσοστό πλάτους ή ύψους γονικού στοιχείου Προκαθορισμένη τιμή auto

124 Ρύθμιση ιδιοτήτων μεγέθους Ορισμός ιδιότητας width στοιχείου STANZA στις 3 in και ιδιότητας height στις 2 in: STANZA {width:3in; height:2in} Ορισμός ιδιοτήτων width και height στοιχείου STANZA στο μισό του πλάτους και του ύψους του γονικού του στοιχείου: STANZA {width:50%; height:50%} Προσαρμογή ιδιοτήτων width και height ώστε να ταιριάζουν στις πραγματικές διαστάσεις του κειμένου - Ορισμός ιδιοτήτων σε auto (το ίδιο αποτέλεσμα θα είχε και η παράλειψη των δύο αυτών ιδιοτήτων): STANZA {width: auto; height: auto}

125 Ρύθμιση ιδιοτήτων μεγέθους Αν η ιδιότητα width δίνει πολύ μικρό πλάτος και οι γραμμές του κειμένου δεν χωρούν στην αντίστοιχη περιοχή, ο browser αναδιπλώνει το κείμενο για να το προσαρμόσει σε αυτά τα όρια Αν το κείμενο δεν χωράει κατακόρυφα στην περιοχή που έχει οριστεί από την ιδιότητα height, ο browser αυξάνει τη ρύθμιση height για να προσαρμόσει το κείμενο STANZA {border-style: solid; width: 2.5in; height: 1in} Αναδίπλωση κειμένου μέσα στο προκαθορισμένο πλάτος των 2,5 ιντσών, αλλά το ύψος αυξάνεται πέρα από την καθορισμένη τιμή της 1 ίντσας προκειμένου να χωρέσει όλο το περιεχόμενο του κειμένου

126 Ρύθμιση ιδιοτήτων μεγέθους

127 Ρύθμιση ιδιοτήτων θέσης Ιδιότητες θέσης float και clear για τον έλεγχο της θέσης ενός στοιχείου block, σχετικού με το κείμενο του εγγράφου Ρύθμιση της ιδιότητας float Το περιεχόμενο ενός στοιχείου block καταλαμβάνει εξ ορισμού ολόκληρο το πλάτος του παραθύρου του browser, με το κείμενο που προηγείται τοποθετημένο από πάνω και εκείνο που ακολουθεί από κάτω Με τη χρήση της ιδιότητας float εμφάνιση περιεχομένου ενός στοιχείου block δίπλα (δηλαδή, στα αριστερά ή στα δεξιά) του κειμένου που ακολουθεί

128 Ρύθμιση ιδιότητας float Τιμές για την ιδιότητα float: Λέξη-κλειδί float left right none (προεπιλογή) Αποτέλεσμα Εμφανίζει το περιεχόμενο του στοιχείου στα αριστερά του κειμένου εγγράφου που ακολουθεί Εμφανίζει το περιεχόμενο του στοιχείου στα δεξιά του κειμένου εγγράφου που ακολουθεί Ακυρώνει την ιδιότητα, και έτσι το στοιχείο εμφανίζεται ως κανονικό στοιχείο block. Δηλαδή, το κείμενο εγγράφου που προηγείται μπαίνει πάνω από αυτό, και εκείνο που ακολουθεί από κάτω.

129 Ρύθμιση ιδιότητας float Χρήση ιδιότητας float για δημιουργία σημείωσης περιθωρίου και εμφάνισης κινητής εικόνας δίπλα στο κείμενο στοιχείου 1) Δημιουργία σημείωσης περιθωρίου Raven.css Raven01.css Αλλαγές! Nέα χαρακτηριστικά: Αριστερό περιθώριο μίας ίντσας στα στοιχεία STANZA Μορφοποίηση στοιχείου ΝΟΤΕ (το οποίο στη συνέχεια θα προσθέσουμε στο έγγραφο) ως σημείωση περιθωρίου που εμφανίζεται στο αριστερό περιθώριο του πρώτου στοιχείου STANZA. Συγκεκριμένα: Περίγραμμα πλάτους 1 εικονοστοιχείου Κεντράρισμα κειμένου Τιμή μίας ίντσας στις ιδιότητες, width και height Δημιουργία κινητής σημείωσης περιθωρίου στα αριστερά του κειμένου που ακολουθεί Προσθήκη στοιχείου ΝΟΤΕ στο Raven.xml, πάνω ακριβώς από το πρώτο στοιχείο STANZA: <NΟTE>This is a floating margin note.</nοte>

130 Ρύθμιση ιδιότητας float 1) Δημιουργία σημείωσης περιθωρίου STANZA {margin-left:1in; margin-bottom:.25in} NOTE {border-style:solid; border-width:1px; text-align:center; width:1in; height:1in; float:left}

131 Ρύθμιση ιδιότητας float

132 Ρύθμιση ιδιότητας float 2) Εμφάνιση κινητής εικόνας Raven.css Raven02.css Αλλαγές! Νέα χαρακτηριστικά: Προσθήκη κανόνα για τα στοιχεία IMAGE: IMAGE {background-image:url(raven.bmp); background-repeat:no-repeat; background-position:center; width:89px; height:58px; float:left} To στοιχείο IMAGΕ είναι κενό στοιχείο (πρέπει να προστεθεί στο έγγραφο XML <IMAGE/> ) σχεδιασμένο για να εμφανίζει μια κινητή εικόνα Το στοιχείο δεν έχει περιεχόμενο, έχει όμως εικόνα φόντου (που ορίζεται από τις τρεις πρώτες ρυθμίσεις του κανόνα) Ορισμός ιδιοτήτων width και height με ακριβές πλάτος, ύψος

133 Ρύθμιση ιδιότητας float

134 Ρύθμιση ιδιότητας clear Ένα κινητό (floating) στοιχείο (δηλ στοιχείο του οποίου η ιδιότητα float έχει πάρει την τιμή left ή right θα εμφανιστεί στην αριστερή ή δεξιά πλευρά του κειμένου εγγράφου Ιδιότητα clear εμποδίζει την εμφάνιση κινητού στοιχείου Λέξη-κλειδί clear Αποτέλεσμα left right both none (προεπιλογή) To στοιχείο θα εμφανιστεί στο κάτω μέρος και όχι στο πλάι του κινητού στοιχείου που προηγείται και για το οποίο υπάρχει η ρύθμιση float:left. Το στοιχείο θα εμφανιστεί στο κάτω μέρος και όχι στο πλάι του κινητού στοιχείου που προηγείται και για το οποίο υπάρχει η ρύθμιση float:right. Το στοιχείο θα εμφανιστεί στο κάτω μέρος και όχι στο πλάι του κινητού στοιχείου που προηγείται και για το οποίο υπάρχει μία από τις δύο ρυθμίσεις, float:right ή float:left. Το στοιχείο θα εμφανιστεί στο πλάι ενός στοιχείου που προηγείται.

135 Ρύθμιση ιδιότητας clear Με προσθήκη του παρακάτω κανόνα, κάθε στοιχείο STANZA θα εμφανιστεί κάτω και όχι στο πλάι του (κινητού) στοιχείου IMAGE που προηγείται: STANZA {clear:left}

136 Ρύθμιση ιδιότητας clear

137 Δημιουργία και χρήση πλήρους φύλλου επάλληλων στυλ Το έγγραφο XML έχει ένα κενό στοιχείο IMAGE πριν από κάθε στοιχείο STANZA. Θα χρησιμοποιήσουμε τα στοιχεία IMAGE για να εμφανίσουμε εικόνες ενός κορακιού στην αρχή κάθε στροφής Ο τελευταίος στίχος κάθε στροφής είναι τοποθετημένος σε ένα ειδικό στοιχείο που ονομάζεται LASTVERSE. Αυτό δίνει τη δυνατότητα να δώσουμε στον τελευταίο στίχο διαφορετική μορφή από εκείνη των υπολοίπων (Θα είναι στοιχισμένος στη δεξιά και όχι στην αριστερή πλευρά) Το αρχείο εικόνας (Ravshade.xml) που εμφανίζεται με τη χρήση των στοιχείων IMAGE είναι το ίδιο με την προηγούμενη εικόνα, εκτός από το σκιασμένο φόντο Το φύλλο στυλ κρύβει τα περιεχόμενα του AUTHOR-BIO, ορίζοντας την τιμή none στην ιδιότητα display

138

139 Εμφάνιση δεδομένων σε πίνακα INVENTORY { display: table; width: 30em; border-spacing: 0; border: 2px solid gray; margin: 1em;} BOOK { display: table-row; padding: 0.3em; border: 1px solid gray;} TITLE { display: table-cell; padding: 0.3em; border: 1px solid gray;} AUTHOR { display: table-cell; padding: 0.3em; border: 1px solid gray;} BINDING { display: table-cell; padding: 0.3em; border: 1px solid gray; } PAGES { display: table-cell; padding: 0.3em; border: 1px solid gray; } PRICE { display: table-cell; padding: 0.3em; border: 1px solid gray; }

140 Εμφάνιση δεδομένων σε πίνακα

141 Πηγές, Acknowledgement Michael J. Young, «XML Βήμα-Βήμα» (μετάφραση, εκδ. Κλειδάριθμος)