Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία <div> και <span>, ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ Στην τεχνολογία των CSS, οι κανόνες στυλ (style rules) εκφράζουν τα χαρακτηριστικά στυλ ενός HTML στοιχείου Ένα σύνολο κανόνων στυλ ονομάζεται φύλλο στυλ (style sheet) Style rules are easy to write and interpret 1
Σύνταξη CSS κανόνων στυλ Οι κανόνες στυλ αποτελούνται από δύο μέρη: έναν επιλογέα (selector) και μια δήλωση (declaration) Ο επιλογέας καθορίζει το στοιχείο στο οποίο εφαρμόζεται ο κανόνας Η δήλωση καθορίζει την ιδιότητα (property) που μορφοποιείται και την ακριβή της τιμή (value) Η ιδιότητα είναι ένα χαρακτηριστικό του στοιχείου Εφαρμόζοντας CSS κανόνες σε HTML έγγραφα Υπάρχουν τρεις τρόποι για να εφαρμόσετε CSS κανόνες σε HTML έγγραφα Η ιδιότητα style κάποιου συγκεκριμένου HTML στοιχείου (inline styling) Οι CSS κανόνες εφαρμόζονται μόνο στο συγκεκριμένο HTML στοιχείο Το στοιχείο <style> στο head τμήμα του HTML εγγράφου (embedded/internal styling) Οι CSS κανόνες εφαρμόζονται στο συγκεκριμένο HTML έγγραφο Εξωτερικό φύλλο στυλ (external styling) Οι CSS κανόνες μπορούν να εφαρμοστούν σε πολλαπλά HTML έγγραφα 2
Εισάγοντας CSS κανόνες σε HTML έγγραφα Σύνδεση με εξωτερικό φύλλο στυλ Εισάγεται στο <head> τμήμα του εγγράφου Λέει στο browser που θα βρει το εξωτερικό φύλλο στυλ <link rel= stylesheet type= text/css href= myformat.css > Συνδυασμός πολλαπλών φύλλων στυλ Επιτρέπει την εισαγωγή κανόνων στυλ από άλλα φύλλα στυλ Προηγείται όλων των εσωτερικών κανόνων στυλ,, διαφορετικά αγνοείται από το browser <style type="text/css"> @import url("imported.css"); p { color : #f00; } </style> Κληρονομικότητα στην εφαρμογή κανόνων στυλ Όταν ένας κανόνας εφαρμόζεται σε ένα html στοιχείο τότε αυτομάτως εφαρμόζεται (κληρονομείται) λ ί και σε όσα στοιχεία είναι ενσωματωμένα μέσα σε αυτό το πατρικό στοιχείο Εξαιρούνται τα ενσωματωμένα στοιχεία για τα οποία έχει ρητά δηλωθεί κάποιος διαφορετικός κανόνας Στο διπλανό σχήμα, αν εφαρμόσω ένα κανόνα στυλ στο στοιχείο <ul>, τότε θα εφαρμοστεί και στο <li>, εκτός αν δηλώσω άλλο κανόνα για τα <li> 3
Βασικές τεχνικές επιλογής Εφαρμογή κανόνων σε συγκεκριμένους επιλογείς Ο ακόλουθος κανόνας εφαρμόζεται μόνο στα ς ς φ ρμ ζ μ στοιχεία <h1> (ονομάζονται type selectors): 4
Ομαδοποίηση επιλογέων Ο ακόλουθος κανόνας επιλέγει τα στοιχεία h1 και h2: h1, h2 {color: green;} Συνδυασμός δηλώσεων Οι ακόλουθοι κανόνες στυλ κάνουν το κείμενο των στοιχείων <p> 12 point και μπλε: στοιχείων <p> 12 point και μπλε: p {color: blue;} p {font-size: 12pt;} Αυτοί οι δύο κανόνες στυλ μπορούν να εκφρασθούν και πιο απλά: p {color: blue; font-size: 12pt;} 5
Επιλογείς απόγονοι Ένας επιλογέας απόγονος γ ς( (descendant selector) επιτρέπει να προσδιορίσεις το ακριβές πλαίσιο στο οποίο εφαρμόζεται ο κανόνας Για να προσδιορίσεις ότι τα στοιχεία <em> εμφανίζονται μπλε μόνο όταν ενσωματώνονται σε <p> στοιχεία, χρησιμοποιούμε αυτό τον κανόνα: p em {color: blue;} Προχωρημένες τεχνικές Προχωρημένες τεχνικές επιλογής 6
Χρησιμοποιώντας την ιδιότητα επιλογέα Class Η ιδιότητα class μας επιτρέπει να γράψουμε κανόνες και εν συνεχεία να τους εφαρμόσουμε σε ομάδες σε ομάδες επιλεγμένων στοιχείων Πρώτα ορίζουμε στο html έγγραφο τα στοιχεία που ανήκουν σε μια συγκεκριμένη κλάση (δίνοντας την ίδια τιμή στην ιδιότητά τους class Μετά δηλώνουμε CSS κανόνες ςγια αυτή την κλάση, χρησιμοποιώντας τον ειδικό τελεστή. που δείχνει ότι ο επιλογέας είναι επιλογέας κλάσης (class selector) Χρησιμοποιώντας την ιδιότητα επιλογέα Class <p class= quote >This is the first paragraph of the document. It has a different style based on the special class selector.</p> 7
Χρησιμοποιώντας την ιδιότητα επιλογέα id Η διαφορά μεταξύ id και class είναι ότι μια συγκεκριμένη τιμή id εμφανίζεται μία μόνο φορά σε ένα έγγραφο ενώ η ίδια τιμή class μπορεί να εμφανιστεί πολλαπλές φορές Για τα id χρησιμοποιούμε τον ειδικό τελεστή # Δουλεύοντας με <div> Το στοιχείο <div> επιτρέπει να ορίσετε λογικές ενότητες μέσα σε ένα έγγραφο με το δικό του όνομα και ιδιότητες στυλ Μπορείτε να χρησιμοποιήσετε το <div> σε συνδυασμό με την ιδιότητα class για να δημιουργήσετε προσαρμοσμένα block στοιχεία 8
Δουλεύοντας με <div> (συν.) Το ακόλουθο παράδειγμα ορίζει μια ενότητα που ονομάζεται column ως επιλογέα για τον κανόνα: div.column {width: 200px; height: auto; padding: 15px; border: thin solid;} Παράλληλα, ορίζεις ένα <div> στοιχείο στο έγγραφο και χρησιμοποιείς την ιδιότητα class για να ορίσεις ακριβώς τον τύπο της ενότητας <div class="column">this division displays as a column of text in the browser window. </div> 9
Δουλεύοντας με <span> Το <span> στοιχείο επιτρέπει να ορίσεις inline (και όχι block) στοιχεία σε ένα έγγραφοπου έχουν το δικό τους όνομα και ιδιότητες στυλ Τα ένθετα (inline) στοιχεία ενσωματώνονται στη γραμμή του κειμένου, όπως π.χ. το στοιχείο <b> Δουλεύοντας με <span> (συν.) Το ακόλουθο παράδειγμα προσδιορίζει ένα στοιχείο <span> που ονομάζεται logo ως επιλογέα για τον κανόνα: span.logo {color:red;} Παράλληλα, ορίζεται ένα <span> στοιχείο στο έγγραφο και χρησιμοποιείται η ιδιότητα class για να οριστεί ακριβώς ο τύπος του ένθετου στοιχείου Welcome to the <span class= logo >Wonder Software</span> Web site. 10
Χρησιμοποιώντας τις ψευδο κλάσεις των συνδέσμων Οι ψευδοκλάσεις (pseudo classes) :link and :visited σου επιτρέπουν να αλλάξεις τα χαρακτηριστικά για νέους συνδέσμους που δεν έχεις ακόμα επισκεφτεί (:link) καθώς και για εκείνους που έχεις ήδη επισκεφθεί (:visited) Αυτές οι ψευδο κλάσεις εφαρνμόζονται στα <a> στοιχεία με μια href ιδιότητα Οι ακόλουθοι κανόνες αλλάζουν τα χρώματα των υπερσυνδέσμων: :link {color: red;} :visited {color: green;} Χρησιμοποιώντας τη ψευδο κλάση hover Η ψευδ0 κλάση:hover σου επιτρέπει να εφαρμόσεις ένα στυλ που εμφανίζεται στο χρήστη όταν «δείχνει» σε ένα στοιχείο με το δείκτη του ποντικιού Είναι μια χρήσιμη βοήθεια πλοήγησης ως προσθήκη στο στοιχείο <a>, καθώς ο σύνδεσμος εμφανίζεται τονισμένος όταν ο χρήστης δείχνει σε αυτόν με το ποντίκι 11
a:hover {background color: yellow;} Χρησιμοποιώντας το ψευδοστοιχείο :first letter Χρησιμοποιήστε το :first letter ψευδοστοιχείο για να εφαρμόσετε κανόνες στυλ στο πρώτο γράμμα ενός στοιχείου 12
Χρησιμοποιώντας το ψευδοστοιχείο :first line p:first line { color:#ff0000; font variant:small caps; } Άσκηση #1 Κατεβάστε το 01_sections_paragraphs_original.html Δημιουργήστε ένα εξωτερικό css αρχείο ώστε: Το background χρώμα σε όλο το έγγραφο να γίνει #f7d8e8 fd88 Το χρώμα κειμένου των επικεφαλίδων να γίνει πράσινο Το χρώμα κειμένου των παραγράφων να γίνει γκρι Όλες οι παράγραφοι έκτος εκείνων που έπονται των τίτλων ενοτήτων να έχουν εσοχή πρώτης γραμμής (text indent) 10px και περιθώριο από την προηγούμενη παράγραφο (margin top) 30px To πρώτο γράμμα των παραγράφων που έπονται των τίτλων ενοτήτων να έχει χρώμα #ff0000 και μέγεθος xxlarge 13
Άσκηση #1 Άσκηση #1 (συνέχεια) Το background χρώμα μιας λογικής ενότητας του εγγράφου που περιλαμβάνει τις 3 παραγράφους του 1 ου section θα γίνει #FCF και το περιθώριο από τα αριστερά 20px Το background χρώμα μιας λογικής ενότητας του εγγράφου που περιλαμβάνει τις 2 παραγράφους του 2 ου section θα γίνει #FC9, το περιθώριο από τα αριστερά 20px και το πλάτος 90% του συνολικού πλάτους της οθόνης Το κείμενο blood pressure στην 1 η παράγραφο του 1 ου section να γίνει σύνδεσμος προς τη σελίδα: http://www.heart.org/ και το κείμενο losing your hair hi στην 1 η παράγραφο του 2 ου section σύνδεσμος προς τη: http://www.stophairlossnow.co.uk/ 14
Άσκηση #1 (συνέχεια) Όλοι οι σύνδεσμοι να έχουν χρώμα #903 όταν δεν τους έχουν ακόμα επισκεφτεί και #390 όταν τους έχουν πλέον επισκεφτεί Η υπογράμμιση των links να εξαφανίζεται όταν ο δείκτης του ποντικιού περνάει από πάνω τους Τα στοιχεία h2 να αλλάζουν το χρώμα τους σε #C60 και να γίνονται italics όταν ο δείκτης του ποντικιού περνάει από πάνω τους Η πρώτη σειρά των πρώτων παραγράφων των sections να μορφοποιηθεί με χρώμα κειμένου #ff0000 και γράμματα (font variant) small caps 15