Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική δομή των σελίδων και το περιεχόμενο Η τεχνολογία των Επικαλυπτόμενων Φύλλων Στυλ (Cascading χ γ μ ( g Style Sheets, CSS) ορίζει την εμφάνιση του περιεχομένου Το φύλλο στυλ είναι απλά ένα αρχείο κειμένου που περιέχει έναν ή περισσότερους κανόνες που καθορίζουν μέσω των ιδιοτήτων και τιμών πως ακριβώς θα εμφανιστούν συγκεκριμένα στοιχεία του (X)HTML εγγράφου Υπάρχουν CSS ιδιότητες για τον έλεγχο βασικών μορφοποιήσεων, όπως το μέγεθος και χρώμα γραμματοισειράς, ιδιότητες διάταξης (layout) όπως ο ακριβής προσδιορισμός της θέσης εμφάνισης, κλπ Τα CSS ενσωματώνουν και δυναμικές ιδιότητες που επιτρέπουν σε στοιχεία να εμφανίζονται και να εξαφανίζονται, χρήσιμες για dropdown μενού και άλλα διαδραστικά στοιχεία 1
Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Υπάρχουν αρκετές διαφορετικές εκδόσεις των CSS Η έκδοση που υποστηρίζεται καλύτερα και καλύπτουμε εδώ είναι η CSS 2 Οι περισσότεροι μοντέρνοι browsers υποστηρίζουν τα περισσότερα στοιχεία της CSS 2 Τα CSS μπορούν να δημιουργηθούν και αποθηκευθούν έξω από ένα XHTML έγγραφο (ιστοσελίδα) και ύστερα να εφαρμοστούν σε όλες τις σελίδες του site απ ευθείας Αυτό σημαίνει ευελιξία, δύναμη και αποδοτικότητα και εξοικονομεί πολύ χρόνο Για να αξιοποιηθούν καλύτερα οι δυνατότητες που παρέχουν τα CSS οι ιστοσελίδες πρέπει να είναι καλά δομημένες Τα CSS «εκτιμούν» τη λιτότητα και «νοικοκυροσύνη» της XHTML καθώς ξέρουν τι ακριβώς πρέπει να κάνουν Κατασκευή κανόνων στα 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} 2
Οι τιμές των ιδιοτήτων Κάθε CSS ιδιότητα (property) ακολουθεί διαφορετικούς κανόνες σχετικά με τις τιμές που μπορεί να δεχτεί: Αριθμούς, ακεραίους, σχετικές τιμές, ποσοστά,, URLs, χρώματα,, Προκαθορισμένες τιμές, π.χ.: display: block inline none...ή border: none Μήκη και ποσοστά, π.χ.: font size: 24px; ή font size: 80% (80 % του πατρικού στοιχείου) ή fontsize: 2em (διπλάσιο του πατρικού στοιχείου) URLs, π.χ.: : background: url(bg_flax.jpg) Χρώματα, π.χ.: color: red; ή color: #59007F; ή color: rgb(35%,0%,50%); Που γράφονται οι CSS κανόνες;;; Κάθε browser έχει τα δικά του προκαθορισμένα (default) στυλ Αν θέλουμε να γράψουμε δικούς μας CSS κανόνες στυλ: 1. Μπορούμε να τους εφαρμόσουμε σε ένα συγκεκριμένο XHTML στοιχείο (inline styling) 2. Μπορούμε να τους εισάγουμε στην κορυφή του XHTML εγγράφου (θα εφαρμοστούν σε κάποια στοιχεία αυτού του εγγράφου) ενσωματωμένα φύλλα στυλ (internal styling) 3. Μπορούμε να τους αποθηκεύσουμε σε εξωτερικά αρχεία και να τους εφαρμόσουμε σε πολλαπλά XHTML αρχεία (external styling) 3
Εφαρμόζοντας 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> Ενσωματωμένα φύλλα στυλ 4
Δημιουργία εξωτερικών CSS αρχείων Γιατί εξωτερικά CSS αρχεία; Είναι ιδανικά για να δώσουν μια κοινή μορφή και διάταξη (σχεδιασμό) σε όλες τις ιστοσελίδες του web site μας Τα CSS αρχεία είναι αρχεία κειμένου (text files) με κατάληξη *.css Σύνδεση εξωτερικού CSS αρχείου σε XHTML αρχεία: <link rel= stylesheet type= text/css href= myformat.css > H παραπάνω δήλωση τοποθετείται στο <head> του XHTML εγγράφου Όταν γίνεται μια αλλαγή σε ένα εξωτερικό CSS αρχείο τότε αυτόματα όλα τα XHTML αρχεία που συνδέονται σε αυτό ενημερώνονται Δημιουργία εξωτερικών CSS αρχείων Τα URLs που δείχνουν το εξωτερικό CSS αρχείο είναι σχετικά, δηλαδή περιλαμβάνουν τη διαδρομή (path) που πρέπει να ακολουθήσει κανείς από το φάκελο του XHTML αρχείο για να «πάει» στο CSS αρχείο, π.χ. href= myfolder/myfile.css Τα εξωτερικά CSS υπερνικώνται από CSS κανόνες που βρίσκονται στο εσωτερικό των εγγράφων Ένα XHTML αρχείο μπορεί να συνδέεται με πολλαπλά εξωτερικά CSS αρχεία (το τελευταίο είναι το «ισχυρότερο») Κανείς μπορεί να προσφέρει πολλαπλές εκδοχές εξωτερικών CSS και να αφήσει τους επισκέπτες να αποφασίσουν ποια προτιμούν 5
Εναλλακτικά εξωτερικά CSS αρχεία <link rel="stylesheet" type="text/css" href="img.css" title="solid" /> <link rel="stylesheet" type="text/css" text/css href="dashed.css css" title="dashed" /> <link rel="alternate stylesheet" type="text/css" href="dotted.css" title="dotted" /> Άσκηση #1 Δημιουργήστε ένα εξωτερικό CSS αρχείο που ορίζει ένα κανόνα εισαγωγής κόκκινου περιγράμματος στις εικόνες με συμπαγή γραμμή πάχους 4 pixels: img {border: 4px solid red} Δημιουργείστε ένα XHTML αρχείο στο οποίο θα εισάγετε δύο εικόνες (first.jpg, second.jpg) και εφαρμόστε το παραπάνω εξωτερικό CSS αρχείο Αλλάξτε την εμφάνιση του περιγράμματος της δεύτερης εικόνας κάνοντάς το πράσινο διακεκομμένο (dashed green): Ορίζοντας ένα νέο κανόνα (style) στη δεύτερη εικόνα 6
Ο ρόλος της επικάλυψης: όταν κανόνες συγκρούονται Τι γίνεται όταν δύο ή περισσότεροι κανόνες εφαρμόζονται σε ένα συγκεκριμένο στοιχείο; Εφαρμόζεται η αρχή της επικάλυψης (cascade) και λαμβάνονται υπόψη χαρακτηριστικά όπως η κληρονομικότητα (inheritance), προσδιορισμός (specifity) και θέση (location) Κληρονομικότητα: αν π.χ. ορίσουμε ότι όλα τα <p> θα έχουν μπλε χρώμα τότε όλα τα στοιχεία που εσωκλείονται στα <p> θα κληρονομήσουν το μπλε χρώμα της γραμματοσειράς Προσδιορισμός: όσο πιο συγκεκριμένος είναι ο επιλογέας (selector) τόσο ισχυρότερος Θέση: μερικές φορές ο προσδιορισμός δεν αρκεί για να καθορίσει τον κανόνα νικητή («ισοπαλία»). Τότε νικάει ο κανόνας που βρίσκεται τελευταίος. 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> δεν έχει οριστεί χρώμα 7
CSS: κληρονομικότητα Τα στοιχεία <em> Έγιναν μπλε Τι σημαίνει όρος «επικαλυπτόμενα» ( cascading ); Ο όρος επικαλυπτόμενα σημαίνει ότι μπορούμε να συνδυάσουμε πληροφορίες για τα στυλ ενός εγγράφου από περισσότερες από μία πηγές Τα εξωτερικά φύλλα στυλ μπορούν να «διασυνδέονται» με πολλές σελίδες, εφαρμόζοντας σε όλες τους ίδιους κανόνες στυλ Τα ενσωματωμένα φύλλα στυλ εφαρμόζουν κανόνες σε μια μεμονωμένη ιστοσελίδα Τα ένθετα (inline) στυλ εφαρμόζουν κανόνες σε συγκεκριμένα σημεία μιας ιστοσελίδας Σε ένα έγγραφο μπορούμε να συνδυάσουμε και τις τρεις παραπάνω μεθόδους για την εφαρμογή κανόνων στυλ 8
Τι σημαίνει όρος «επικαλυπτόμενα» ( cascading ); (συνέχεια) Η έννοια της επικάλυψης έγκειται στο γεγονός ότι μια αυστηρή ιεραρχία στην εφαρμογή κανόνων στυλ, όταν χρησιμοποιούνται και οι τρεις δυνατοί τρόποι εφαρμογής τους, δηλαδή κάποιοι κανόνες έχουν προτεραιότητα έναντι άλλων: Τα στυλ που ορίζονται σε εξωτερικό στυλ εφαρμόζονται πρώτα στη σελίδα Τα στυλ που ορίζει το ενσωματωμένο φύλλο στυλ εφαρμόζονται μετά και υπερισχύουν έναντι των στυλ που εφαρμόστηκαν προηγουμένως Τα ένθετα στυλ υπερισχύουν έναντι των εξωτερικών και ενσωματωμένων στυλ και εφαρμόζονται τελευταία Παράδειγμα επικάλυψης κανόνων στυλ <style type="text/css"> <! <! body {font family: Arial, Helvetica, sans serif; color: green} p {color: blue; line height: 2; text indent: 30px; text align: center} > </style> mystyle.css 9
Παράδειγμα επικάλυψης κανόνων στυλ (συνέχεια) <HTML> <HEAD> <TITLE>The Bookworm Bookshop</TITLE> <LINK REL="stylesheet" HREF="mystyle.css"> <style type="text/css"> h1 {text decoration: underline} p {text align: right} </style></head> Εξωτερικό αρχείο στυλ (mystyle.css) για τη μορφοποίηση του εγγράφου Ενσωματωμένο στυλ για μορφοποίηση επικεφαλίδων και παραγράφων Χρήση ένθετων στυλ για τη μορφοποίηση της <BODY> πρώτης επικεφαλίδας και παραγράφου <h1 style="text decoration: line through">πρώτη ρ ηεπικεφαλίδα</h1> <p style="text align: left; font weight: bold">πρώτη παράγραφος. Πρώτη παράγραφος. Πρώτη παράγραφος. Πρώτη παράγραφος. Πρώτη...</p> <h1>δεύτερη επικεφαλίδα</h1> <p> <Δεύτερη παράγραφος. Δεύτερη παράγραφος. Δεύτερη παράγραφος. Δεύτερη παράγραφος. Δεύτερη παράγραφος. Δεύτερη... </p> </BODY></HTML> Παράδειγμα επικάλυψης κανόνων στυλ (συνέχεια) 10
Άσκηση #2 Ανοίξετε το αρχείο 02_sample.html που βρίσκεται στη σελίδα του μαθήματος Δημιουργήστε ένα εξωτερικό CSS αρχείο που ορίζει ένα κανόνα που θα εφαρμόζεται σε όλες τις παραγράφους, ορίζοντας χρώμα υποβάθρου γκρι και πλάτος 350 pixels: p {background color:gray; width=350px} Εφαρμόστε το παραπάνω εξωτερικό CSS αρχείο στο αρχείο 02_sample.html. Τι αλλαγές θα γίνουν στο αρχικό σας αρχείο; Εφαρμόστε και το CSS της προηγούμενης άσκησης (μορφοποίηση borders εικόνων) Ορίστε εσωτερικά ένα δεύτερο κανόνα για τις παραγράφους, ορίζοντας χρώμα υποβάθρου καφέ και πλάτος 800 pixels p {background color:brown; width=800px} Άσκηση #2(συνέχεια) Τι αλλαγές παρατηρείτε; Ποιος κανόνας θα υπερισχύσει (εξωτερικός/εσωτερικός); Στην ετικέτα της 1 ης παραγράφου εισάγετε κανόνα ορίζοντας χρώμα υποβάθρου πράσινο. Τι χρώμα θα έχει η κάθε παράγραφος μετά την εφαρμογή του κανόνα ετικέτας; <p style= background color:green"> Τι χρώμα έχει το κείμενο σε κάθε παράγραφο; Στην ετικέτα της 3 ης παραγράφου εισάγεται κανόνα για κείμενο μπλε χρώματος <p style= "color:blue"> Ποιο θα είναι το τελικό χρώμα και χρώμα κειμένου σε κάθε παράγραφο; Ποιος κανόνας ευθύνεται σε κάθε περίπτωση; 11