Γαβαλάς Δαμιανός dgavalas@aegean.gr

Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εαρινό εξάμηνο Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική δομή των σελίδων και το περιεχόμενο Η τεχνολογία των Επικαλυπτόμενων Φύλλων Στυλ (Cascading Style Sheets, CSS) ορίζει την εμφάνιση του περιεχομένου Το φύλλο στυλ είναι απλά ένα αρχείο κειμένου που περιέχει έναν ή περισσότερους κανόνες που καθορίζουν μέσω των ιδιοτήτων και τιμών- πως ακριβώς θα εμφανιστούν συγκεκριμένα στοιχεία του (X)HTML εγγράφου Υπάρχουν CSS ιδιότητες για τον έλεγχο βασικών μορφοποιήσεων, όπως το μέγεθος και χρώμα γραμματοισειράς, ιδιότητες διάταξης (layout) όπως ο ακριβής προσδιορισμός της θέσης εμφάνισης, κλπ Τα CSS ενσωματώνουν και δυναμικές ιδιότητες που επιτρέπουν σε στοιχεία να εμφανίζονται και να εξαφανίζονται, χρήσιμες για drop-down μενού και άλλα διαδραστικά στοιχεία 1

Κατασκευή κανόνων στα CSS Επιλογέας (selector) Δήλωση (declaration) h1 {color: red;} Ιδιότητα (property) Τιμή (value) Δήλωση πολλαπλών κανόνων: h1 {color: red; background: yellow;} Εισαγωγή σχολίων σε CSS: /* images will have a solid red 4 pixels border */ img {border: 4px solid red} Δημιουργία εξωτερικών CSS αρχείων Γιατί εξωτερικά CSS αρχεία; Είναι ιδανικά για να δώσουν μια κοινή μορφή και διάταξη (σχεδιασμό) σε όλες τις ιστοσελίδες του web site μας Τα CSS αρχεία είναι αρχεία κειμένου (text files) με κατάληξη *.css Σύνδεση εξωτερικού CSS αρχείου σε XHTML αρχεία: <link rel= stylesheet type= text/css href= myformat.css > H παραπάνω δήλωση τοποθετείται στο <head> του XHTML εγγράφου Όταν γίνεται μια αλλαγή σε ένα εξωτερικό CSS αρχείο τότε αυτόματα όλα τα XHTML αρχεία που συνδέονται σε αυτό ενημερώνονται 2

