CSS Cascading Style Sheets Προγρ/σμός Εφαρμογών Διαδικτύου (version: 13/03/2016) Φ. Κόκκορας / Καθ. Εφαρμογών Τμήμα Μηχανικών Πληροφορικής ΤΕ ΤΕΙ Θεσσαλίας Τι Είναι τα CSS; 2 Cascading (στοιβαγμένα) Style Sheets (CSS) είναι Ένα σύνολο κανόνων για την παρουσίαση εγγράφων HTML, XHTML και γενικότερα XML, στον χρήστη. Παρουσίαση σημαίνει Εμφάνιση και χωροθέτηση των στοιχείων στην οθόνη (υπολογιστή, smartphone, tablet) ή σε εκτυπωτή, κτλ Περιθώρια, διαστήματα, χρώματα, γραμματοσειρές, κτλ...αλλά και αναπαραγωγή των στοιχείων με χρήση συνθετικής ομιλίας (δε μας ενδιαφέρει στο μάθημα)! Στο μάθημα θα εστιάσουμε στους κανόνες παρουσίασης και χωροθέτησης στην οθόνη.
Κίνητρα Χρήσης 3 Διαχωρισμός περιεχομένου και εμφάνισης του Ετικέτες όπως η font κυριάρχησαν στις ιστοσελίδες στην προσπάθεια κατασκευής εμφανίσιμων σελίδων. Τυχόν αλλαγές όμως έγιναν δύσκολες και χρονοβόρες. Με τα CSS όλη η πληροφορία για τη μορφοποίηση των HTML στοιχείων μπορεί να αποθηκευτεί σε ένα εξωτερικό αρχείο που συνδέεται με την εκάστοτε σελίδα Έτσι το ίδιο περιεχόμενο (ιστοσελίδα) μπορεί να προβάλλεται με τελείως διαφορετικό τρόπο (π.χ. σε smartphones, desktop PCs, κτλ) απλά αλλάζοντας το σύνολο κανόνων CSS. Άλλα πλεονεκτήματα Ακριβέστερος έλεγχος εμφάνισης και χωροθέτησης Λιγότερος κώδικας, μικρότερες σελίδες CCS Μέρος A Μορφοποίηση με CSS
Δήλωση Στυλ 5 Η ακριβής σύνταξη/δήλωση ενός στυλ εξαρτάται από το που γίνεται. Περιλαμβάνει όμως σίγουρα: ένα ή παραπάνω ζεύγη ιδιότητας (property) και τιμής (value) που χωρίζονται (τα ζεύγη) με τον χαρακτήρα ";" Παράδειγμα (σκέτων) ζευγαριών: color: red font-size: 18px; color: green; font-family: "Trebuchet MS", sans-serif; Αν υπάρχουν κενά στην τιμή, τη βάζουμε σε double quote. Πως ορίζουμε σε ποιο html στοιχείο ή στοιχεία θέλουμε να εφαρμοστεί ένα στυλ; αν είναι στυλ γραμμής το ορίζουμε στο html στοιχείο που θέλουμε αλλιώς φτιάχνουμε φύλλα-με-στυλ (style sheets) όπου το όνομα του στυλ/κανόνα παίζει καθοριστικό ρόλο στο που θα εφαρμοστεί! Στυλ Γραμμής (inline) 6 Ορίζονται ως ιδιότητα μέσα σε ένα στοιχείο (X)HTML χρησιμοποιώντας την ιδιότητα style Δεν προτείνεται, γιατί αναμιγνύει περιεχόμενο με μορφοποίηση. Αποδεκτό για τοπικές διορθώσεις αλλά αυτό συνήθως σημαίνει κακή σχεδίαση! Παραδείγματα in-line δήλωσης css <h1 style="color: red">κόκκινη Επικεφαλίδα</h1> <p style="font-size: 12px; font-family: 'Trebuchet MS', sans-serif">κείμενο παραγράφου που θα μορφοποιηθεί με το στυλ που ορίζεται στον css κανόνα.</p>
Φύλλα με Στυλ (Style Sheets) 1/2 7 Ενσωματωμένο στη σελίδα φύλλο στυλ Ορίζονται μέσα στο στοιχείο <head> ως εξής: <style type="text/css">.εδώ.γράφω.τα.στυλ. </style> το κόκκινο τμήμα της δήλωσης, μπορεί να παραληφθεί Κατάλληλο για μια σελίδα μόνο, η οποία είτε είναι μοναδική (μόνη της), είτε έχουμε μόνο σε αυτή πρόσβαση, ή έχει κάποιες ιδιαίτερες απαιτήσεις μορφοποίησης που δεν χρειάζονται αλλού Φύλλα με Στυλ (Style Sheets) 2/2 8 Εξωτερικό φύλλο στυλ (text αρχείο.css) Ιδανικό για τη διαχείριση ολόκληρου Web site Γίνεται include στις ιστοσελίδες ως εξής: <link href="my_style.css" rel="stylesheet" type="text/css"/> Η παραπάνω δήλωση (που κάνει include) μπαίνει ΜΟΝΟ μέσα στο <head> </head> τμήμα της ιστοσελίδας. επιτρέπονται πολλαπλές δηλώσεις <link> Το my_style.css στο παράδειγμα, είναι το αρχείο με στυλ/κανόνες που φορτώνουμε.
Σχόλια στη Σύνταξη Στυλ 9 Εισαγωγή σχολίων στα στυλ ως εξής /* σχόλιο */ Παράδειγμα /* σχόλιο (α) */ p {text-align: center; /* σχόλιο (β) */ color: black; font-family: arial;} Μπορεί να εκτίνονται σε πολλές γραμμές κειμένου. Παράδειγμα p { /* text-align: center; color: black; */ font-family: arial; } Κανόνες Στυλ 10 Ένα φύλλο με στυλ περιλαμβάνει κανόνες στυλ selector {property1: value1; } π.χ. Ο επιλογέας (selector) καθορίζει σε ποια html στοιχεία θα εφαρμοστεί το στυλ που ακολουθεί μέσα στα { } Αυτά τα html στοιχεία προσδιορίζονται από: 1. το όνομα τους (δηλ. την ετικέτα/tag) 2. την κλάση (class) ή το αναγνωριστικό (id) τους 3. τη θέση τους στην HTML ιεραρχία 4. την ψευδοκλάση ενός στοιχείου 5. τις ιδιότητες και τιμές ενός στοιχείου Σημείωση: να γνωρίζετε άριστα τα 3 πρώτα!
1. Επιλογέας ίδιος με html ετικέτα 11 Πρακτικά επανακαθορίζει τον τρόπο απεικόνισης συγκεκριμένου HTML στοιχείου. Εφαρμόζεται αυτόματα σε όλες τις html ετικέτες με ίδιο όνομα! Παραδείγματα h1 {color: blue;} p {text-align: center; color: red;} Ανάθεση στυλ σε πολλά στοιχεία ταυτόχρονα: h2,h3,h4 {color: green;} ΠΡΟΣΟΧΗ! Χωρισμένα με κόμμα! Ανάθεση στυλ σε όλα τα HTML στοιχεία: * {color: red;} Αν το χρησιμοποιήσετε, κάντε το στην αρχή των δηλώσεων στυλ γιατί αλλιώς μπορεί να αναιρέσει άλλες ρυθμίσεις που έχετε κάνει! 2a. Επιλογέας με άλλο όνομα (όχι tag) 12 Έτσι ονομασμένα στυλ μπορεί να εφαρμοστούν σε οποιοδήποτε html στοιχείο θέλουμε, αρκεί να το ζητήσουμε μέσω του html attribute: class Παράδειγμα κλάσης που "κεντράρει" το κείμενο:.center {text-align: center} Δεν είναι συνδεδεμένη με δεδομένο HTML στοιχείο! Στη σελίδα τη χρησιμοποιούμε ως εξής: <h1 class="center">κεντραρισμένη επικεφαλίδα.</h1> <p class="center">κεντραρισμένη παράγραφος.</p> Μπορούμε όμως να ορίσουμε και πιο ειδικά στυλ για χρήση σε πολλά στοιχεία, συγκεκριμένου τύπου.
13 Ορισμός στυλ για στοιχεία συγκεκριμένου τύπου: p.right {text-align: right;} Το στυλ.right μπορεί να εφαρμοστεί μόνο σε html στοιχεία p p.bold {font-weight: bold;} Στη σελίδα, τα χρησιμοποιούμε ως εξής: <p class="right">παράγραφος με δεξιά στοίχιση.</p> <p class="bold">παράγραφος με έντονη γραφή.</p> Μπορούμε όμως και να τα συνδυάσουμε: <p class="right bold"> Παράγραφος με έντονη γραφή και δεξιά στοίχιση. </p> ΠΡΟΣΟΧΗ: χωρίς κόμμα 2b. Επιλογέας με όνομα ίδιο με id 14 Αν ο επιλογέας έχει όνομα ίδιο με την τιμή του attribute id ενός html στοιχείου (με # μπροστά) τότε το στυλ ισχύει μόνο για αυτό το στοιχείο! Άρα δεν θα μπορούν να συνδυαστούν 2 στυλ βασισμένα σε ids σε ένα στοιχείο (όπως στο slide 13), γιατί δεν μπορεί ένα στοιχείο να έχει 2 ids!!! Άρα, έστω ένα συγκεκριμένο (με id) div: <div id="header">my home page</div> Θέλουμε να φτιάξουμε ένα στυλ που κάνει έντονη γραφή για αυτό το συγκεκριμένο HTML στοιχείο: #header {font-weight: bold} Tα ονόματα των ids πρέπει να είναι μοναδικά σε κάθε σελίδα και καλό είναι να μην ξεκινούν με αριθμό.
3. Σύνθετος επιλογέας (html ιεραρχία) 15 Ο σύνθετος επιλογέας προκύπτει (κυρίως) συνδυάζοντας αποδεκτούς επιλογείς ορισμένους όπως είδαμε μέχρι τώρα (δηλ. με html tag name, με class και με id). Παράδειγμα: το επόμενο στυλ κάνει όλα τα em στοιχεία που βρίσκονται εντός p στοιχείων να έχουν πράσινο text: p em {color: green;} ΠΡΟΣΟΧΗ! Χωρίς κόμμα! Άλλο παράδειγμα (τι κάνει;):.mystyle p {color: #333;} Άρα έτσι αναθέτουμε κανόνες με βάση την html ιεραρχία!!! Ειδικότεροι ορισμοί (σπανιότεροι σε χρήση): Για στοιχεία με πατέρα δεδομένο στοιχείο γράφουμε: p > em {color: red;} Για "αδελφικά" στοιχεία (δηλ. στο ίδιο HMLT επίπεδο) με αυτή τη σειρά: h1 + p {color: red;} 4. Επιλογέας - Ψευδοκλάση Ορίζει στυλ για ιδιαίτερες καταστάσεις στοιχείων, όπως π.χ. το στοιχείο <a> a:link {color: red;} απλός σύνδεσμος a:visited {color: orange;} πρόσφατη επίσκεψη a:hover {color: green;} το mοuse είναι πάνω του Τα ορίζουμε πάντα με την παραπάνω σειρά! Έχει σημασία η σειρά γιατί ένας υπερσύνδεσμος μπορεί να είναι σε πολλές καταστάσεις ταυτόχρονα. Για τις καταστάσεις και περισσότερες ψευδοκλάσεις δείτε στο W3Schools στη ενότητα CSS Selectors: http://www.w3schools.com/cssref/css_selectors.asp 16
5. Επιλογέας βάση html attribute-value 17 Μπορούμε να ορίσουμε στυλ για HTML στοιχεία που έχουν συγκεκριμένη ιδιότητα (attribute) ή συγκεκριμένο ζεύγος ιδιότητας-τιμής. Όχι δηλαδή μόνο με βάση τις ιδιότητες id και class. Ορισμός στυλ για στοιχεία με δεδομένη ιδιότητα: [title] { color:blue; } Δηλ. κάθε στοιχείο με ιδιότητα title θα έχει μπλε κείμενο! Ορισμός στυλ για στοιχεία με δεδομένο ζεύγος ιδιότητα-τιμή: [title="τει Λάρισας"] { color:red; } Μόνο τα HTML στοιχεία με τιμή "ΤΕΙ Λάρισας" στην ιδιότητα title, θα έχουν κόκκινο χρώμα. Συνδυασμός στυλ σε html στοιχείο 18 Σε ένα HTML στοιχείο μπορεί να εφαρμοστούν ταυτόχρονα, στυλ που προέρχονται από διαφορετικά επίπεδα ορισμού. Παράδειγμα, στην παράγραφο <p id="foo" class="myclass" title="moo" >hello</p> θεωρητικά μπορεί να ορίζουν μορφοποίηση οι κανόνες #foo,.myclass, [title] και [title="moo] που δρουν συμπληρωματικά! Αυτή είναι άλλωστε και η έννοια cascading! Σε πολύπλοκους ορισμούς, με πολλαπλά επίπεδα, δεν θα είστε σε θέση να προβλέψετε το αποτέλεσμα! Με F12 σε browser μπορείτε να δείτε πώς προκύπτει η τελική τιμή! Αποφεύγετε καλύτερα τους πολύπλοκους ορισμούς! Να έχετε υπόψη τους ακόλουθους 3 κανόνες:
Εξειδίκευση και Κληρονομικότητα 19 1. Για την ρύθμιση δεδομένης CSS ιδιότητας, τα στυλ γραμμής (inline) υπερισχύουν των στυλ που είναι δηλωμένα στη σελίδα και αυτά υπερισχύουν των στυλ εξωτερικού αρχείου (included). 2. Πολλές ιδιότητες κληρονομούνται από ένα στοιχείο γονέα σε ένα στοιχείο παιδί. π.χ. ένα <p> που δεν έχει δηλωμένο δικό του μέγεθος γραμμάτων, μορφοποιείται πιθανώς εξαιτίας του πατρικού του στοιχείου που ίσως έχει τέτοια ρύθμιση. Αν ούτε στα προγονικά στοιχεία υπάρχει σχετική δήλωση τότε θα ισχύει κάποια default ρύθμιση (από τις προδιαγραφές της HTML ή (σπάνια) του browser. 3. Αν σε στοιχείο δρουν πολλοί κανόνες και θέτουν ο καθένας διαφορετική τιμή στην ίδια ιδιότητα, τότε επικρατεί η ρύθμιση του πιο εξειδικευμένου. Οι κανόνες εξειδίκευσης δίνονται στη συνέχεια: Προτεραιότητες σε επιλογείς CSS 20 Στα επόμενα, το πιο πάνω είναι πιο ειδικό/ισχυρό. Οι ρυθμίσεις με!important επικρατούν πάντα. Αποφεύγετε τη χρήση του. Καταστρέφει το cascading! #foo {color:red!important;} In-line κανόνες (δηλωμένοι στο style=" ") <p style="width: 600px;">Hello World</p> Κανόνες με βάση κάποιο id (με # στον επιλογέα) #header {color: blue; font-size: 2em;} Κανόνες με επιλογέα class, attribute ή pseudoclass.mystyle {color: black;} Κανόνες με επιλογέα όνομα HTML στοιχείου. h2 { color: green; }
Παράδειγμα Επικάλυψης Στυλ 21 <style> p { color: black;} #green { color: green; }.blue {color: blue;}.orange {color: orange;} Super SOS </style> <div style="color: teal;"> <p id="green" class="orange blue" style="color: red;">hello!</p> </div> Τι χρώμα είναι το κείμενο της παραγράφου; Απάντηση: red Επικρατεί η τοπική δήλωση (red), πιο πριν ο κανόνας του id (green), πιο πριν ο κανόνας της κλάσης (orange) 1, πιο πριν ο κανόνας της ετικέτας p (black) και πιο πριν το κληρονομημένο χρώμα από το div (teal). 1. Η κλάση orange δηλώθηκε μετά την blue και επικρατεί έναντι αυτής. Μονάδες Μήκους 22 Απόλυτα Μεγέθη in (inches), cm (centimeters), (mm) millimeters pt (points), ισούται με 1/6 της ίντσας pc (picas), ισούται με το 1/72 της ίντσας Σχετικά Μεγέθη (τα κυριότερα) px (pixels), εξαρτώνται από την ανάλυση της οθόνης em, μονάδα μέτρησης είναι το μέγεθος ενός χαρακτήρα γραμμένου με την default γραμματοσειρά στο δεδομένο σημείο, είτε αυτή είναι τοπικά ορισμένη ή κληρονομείτε από ανώτερα επίπεδα πολύ σημαντική μονάδα!!! % ποσοστό της τιμής του ίδιου μεγέθους στο πατρικό στοιχείο (π.χ. width: 80%;) Οι μονάδες γράφονται κολλητά στον αριθμό (σε τιμή 0 δεν χρειάζονται)
Χρώματα 23 17 λέξεις κλειδιά (προκαθορισμένα βασικά χρώματα) red, fuchsia, blue, maroon, green, aqua, orange, olive, silver, white, purple, yellow, teal, navy, black, gray, lime Παραδείγματα τιμών σε RGB 1. #0000FF 2. #00F (συντομογραφία του 1) 3. rgb(0,0,255) 4. rgb(0%, 0%, 100%) 5. #42A7B2 Χρώμα Κειμένου και Υπόβαθρο/Φόντο 24 Χρώμα Κειμένου: ιδιότητα color p {color: green} H ιδιότητα color κληρονομείται Χρώμα Φόντου σε block: ιδιότητα background-color table {background-color: green} H ιδιότητα background-color ΔΕΝ κληρονομείται Εξ' ορισμού έχει την τιμή transparent δηλαδή τα block από μόνα τους είναι διάφανα, δεν έχουν φόντο
Εικόνα ως Υπόβαθρο/Φόντο (Ι) 25 Η ιδιότητα background-image Μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο. Παράδειγμα: body {background-image: url('image.gif')} Προσοχή Αν ορισθεί και χρώμα και εικόνα ως υπόβαθρο, τότε θα εμφανισθεί το χρώμα, μέχρι να φορτωθεί η εικόνα Επανάληψη εικόνας Ιδιότητα background-repeat, με επιτρεπτές τιμές repeat, repeat-x, repeat-y, no-repeat Προκαθορισμένη τιμή είναι η repeat Εικόνα ως Υπόβαθρο/Φόντο (ΙΙ) 26 Όταν scrollάρει η σελίδα με τις μπάρες κύλισης (scroll bars) τι γίνεται με το φόντο σελίδας: background-attachment:fixed Το φόντο μένει ακίνητο! background-attachment:scroll Το φόντο scrollάρει και αυτό! Προκαθορισμένη τιμή είναι η fixed. Απόσταση από την πάνω αριστερά γωνία Ιδιότητα background-position, με επιτρεπτές τιμές ζεύγη x y Δυνατή τιμή x: απόσταση από αριστερά, %, left, center, right Δυνατή τιμή y: απόσταση από κορυφή, %, top, center, bottom Προκαθορισμένη τιμή είναι η left top Αv δοθεί μία μόνο τιμή, η δεύτερη θεωρείται center
Block και Inline Παρουσίαση Στοιχείων 27 Παρουσίαση block (display: block) Ξεκινάνε πάντα κάτω από το προηγούμενο (όπως μια παράγραφος) Καταλαμβάνουν όλο το πλάτος του γονέα τους. Δεν μπορούμε να τοποθετήσουμε κάτι δίπλα τους στην κανονική ροή (normal flow) σχεδίασης της σελίδας! Συνήθως τα block στοιχεία έχουν block παρουσίαση Δηλαδή ορθογώνια κάποιων διαστάσεων ρητά δηλωμένων ή που προκύπτουν από την υπόλοιπη σελίδα. Παρουσίαση in-line (display: inline) Εμφανίζονται στην τρέχουσα γραμμή (στη ροή κειμένου) Θα αλλάξουν γραμμή χωρίς να δημιουργήσουν κενά όταν τελειώσει το πλάτος της τρέχουσας γραμμής Συνήθως τα inline στοιχεία έχουν inline παρουσίαση Μορφοποίηση Κειμένου με CSS 28 Θα δούμε πώς ρυθμίζονται με CSS τα ακόλουθα: Γραμματοσειρές Μέγεθος, στυλ, βάρος και διακόσμηση Μικρά και Κεφαλαία Διάστιχο (spacing) απόσταση διαδοχικών γραμμών σε παράγραφο Απόσταση Χαρακτήρων-Λέξεων (kerning) Εσοχές (indents) Λευκά κενά Στοίχιση κειμένου Μικρά, κεφαλαία, διακόσμηση
Γραμματοσειρές (1/2) 29 Ορίζονται με την ιδιότητα font-family h1, h2 {font-family: Arial} p {font-family: "Palatino Linotype"} Εισαγωγικά για γραμματοσειρά με πολλές λέξεις Προσοχή! Η γραμματοσειρά θα πρέπει να υπάρχει στο σύστημα του χρήστη, αλλιώς χρησιμοποιείται η προκαθορισμένη γραμματοσειρά του browser με πιθανώς αμφίβολα αισθητικά αποτελέσματα! Βάζουμε περισσότερες γραμματοσειρές (2 ή 3) p {font-family: "Trebuchet MS", Arial} Αν δεν βρεθεί η πρώτη, θα ζητηθεί η δεύτερη. Η τελευταία πρέπει να είναι αρκετά γενική ώστε να μπορεί το λειτουργικό σύστημα να βρει έστω μια παρόμοια! Γραμματοσειρές (2/2) 30 Γενικές γραμματοσειρές Μηχανισμός ανάγκης προκειμένου να διατηρηθεί το ύφος της γραμματοσειράς όταν δεν βρεθεί η ίδια! Υπάρχουν 3 βασικές: serif (Times New Roman, Georgia) (με «μουστάκια») οι γραμμές των γραμμάτων δεν έχουν παντού ίδιο πάχος sans-serif (Arial, Verdana) (χωρίς «μουστάκια») οι γραμμές των γραμμάτων έχουν παντού ίδιο πάχος monospace (Courier New, Lusida Console) (ίσου πλάτους) κάθε γράμμα καταλαμβάνει ίδιο πλάτος (σαν γραφομηχανή!) πχ. h2 {font-family: Verdana, Arial, sans-serif} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: serif σε τυπωμένα βιβλία sans-serif σε οθόνη/web
Μέγεθος Χαρακτήρων (1/2) 31 Απόλυτο μέγεθος Με μονάδες μέτρησης ίντσες (in), εκατοστά (cm), χιλιοστά (mm), points (pt), picas (pc) h1 {font-size: 2cm} Με λέξεις κλειδιά (προκαθορισμένα μεγέθη) xx-small, x-small, small, medium, large, x-large, xx-large h1 {font-size: x-large} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: Τα απόλυτα μεγέθη θα πρέπει να αποφεύγονται γιατί: επιβάλλονται στις ρυθμίσεις μεγέθους που πιθανώς έχει ορίζει στον browser, χρήστης με προβλήματα όρασης το αποτέλεσμα επηρεάζεται από τα χαρακτηριστικά της συσκευής (τα pixels είναι μικρότερα στα smartphones απ'ότι στην tv) Μέγεθος Χαρακτήρων (2/2) 32 Σχετικό μέγεθος Σε pixel (εξαρτάται από την ανάλυση οθόνης) p {font-size: 16px} Σχετικό με το default μέγεθος χαρακτήρων στο σημείο που γράφουμε. h2 {font-size: 1.5em}.myVeryBig {font-size: 400%} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: Η χρήση em συσχετίζει ένα μέγεθος με άλλο (με το default της περιοχής). Αυτό επιτρέπει στήσιμο σελίδας με όλα τα μεγέθη να εξαρτώνται μεταξύ τους κάτι που οδηγεί σε σελίδες που εύκολα μετατρέπονται (ή είναι έτοιμες) για προβολή σε οθόνες κάθε μεγέθους. Αλλάζουμε το default μέγεθος και όλα αναπροσαρμόζονται!
Στυλ Χαρακτήρων 33 Η ιδιότητα font-style.normal {font-style: normal}.emph1 {font-style: italic}.emph2 {font-style: oblique} Θεωρητική διαφορά italic και oblique Τα italic σχεδιάζονται απ την αρχή από άνθρωπο Τα oblique παράγονται αυτόματα από τον υπολογιστή αν δεν υπάρχει η italic, θα παραχθεί η oblique Που χρειάζεται το στυλ normal; Σε περίπτωση που θέλουμε να επαναφέρουμε το normal στυλ μέσα σε μια ενότητα κειμένου που έχει στυλ italic ή oblique. Βάρος Χαρακτήρων 34 H ιδιότητα font-weight.bold {font-weight: bold}.normal {font-weight: normal} Ορισμός του βάρους με τιμές Πολλαπλάσια του 100 από 100 έως 900 Η τιμή 400 αντιστοιχεί στο φυσιολογικό βάρος Η τιμή 700 αντιστοιχεί στο έντονο βάρος Π.χ..extrastrong {font-weight: 900} Ορισμός του βάρους σε σχέση με το γονέα.stronger {font-weight: bolder}.lighter {font-weight: lighter}
Διακόσμηση Χαρακτήρων 35 Η ιδιότητα text-decoration.underline {text-decoration: underline}.overline {text-decoration: overline}.strike {text-decoration: line-through}.blink {text-decoration: blink}.none {text-decoration: none} Παράδειγμα a:link, a:visited {text-decoration: none} Κάνει όλους τους συνδέσμους (είτε τους έχουμε επισκεφτεί είτε όχι) να μην έχουν υπογράμμιση. Μικρά και Κεφαλαία 36 Η ιδιότητα font-variant.sc {font-variant: small-caps}.normalvariant {font-variant: normal} Η ιδιότητα text-transform.capitalize {text-transform: capitalize}.uppercase {text-transform: uppercase}.lowercase {text-transform: lowercase}.none {text-transform: none}
Στοίχιση Κειμένου 37 Η ιδιότητα text-align left, right, center, justify Εφαρμόζεται μόνο σε στοιχεία τύπου block που παίρνουν μέσα τους κείμενο. Δεν έχει νόημα να στοιχίσουμε in-line κείμενο (π.χ. δυο λέξεις στη ροή μιας παραγράφου)!!!!!!! Πρέπει αυτές να είναι μόνες τους μια παράγραφος και να στοιχίσουμε την παράγραφο. Απόσταση Χαρακτήρων και Λέξεων 38 H ιδιότητα word-spacing h1 {word-spacing: 3em;} Η ιδιότητα letter-spacing p {letter-spacing: 2px;} Για επιστροφή στην κανονική απόσταση Θέτουμε την τιμή 0 ή normal στην απόσταση Αρνητικές τιμές Έχουν ως αποτέλεσμα την επικάλυψη χαρακτήρων Οι ιδιότητες αυτές κληρονομούνται στα παιδιά Στις σχετικές μονάδες κληρονομείται η προκύπτουσα τιμή και όχι η σχέση με τη default γραμματοσειρά.
Λευκά Κενά (White Spaces) 39 Για να φαίνονται όλα τα κενά και οι αλλαγές γραμμών όπως και στον κώδικα p {white-space: pre;} Για να μην γίνεται αλλαγή γραμμής στα κενά p {white-space: nowrap;} Π.χ. μέσα σε κελί πίνακα Για την φυσιολογική θεώρηση των κενών και των αλλαγών γραμμών (τα επιπλέον αγνοούνται) p {white-space: normal;} Εσοχές 40 Η ιδιότητα text-indent Σε σχέση με το μέγεθος των χαρακτήρων p {text-indent: 3.5em} Απόλυτη τιμή p {text-indent: 10px} Σε σχέση με το πλάτος του στοιχείου γονέα p {text-indent: 10%} Θετικές τιμές για την ιδιότητα δημιουργούν την κλασική αριστερή εσοχή πρώτης γραμμής παραγράφου. Αρνητικές τιμές δημιουργούν την κρεμαστή εσοχή πρώτης γραμμής (δηλαδή η πρώτη σειρά ξεκινά αριστερότερα από τις υπόλοιπες!). Για αφαίρεση της εσοχής σε κάποιο στοιχείο, θέτουμε στην ιδιότητα την τιμή 0.
Διάστιχο με την Ιδιότητα line-height 41 Σε σχέση με το μέγεθος της γραμματοσειράς Το μέγεθος προκύπτει από την τιμή επί την σχετική μονάδα μέτρησης. p {line-height: 150%} p {line-height: 1.5em} Το μέγεθος προκύπτει από την τιμή επί το μέγεθος γραμμάτων (font-height) που ισχύει: p {line-height: 1.5} Απόλυτο μέγεθος σε οποιαδήποτε, μη σχετική, μονάδα μέτρησης p {line-height: 0.3in} Μοντέλο Κουτιού (Box Model) 42 Κάθε στοιχείο θεωρείται ως παραλληλόγραμμο κουτί, το οποίο περιέχει τις εξής περιοχές: περιεχόμενο (content), το οποίο περιβάλλεται από το παραγέμισμα (padding), το οποίο περιβάλλεται από το περίγραμμα (border), το οποίο περιβάλλεται από το περιθώριο (margin) Χαρακτηριστικά του μοντέλου Τo margin είναι πάντα διάφανο και δεν περιορίζονται απαραίτητα εντός του πατρικού html στοιχείου. Βλ. άσκηση 03 το κενό μεταξύ main και footer Το border μπορεί να έχει διάφορα στυλ. Τυχόν φόντο (background) σε στοιχείο, επικαλύπτει και την περιοχή του padding (πρακτικά, όλα τα εντός border)
Απεικόνιση του Box Model 43 Ιδιοτροπίες IE<7 ως προς Box Model 44 Το width σε block element αφορά στο χώρο που διατίθεται για το περιεχόμενο (content) (προδιαγραφές W3C). Σε παλιούς Internet Explorer (<7) συμπεριλάμβανε και τις περιοχές padding και border. Έπρεπε να γράφονται 2 CSS (IE και άλλοι) Νεώτεροι ΙΕ τηρούν τις προδιαγραφές. Για αποφυγή του προβλήματος μην βάζετε border/padding σε div χωροθέτες, που έχουν ρητά δηλωμένο width. Αν σύγχρονος ΙΕ θέλετε σε δεδομένη σελίδα να συμπεριφερθεί σαν παλιός, βάλτε στο head της σελίδας: <meta http-equiv="x-ua-compatible" content="ie=7">
Γεωμετρία Περιεχομένου (content) 45 Πλάτος της περιοχής περιεχομένου Απόλυτο μήκος p {width: 200px} Ποσοστό σε σχέση με το πλάτος του στοιχείου γονέα p {width: 90%} Υπολογισμένο αυτόματα (auto) από τον browser προκαθορισμένη ρύθμιση, p {width: auto} Ύψος της περιοχής περιεχομένου Απόλυτο ύψος p {height: 200px} Υπολογισμένο αυτόματα (auto) προκαθορισμένη ρύθμιση, p {height: auto} Πρόσφατα attributes: min-width και min-height εξασφαλίζουν ελάχιστες τιμές πλάτους και ύψους Γεωμετρία Περιγράμματος (border) (1/2) Η ιδιότητα border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset Απαιτείται για την εμφάνιση του περιγράμματος Το υπόβαθρο του στοιχείου φαίνεται μέσα από το περίγραμμα όταν αυτό δεν είναι συνεχής γραμμή (π.χ. dotted) Η ιδιότητα border-width Ορίζουμε πάχος περιγράμματος με αριθμητική τιμή και μονάδες μήκους: π.χ. 2px Προκαθορισμένες λεκτικές τιμές: thin, medium, thick Η ιδιότητα border-color Ορίζουμε χρώμα περιγράμματος 46
Γεωμετρία Περιγράμματος (border) (2/2) 47 Σύνταξη με σύντομο τρόπο border-color: red green orange blue; Σειρά ρολογιού με αρχή ώρα 12:00: επάνω, δεξιά, κάτω, αριστερά Σύνταξη αναλυτικά με χρήση υπό-ιδιοτήτων border-top-color: red; border-right-width: thick; Μπορούμε να συνδυάσουμε πολλές ιδιότητες border-top: solid red 5px; border-right: yellow dotted; border: thick dashed orange; όχι όμως με σύντομο τρόπο (ωρολογιακά)! Γεωμετρία Περιθωρίου (Margin) (1/2) 48 Το μέγεθος του margin για κάθε πλευρά μπορεί να είναι Απόλυτο μήκος Ποσοστό σε σχέση με το μήκος της πλευράς του στοιχείου γονέα Υπολογισμένο αυτόματα (auto) Στις δύο πρώτες περιπτώσεις, καθορίζεται ως εξής: p {margin: 10px;} Όλες οι πλευρές θα έχουν margin 10px p {margin: 2em 20px;} 2em πάνω και κάτω, 20px αριστερά και δεξιά p {margin: 10px 20% 30px;} 10px πάνω, 20% του γονέα δεξιά και αριστερά, 30px κάτω p {margin: 10px 20px 30px 40px;} 10px πάνω, 20px δεξιά, 30px κάτω, 40px αριστερά (ωρολογιακά)
Γεωμετρία Περιθωρίου (Margin) (2/2) 49 Υπο-ιδιότητες για καθορισμό margin μιας πλευράς: margin-top, margin-right, margin-bottom, margin-left H επακριβής τιμή του auto εξαρτάται από το μέγεθος του περιεχομένου του κουτιού όπως αυτό έχει οριστεί με τις ιδιότητες width και height Μια συνήθης χρήση του auto είναι για οριζόντιο κεντράρισμα ενός block στοιχείου με δεδομένο width, μέσα στο πατρικό του (που προφανώς πρέπει να είναι πιο φαρδύ). Αν ένα κουτί τοποθετηθεί πάνω από ένα άλλο, τότε θεωρείται ότι ισχύει μόνο το μεγαλύτερο από τα δύο ενώ το άλλο λέμε ότι καταρρέει (collapse) Γεωμετρία Παραγεμίσματος (Padding) 50 Χρήσιμο για απομάκρυνση από το border του κειμένου που βρίσκεται μέσα στο content. Αποφεύγετε τη χρήση του σε δομικά div με ορισμένο width. Γενικά ισχύουν και εδώ όσα αναφέρθηκαν στα αντίστοιχα θέματα για το margin. Η τιμή του padding κάθε πλευράς μπορεί να είναι: Απόλυτο μήκος π.χ. 20px Σχετικό μήκος: em ή % ως προς το αντίστοιχο του γονέα Υπο-ιδιότητες για καθορισμό padding μιας πλευράς: padding-top, padding-right, padding-bottom, padding-left
Ορατότητα Στοιχείων 51 display:none το στοιχείο αγνοείται τελείως κατά τη σχεδίαση της σελίδας (σαν να μην υπάρχει στον κώδικα) έτσι αντιμετωπίζει ο browser τα HTML σχόλια visibility: hidden (ή visible) το στοιχείο καταλαμβάνει κανονικά τη θέση του στο χώρο της σελίδας αλλά, εφόσον visibility:hidden, δεν είναι ορατό. Είναι χρήσιμες ιδιότητες για δημιουργία εφέ απόκρυψης-εμφάνισης σε συνδυασμό με JavaScript Σύνοψη Κύριων Ορισμών για Κανόνες CSS 52 Το βασικότερο σημείο είναι ο επιλογέας! Αυτός καθορίζει το που θα δράσει ο κανόνας. Τα βασικά: Αν είναι html ετικέτα: ο κανόνας δρα αυτόματα σε τέτοια html στοιχεία, πχ h2 { padding: 10px; } Αν είναι με όνομα ίδιο με την τιμή της ιδιότητας id ενός html στοιχείου, τότε δρα αυτόματα μόνο σε αυτό το στοιχείο, πχ #someid { padding: 5px 10px; } <h1 id= someid >μπλα μπλα...<h1> Αν είναι με κάποιο άλλο όνομα με τελεία μπροστά τότε δρα μόνο σε όσα html στοιχεία το ζητήσουμε μέσω της ιδιότητας class. πχ.mycss { padding: 1em 1em 2em 1em } <p class= mycss >μπλα μπλα...<p> Αν συνδυάζει html ετικέτα και όνομα με τελεία, τότε δρα μόνο σε στοιχεία τέτοιας ετικέτας που όμως έχουν (το ζητάμε) και ιδιότητα class. πx ο κανόνας: p.foo { } <p class= foo >μπλα μπλα...<p> το class= foo μπαίνει μόνο σε p
Σύνοψη σε Διαδοχικούς Επιλογείς 53 σαλίας Όταν έχω διαδοχικούς επιλογείς ΟΧΙ χωρισμένους με κόμμα τότε πρόκειται για κανόνες που δρουν με βάση την HTML ιεραρχία: #xyz p.foo span {color:red;} Θα δράσει στα html στοιχεία με ετικέτα span που βρίσκονται μέσα σε στοιχείο με ετικέτα p και class="foo", που βρίσκεται μέσα σε στοιχείο με id="xyz". Δεν χρειάζεται να κάνουμε κάτι σε αυτό το span o κανόνας θα δράσει αυτόματα! Ακολουθεί παράδειγμα html κώδικα: <div id= xyz ><p class= foo >Πάρα <span>πολύ</span> εύκολο</p></div> Η λέξη «πολύ» θα τυπωθεί στην οθόνη με κόκκινα γράμματα. Όταν έχω διαδοχικούς επιλογείς χωρισμένους με κόμμα τότε πρόκειται για διαφορετικούς κανόνες με κοινές ρυθμίσεις. #xyz, p.foo, span {color:red;} (τριπλός κανόνας!) ΔΡΑ: αυτόματα σε όλα τα span. σε όλες τις παραγράφους (p) που θα βάλουμε class="foo", αυτόματα στο στοιχείο με id="xyx" (ένα θα είναι, τα id είναι μοναδικά) CCS Μέρος Β Χωροθέτηση με CSS
Διαρρύθμιση (Layout) με CSS 55 Πλεονεκτήματα σε σχέση με τους πίνακες Κεντρική διαχείριση εμφάνισης (σε css αρχείο). Εύκολη αναμόρφωση site (σε διαρρύθμιση και μορφοποίηση) με αλλαγή css αρχείου! Μικρότερου μεγέθους αρχεία HTML. Μειονεκτήματα σε σχέση με τους πίνακες Κάποιοι (πλέον παμπάλαιοι) browsers δεν υποστήριζαν σωστά τις css προδιαγραφές (π.χ. IE 5.x, ΙΕ6). Το πρόβλημα δεν υφίσταται πλέον (με σύγχρονους browsers). Καλό είναι να αποφεύγεται η χρήση των ιδιαίτερων css χαρακτηριστικών που υποστηρίζει κάθε browser. Προτιμείστε ό,τι υποστηρίζεται από όλους. Δόμηση της Σελίδας 56 Οι λογικές ενότητες (ζώνες χρήσης) μιας σελίδας θα πρέπει να οριοθετούνται με τη χρήση <div> π.χ. κεφαλίδα, κύριο τμήμα (περιεχομένου), πλαϊνό ή οριζόντιο τμήμα (πλοήγηση-menu), υποσέλιδο, κτλ στα δομικά div ορίζεται attribute id και μορφοποιούνται και χωροθετούνται με βάση δικό τους css κανόνα με επιλογέα το id (π.χ. #header { ρυθμίσεις } Το περιεχόμενο μέσα στις ζώνες χρήσης θα πρέπει να δομείται με κατάλληλες html ετικέτες, ανάλογα και τις ανάγκες. Στα επόμενα slides γίνεται μόνο αναφορά εννοιών. Δείτε οπωσδήποτε τα slides με τα παραδείγματα!
Κανονική Ροή, CSS, Πλεύση 57 Στην κανονική ροή (normal flow) τα block στοιχεία χωροθετούνται το ένα κάτω από το άλλο εντός του πατρικού, αρχίζοντας από πάνω-αριστερά τα inline στοιχεία χωροθετούνται στη ροή του κειμένου Στην τοποθέτηση με χρήση CSS τα blocks στοιχεία είτε είναι στην κανονική ροή είτε αφαιρούνται από αυτή και χωροθετούνται ως προς κάποιο σημείο αναφοράς (βλ. pdf με παραδείγματα ) Πλεύση (floating) H ιδιότητα float μετατοπίζει ένα στοιχείο αριστερά ή δεξιά εντός του πατρικού στοιχείου και επιτρέπει να σχεδιάζονται block στοιχεία το ένα δίπλα στο άλλο, κατά παράβαση της σχεδίασης με βάση την κανονική ροή. Τοποθέτηση Κουτιού/Block 58 Υπάρχουν 4 τρόποι τοποθέτησης ενός block 1. Στη φυσιολογική του θέση, σύμφωνα με τη ροή της HTML από πάνω προς τα κάτω (static positioning) 2. Καθορισμός επακριβών συντεταγμένων σε σχέση 1. είτε με το στοιχείο γονέα (absolute) 2. είτε με το παράθυρο του browser (fixed), 3. Μετακίνηση του κουτιού σε σχέση με την προκαθορισμένη θέση του στη ροή της HTML (relative) 4. Αλλοίωση στατικής (static) θέσης με χρήση float Επιπλέον, αν τα κουτιά επικαλύπτονται μεταξύ τους, τότε μπορεί να καθοριστεί η σειρά επικάλυψής τους (3 η διάσταση, z-index) (δεν θα το δούμε)
2.1 Απόλυτη Τοποθέτηση (absolute) 59 Για απόλυτη τοποθέτηση χρησιμοποιούμε Σε "πιο έξω" block (συνήθως στον γονέα) το: position: relative; χωρίς περαιτέρω τιμές αυτό είναι το block αναφοράς Στο υπό τοποθέτηση στοιχείο: position: absolute; και ένα ή παρακάτω ζεύγη ιδιότητας τιμής Ιδιότητα: top, right, bottom, left (δηλώνει την πλευρά) Τιμή: π.χ. top:2em; right:-2em; (δηλώνει την απόσταση του υπό τοποθέτηση block από τη δεδομένη πλευρά του block αναφοράς) Αν δεν οριστεί από εμάς block αναφοράς μέσω του position:relative; τότε γίνεται αυτόματα το <body>!!! Παράδειγμα Απόλυτης Τοποθέτησης 60 #div1 { border: solid thin black; background-color: #CACBCB; width: 300px; height: 150px; position: relative; } #div2 { border: dotted thin black; background-color: #BCE0C1; width: 100px; height: 50px; position: absolute; right: 1em; bottom: 1em; } <body> <div id="div1">div1 <div id="div2">div 2</div> </div> </body>
2.2 Σταθερή Τοποθέτηση (fixed) 61 Για σταθερή τοποθέτηση (fixed) χρησιμοποιούμε Στο υπό τοποθέτηση στοιχείο βάζουμε: position: fixed; Επιπλέον βάζουμε ένα ή περισσότερα ζεύγη ιδιότητας τιμής, όπου: η ιδιότητα δηλώνει την πλευρά: top, right, bottom, left η τιμή δηλώνει την απόσταση του υπό τοποθέτηση block από τη δεδομένη πλευρά του παραθύρου του browser. π.χ. top: 2em; bottom: -2em; Άρα η τοποθέτηση γίνεται με αναφορά την client area του browser, δηλ. το μέρος στο παράθυρο που απεικονίζει τη σελίδα (βλ. κόκκινο πλαίσιο στο επόμενο παράδειγμα). Προσοχή: Δεν κουνιέται με το scrolling!!! Παράδειγμα fixed Τοποθέτησης 62 #div1 { border: solid thin black; background-color: #CACBCB; width: 300px; height: 150px; } <body> <div id="div1">div1 <div id="div2">div 2</div> </div> </body> #div2 { border: dotted thin black; background-color: #BCE0C1; width: 100px; height: 50px; position: fixed; right: 1em; bottom: 1em; }
3. Σχετική Τοποθέτηση (relative) 63 Για σχετική τοποθέτηση (relative), στο υπό τοποθέτηση στοιχείο, χρησιμοποιούμε: το ζεύγος ιδιότητας τιμής: position: relative; ένα ή περισσότερα ζεύγη ιδιότητας τιμής, όπου η ιδιότητα δηλώνει την πλευρά top, right, bottom, left η τιμή δηλώνει την απόσταση του στοιχείου από εκείνη την πλευρά, από το πατρικό του στοιχείο π.χ. top: 2em; right: -2em; Το στοιχείο τοποθετείται αρχικά στη θέση που θα καταλάμβανε στη ομαλή ροή σχεδίασης και μετά μετατοπίζεται όπως λένε οι τιμές: Είναι σαν να το σπρώχνουμε από την πλευρά της ιδιότητας για την οποία δίνουμε τιμή. Αρνητικές τιμές ισοδυναμούν με έλξη! Προσοχή: Ο χώρος που καταλάμβανε αυτό το στοιχείο στην ομαλή ροή σχεδίασης παραμένει δεσμευμένος (και άδειος)!!! Παράδειγμα Σχετικής Τοποθέτησης 64 #div1 { border: solid thin black; background-color: #CACBCB; width: 300px; height: 150px; } #div2 { border: dotted thin black; background-color: #BCE0C1; width: 100px; height: 50px; position: relative; right: -30px; bottom: 0.5em; } Μετατοπίσεις: 0.5em σπρώξιμο από bottom 30px έλξη (λόγω του μείον) από right <body> <div id="div1">div1 <div id="div2">div 2</div> </div> </body>
4. Τοποθέτηση με float 65 Για τοποθέτηση με float χρησιμοποιούμε float:left; ( ή float:right; ) Το block στοιχείο που έχει ρύθμιση float: "παρκάρει" αριστερά (ή δεξιά) εντός του πατρικού επιτρέπει σε επόμενα block στοιχεία να απεικονιστούν δεξιά του (ή αριστερά του), εφόσον χωρούν! εκτός κι αν το επόμενο block στοιχείο δεν θέλει "παρέα" στην συγκεκριμένη του πλευρά βάζοντας clear:left (ή clear:right) Με clear:both σε block στοιχείο επαναφέρουμε τον τρόπο σχεδίασης για αυτό και τα επόμενα, σε normal flow. Δείτε οπωσδήποτε τo pdf με όλα τα σχετικά παραδείγματα! Παράδειγμα Τοποθέτησης με float 66 #div1 { border: solid thin black; width: 300px; height: 150px; } #div2 { border: dotted thin black; width: 100px; height: 50px; float: left; } #div3 { border: dotted thin black; width: 100px; height: 70px; float: right; }.clear { border: dotted thin black; clear: both; } <body> <div id="div1">div1 <div id="div2">div 2</div> <div id="div3">div 3</div> <div class="clear">div 4</div> </div></body>
Media Queries (CSS3) 67 Επιτρέπουν την ενσωμάτωση στη σελίδα μιας ομάδας κανόνων CSS, μόνο εάν ικανοποιείται μια συνθήκη. Τυπική Σύνταξη (για πλήρη περιγραφή δείτε W3Schools): @media mediatype and (media feature) {CSS code} Το τμήμα σε πλάγια γράμματα ορίζει την συνθήκη και έχει 2 μέρη. Τα mediatypes (all, screen, print, speech) καθορίζουν το μέσο. Τα media features ορίζουν τους περιορισμούς. max-width, min-width, orientation, device-aspect-ratio, κτλ Παράδειγμα: @media only screen and (max-width: 500px) { body { background-color: lightblue; }.center { text-align: center; } } Οι 2 κανόνες θα ενσωματωθούν μόνο για προβολή σε οθόνη (screen) και σε αναλύσεις ως 500px πλάτος. Media Queries 68 Μπορείτε επίσης να ενσωματώσετε υπό συνθήκη, εξωτερικό CSS αρχείο. Παράδειγμα: <link rel="stylesheet" media="only screen and (min-width: 480px)" href="mystylesheet.css"> Η χρήση των media queries απαιτεί οργάνωση! Κατανοείστε την λειτουργία τους σε απλά project. Πλέον η οδηγία είναι mobile first, δηλαδή τα sites να σχεδιάζονται έχοντας κατά νου τις μικρές συσκευές και η υποστήριξη μεγάλων οθονών να μπαίνει ως συμπλήρωμα (και όχι το ανάποδο).
Media Queries - Παραδείγματα 69 @media screen and (min-width: 600px) { <κανόνες> } Οι <κανόνες> θα ισχύουν σε πλάτος σελίδας από 600px και πάνω. @media screen and (min-width: 400px) and (max-width: 600px) { <κανόνες> } Οι <κανόνες> θα ισχύουν σε πλάτος σελίδας από 400px ως 600px Προσέξτε ότι εδώ είχαμε δήλωση με δύο περιορισμούς. @media screen and (max-width: 400px) { <κανόνες> } Οι <κανόνες> θα ισχύουν σε πλάτος σελίδας κάτω από 400px. @media print { <κανόνες> } Οι <κανόνες> θα ισχύουν μόνο στην εκτύπωση της σελίδας. Hint: βάζοντας display:none; σε ένα block, αυτό δεν θα εκτυπωθεί! Για πληρέστερη τεκμηρίωση των media queries δείτε στο http://www.w3schools.com/cssref/css3_pr_mediaquery.asp