Εφαρμόζοντας styles τοπικά Επιτρέπει τον προσδιορισμό κανόνων μορφοποίησης για συγκεκριμένα στοιχεία XHTML εγγράφων, εσωτερικά στο έγγραφο <p>first paragraph bla bla bla</p> <p style="background-color:green; color:red; font-size:16px; text-align:center">second paragraph bla bla bla</p> 3

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: έλεγχος διάταξης σελίδων (Ι) Ιδιότητα Περιγραφή Τιμές margin-top Πάνω περιθώριο ενός στοιχείου Μέγεθος, margin-right Δεξί περιθώριο ενός στοιχείου Μέγεθος, margin-bottom Κάτω περιθώριο ενός στοιχείου Μέγεθος, margin-left margin Αριστερό περιθώριο ενός στοιχείου Ορίζει όλα τα περιθώρια ενός στοιχείου (ισοδυναμεί με τη χρήση των 4 παραπάνω ιδιοτήτων) Μέγεθος, Δέχεται μία ως 4 τιμές Τιμές: μονάδες μέτρησης όπως px (pixels), in (ίντσες), mm (χιλιοστά), cm (εκατοστά), και άλλες Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: έλεγχος διάταξης σελίδων (ΙΙ) Ιδιότητα Περιγραφή Τιμές padding-top padding-right padding-bottom padding-left padding Κενό μεταξύ του πάνω περιθωρίου και του περιεχομένου ενός στοιχείου Κενό μεταξύ του δεξιού περιθωρίου και του περιεχομένου ενός στοιχείου Κενό μεταξύ του κάτω περιθωρίου και του περιεχομένου ενός στοιχείου Κενό μεταξύ του αριστερού περιθωρίου και του περιεχομένου ενός στοιχείου Ορίζει όλα τα κενά από όλα τα περιθώρια ενός στοιχείου (ισοδυναμεί με τη χρήση των 4 παραπάνω ιδιοτήτων) Μέγεθος, Μέγεθος, Μέγεθος, Μέγεθος, Δέχεται μία ως 4 τιμές 4

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: έλεγχος διάταξης σελίδων (ΙΙΙ) <STYLE TYPE="text/css">  </STYLE> Παράδειγμα Ρύθμιση ιδιοτήτων πλαισίου width bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla aaaaaaaaaaaaaaaaaaaaaaaa height Πλαίσιο περιεχομένου padding (παραγέμισμα): προσθέτει κενό διάστημα έξω από το περιεχόμενο του στοιχείου, μέσα από το περίγραμμα (αν υπάρχει) border (περίγραμμα): εμφανίζει ορατό περίγραμμα (σε διάφορα στυλ), γύρω από το στοιχείο, έξω από το παραγέμισμα (αν υπάρχει) Margin (περιθώριο): διαφανές περιθώριο γύρω από το στοιχείο, έξω από το ορατό περίγραμμα (αν υπάρχει) 5

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: φόντο (υπόβαθρο) εγγράφων (I) Ιδιότητα Περιγραφή Τιμές color background -color background -image background Χρώμα προσκηνίου για ένα στοιχείο (ισχύει κυρίως για το κείμενο ενός στοιχείου) Χρώμα φόντου (παρασκηνίου) για ένα στοιχείο Καθορίζει αν η εικόνα φόντου επαναλαμβάνεται σε πλευρική παράθεση και, αν ναι, πως Ισοδυναμεί με χρήση όλων των προηγούμενων ιδιοτήτων χρώμα χρώμα ή transparent repeat (επανάληψη οριζόντια/κάθετα), repeatx (επανάληψη κάθετα), repeat-y (επανάληψη κάθετα), no-repeat Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: φόντο (υπόβαθρο) εγγράφων (ΙI) <STYLE TYPE="text/css">  </STYLE> Παράδειγμα 6

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: περιγράμματα (borders) (I) Ιδιότητα Περιγραφή Τιμές borderstyle bordercolor borderwidth border Ορίζει το στυλ για τα 4 περιγράμματα ενός στοιχείου Το χρώμα για τα 4 περιγράμματα ενός στοιχείου Το πάχος για τα 4 περιγράμματα ενός στοιχείου Ισοδυναμεί με χρήση όλων των προηγούμενων ιδιοτήτων (ορίζει το πάχος, χρώμα και στυλ των 4 περιγραμμάτων) none, dotted, dashed, solid, double,. χρώμα ή transparent thin, medium, thick Δέχεται μία ως 3 τιμές Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: περιγράμματα (borders) (ΙI) <STYLE TYPE="text/css">  </STYLE> Παράδειγμα 7

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: στυλ γραμματοσειράς Ιδιότητα Περιγραφή Τιμές font-family H οικογένεια χαρακτήρων Arial, Times, serif, sansserif, fantasy,. font-size Μέγεθος γραμματοσειράς Απόλυτο, σχετικό ή ποσοστιαίο μέγεθος font-style Στυλ γραμματοσειράς oblique (με κλίση), italic (πλάγια), normal (κανονικό) font-weight Πάχος γραμματοσειράς bold (έντονο), bolder (εντονότερο), lighter (λεπτό), normal (κανονικό) font-variant font Γραμματοσειρά με μικρά κεφαλαία ή κανονικά Ισοδυναμεί με χρήση όλων των προηγούμενων ιδιοτήτων small-caps (μικρά κεφαλαία), normal (κανονικό) Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: στοίχιση κειμένου Ιδιότητα Περιγραφή Τιμές lineheight verticalalign Απόσταση μεταξύ γραμμών (διάστιχο) Κατακόρυφη στοίχιση ενός στοιχείου ή σε σχέση με το πατρικό του ή σε σχέση με το ύψος της γραμμής του π.χ. =2 (διπλάσιο από το μέγεθος γραμματοσειράς) ή =15px (15 pixels) baseline, middle, sub, super, text-top, textbottom ή top, bottom text-align Στοίχιση κειμένου left, center, right, justify textdecoration textindent letterspacing «Διακόσμηση» γραμματοσειράς Εσοχή της πρώτης γραμμής Διάστημα μεταξύ χαρακτήρων underline, overline, linethrough, blink Απόλυτο μέγεθος ή ποσοστό επί το πλάτος του στοιχείου Απόλυτο μέγεθος ή normal 8

Συνηθισμένες ιδιότητες/τιμές για φύλλα στυλ: στυλ γραμματοσειράς & στοίχιση κειμένου <STYLE TYPE="text/css">  </STYLE> Παράδειγμα Άσκηση #1 Σώστε τοπικά το ΧΗΤΜL αρχείο 01_original.html και δημιουργήστε ένα εξωτερικό φύλλο στυλ ώστε: Το background χρώμα σε όλο το έγγραφο να είναι #eef ενώ το περιθώριο από όλα τα άκρα της σελίδας να είναι 2em Οι επικεφαλίδες h1 να εμφανίζονται με γραμματοσειρά Arial, μέγεθος γραμματοσειράς 1.37em, χρώμα navy, κεντρική στοίχιση Το ίδιο για τις επικεφαλίδες h2 αλλά με μέγεθος γραμματοσειράς 1em Οι παράγραφοι με γραμματοσειρά Verdana, χρώμα:#909, εσοχή πρώτης σειράς 1.5em και στοίχιση justify Τα links που δεν έχουν ακόμα επισκεφτεί να είναι bold με χρώμα #74269D Ta links όταν περνάει ο δείκτης του ποντικιού από πάνω τους με background χρώμα #66FF66 και χωρίς υπογράμμιση Πίσω από το div με id="back" να εμφανίζεται η εικόνα background.gif (επαναλαμβανόμενη) 9

Άσκηση #1 Άσκηση #1 10

Άσκηση #2 Κατεβάστε το 02_table_original.html και δημιουργήστε ένα εξωτερικό CSS που να το μορφοποιεί ως εξής: το περιθώριο από όλα τα άκρα της σελίδας να είναι 2em Το κείμενο σε όλον τον πίνακα να είναι στοιχισμένο στο κέντρο, η γραμματοσειρά Verdana και το χρώμα #336600 Στην πρώτη σειρά του πίνακα να έχει background χρώμα #CC66FF και οι χαρακτήρες να είναι bold Όταν ο δείκτης του ποντικιού περνάει πάνω από μια γραμμή (εκτός της επικεφαλίδας) το να αποκτάει background χρώμα #CCCCFF Το κείμενο στο εσωτερικό των κελιών να έχει περιθώριο από το περίγραμμα 1em Άσκηση #2 11

Άσκηση #2 Ο ρόλος της επικάλυψης: όταν κανόνες συγκρούονται Τι γίνεται όταν δύο ή περισσότεροι κανόνες εφαρμόζονται σε ένα συγκεκριμένο στοιχείο; Εφαρμόζεται η αρχή της επικάλυψης (cascade) και λαμβάνονται υπόψη χαρακτηριστικά όπως η κληρονομικότητα (inheritance), προσδιορισμός (specifity) και θέση (location) Κληρονομικότητα: αν π.χ. ορίσουμε ότι όλα τα <p> θα έχουν μπλε χρώμα τότε όλα τα στοιχεία που εσωκλείονται στα <p> θα κληρονομήσουν το μπλε χρώμα της γραμματοσειράς Προσδιορισμός: όσο πιο συγκεκριμένος είναι ο επιλογέας (selector) τόσο ισχυρότερος Θέση: μερικές φορές ο προσδιορισμός δεν αρκεί για να καθορίσει τον κανόνα-νικητή («ισοπαλία»). Τότε νικάει ο κανόνας που βρίσκεται τελευταίος. 12

CSS: κληρονομικότητα p {font-family: "Trebuchet MS", "Helvetica, sans-serif; font-weight: bold; color:#3366cc; } img {float:left;margin-right:10px} <img src="blueflax.jpg" alt="blue Flax (Linum lewisii)" width="194" height="174" /> <p>i am continually amazed at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of <em>ephemeral</em>.</p> Για τα στοιχεία <em> δεν έχει οριστεί χρώμα CSS: κληρονομικότητα Τα στοιχεία <em> Έγιναν μπλε 13

CSS: προσδιορισμός και θέση κανόνων p {color:red} p.group {color:blue} p#one {color:green} p#one{color:magenta} <p>να ένα γενικό p στοιχείο. θα γίνει κόκκινο</p> <p class="group">αυτό είναι ένα group-class p στοιχείο!...σε αυτό εφαρμόζονται δύο κανόνες αλλά ο p.group είναι πιο συγκεκριμένος και η παράγραφος θα γίνει μπλε.</p> <p class="group" id="one">ένα p στοιχείο με id=one. Σε αυτό εφαρμόζονται 4 κανόνες. Οι πιο συγκεκριμένοι είναι οι τελευταίοι 2 και θα κερδίσει ο τελευταίος (το χρώμα θα γίνει magenta)</p> CSS: προσδιορισμός και θέση κανόνων 14

Άσκηση #3 Στo αρχείο 03_original.html αλλάξτε την εμφάνιση του περιγράμματος της δεύτερης εικόνας κάνοντάς το πράσινο διακεκομμένο (dashed green) δίνοντας ένα διαφορετικό class στη δεύτερη εικόνα και προσθέτοντας ένα νέο κανόνα στο εξωτερικό CSS 15