CSS Εργαστήριο 5. Θέση και διάταξη

Transcript

1 Display - Επίδειξη CSS Εργαστήριο 5. Θέση και διάταξη Η ιδιότητα display καθορίζει πως και εάν ένα στοιχείο εμφανίζεται στην οθόνη. Τα περισσότερα στοιχεία, εξορισμού είναι είτε block είτε inline. Ένα στοιχείο που είναι block πάντα ξεκινάει σε μία νέα γραμμή και καταλαμβάνει όλο το πλάτος της σελίδας. Παραδείγματα τέτοιων στοιχείων: <div> <h1> - <h6> <p> <form> <header> <footer> <section> Ένα inline στοιχείο δεν ξεκινά από νέα γραμμή και καταλαμβάνει όσο χώρο όσο είναι απαραίτητο. Παραδείγματα inline στοιχείων: <span> <a> <img> Εκτός από τις παραπάνω τιμές, inline και block, ένα στοιχείο μπορεί να πάρει την τιμή none. Η τιμή αυτή εξαφανίζει το στοιχείο και είναι πολύ χρήσιμη σε συνδυασμό με JavaScript αφού μπορεί να εξαφανίζει και να επανεμφανίζει ένα στοιχείο χωρίς αυτό να χρειάζεται να διαγραφεί εντελώς. 1. Στη συνέχεια βλέπουμε τη χρήση της ετικέτας html <span> η οποία σε αναλογία με την <div> ομαδοποιεί αντικείμενα. Εξορισμού, όμως, η ιδιότητα display της έχει τιμή inline. Πρώτα δείτε την συμπεριφορά της χωρίς css και στη συνέχεια εφαρμόστε τον κώδικα css του πίνακα. Χωρίς css <title> Επίδειξη display </title> href="displayspan.css"> Με εφαρμογή της css <span>1η παράγραφος</span> <span>2η παράγραφος</span> <span>3η παράγραφος</span> <span>4η παράγραφος</span> <span>5η παράγραφος</span> span { display: block; Νέα αρχεία: displayspan.html, displayspan.css 1

2 2. Η ετικέτα <div> αντιθέτως είναι εξορισμού block. Δοκιμάστε πρώτα την ιστοσελίδα χωρίς css και στη συνέχεια εφαρμόστε την css του παραδείγματος. Χωρίς css <title> Επίδειξη display </title> href="displaydiv.c <div>1η παράγραφος</div> <div>2η παράγραφος</div> Με css <div>3η παράγραφος</div> <div>4η παράγραφος</div> <div>5η παράγραφος</div> div { display: inline; Νέα αρχεία: displaydiv.html, displaydiv.css Υλοποιήστε την 1 η δραστηριότητα. 3. Τέλος, η display μπορεί να πάρει την τιμή none η οποία όπως είπαμε κρύβει το στοιχείο από τη σελίδα. Το στοιχείο αυτό δεν καταλαμβάνει καθόλου χώρο στην ιστοσελίδα μας. <title> Επίδειξη display </title> href="displaydiv.css"> <div>1η παράγραφος</div> <div>2η παράγραφος</div> <div class="none">3η παράγραφος</div> <div>4η παράγραφος</div> <div>5η παράγραφος</div> div { display: inline; div.none{ display:none; Υπάρχοντα αρχεία: displaydiv.html, displaydiv.css 2

3 Visibility Ορατότητα 4. Η διαφορά της ιδιότητα visibility από την τιμή none της display είναι ότι στην περίπτωση της visibility:hidden το στοιχείο καταλαμβάνει τον ίδιο χώρο και επηρεάζει τη συνολική διάταξη της σελίδας. Υλοποιήστε την 2 η δραστηριότητα. Position - Θέση Η ιδιότητα css που καθορίζει τον τρόπο που ένα στοιχείο θα τοποθετηθεί στη σελίδα μας είναι η position, η οποία μπορεί να πάρει μία από τις επόμενες τιμές: static: Η εξορισμού ρύθμιση. Το αντικείμενο τοποθετείται στην ροή του εγγράφου relative: Σχετική θέση. Μπορεί να τοποθετηθεί σε θέση σχετική με την θέση που θα έπρεπε κανονικά να είναι σύμφωνα με την ροή. fixed: Το αντικείμενο παραμένει πάντα στην ίδια θέση ακόμη και αν η σελίδα σκρολάρει. absolute: Το αντικείμενο τοποθετείται σε σχέση με τον κοντινότερο πρόγονό του. 5. Η εξορισμού, λοιπόν θέση ενός αντικειμένου καθορίζεται με την τιμή static της ιδιότητας position. <title> Επίδειξη position </title> href="positionstatic.css"> <h1>position: static</h1> <p>ένα αντικείμενο με position: static, δεν τοποθετείται με κάποιον ιδιαίτερο τρόπο. Τοποθετείται πάντα συμφωνα με την κανονική ροή της σελίδας.</p> <div class="static">αυτό το στοιχείο div έχει position: static</div> div.static { position: static; border: 3px solid #73AD21; Νέα αρχεία: positionstatic.html, positionstatic.css 6. Ένα αντικείμενο με position relative, τοποθετείται σε σχετική θέση με την εξορισμού της. Καθορίζουμε τις ιδιότητες top, right, bottom και left οι οποίες μεταφέρουν το αντικείμενο από την αρχική του θέση. <title> Επίδειξη position </title> href="positionrelative.css"> 3

4 <h1>position: relative</h1> <p>ένα αντικείμενο με position: relative, τοποθετείται σε μία θέση σχετική με την κανονική ροή της σελίδας.</p> <div class="relative">αυτό το στοιχείο div έχει position: relative</div> div.relative { position: relative; left: 30px; border: 3px solid #73AD21; Νέα αρχεία: positionrelative.html, positionrelative.css Υλοποιήστε τη δραστηριότητα Ένα fixed αντικείμενο μένει πάντα σταθερό στο σημείο που θα το θέσουμε. Ακόμη και όταν η σελίδα σκρολάρει το αντικείμενο δεν αλλάζει θέση. <title> Επίδειξη position </title> href="positionfixed.css"> <h1>position: fixed</h1> <p>ένα αντικείμενο με position: fixed, τοποθετείται σταθερά όπου το θέσουμε στην σελίδα..</p> <div class="fixed">αυτό το στοιχείο div έχει position: fixed</div> div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; Νέα αρχεία: positionfixed.html, positionfixed.css 8. Ένα στοιχείο με position absolute τοποθετείται σε σχέση με τον κοντινότερο πρόγονό του. <title> Επίδειξη position </title> 4

5 href="positionabsolute.css"> <h1>position: absolute</h1> <p>ένα αντικείμενο με position: absolute, τοποθετείται σταθερά σε σημείο που έχει σχέση με τον πρόγονό του. Εάν δεν υπάρχει άλλος πρόγονος εκτός από το body έχει σαν απόγονο τον body</p> <div class="relative">αυτό το στοιχείο έχει position: relative; <div class="absolute">αυτό το στοιχείο div έχει position: absolute με απόγονο το relative div</div> </div> <div class="absolute">αυτό το στοιχείο div έχει position: absolute με απόγονο το body</div> div.relative { position: relative; width: 400px; height: 250px; border: 3px solid #73AD21; div.absolute { position: absolute; top: 120px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; Νέα αρχεία: positionabsolute.html, positionabsolute.css Τοποθέτηση κειμένου σε εικόνα 9. Η position μπορεί να χρησιμοποιηθεί για να τοποθετηθεί κείμενο μέσα σε εικόνα με τον τρόπου που φαίνεται στη συνέχεια. Στο παράδειγμα αυτό φαίνεται και η χρήση της div που είναι να ομαδοποιεί ένα κομμάτι της ιστοσελίδας. <title> Εισαγωγή κειμένο σε εικόνα </title> href="positionimage.css"> <h2>κείμενο σε εικόνα</h2> 5

6 <p>προσθήκη κεικένου πάνω αριστερά σε μία εικόνα.</p> <div class="container"> <img src="shark.png" alt="a scary shark!!"> <div class="topleft">πάνω αριστερά.</div> </div>.container { position: relative;.topleft { position: absolute; top: 8px; left: 16px; font-size: 18px; img { width: 100%; height: auto; opacity: 0.3; Νέα αρχεία: positionimage.html, positionimage.css Υλοποιήστε την 4 η δραστηριότητα. Float Με την ιδιότητα float, ένα αντικείμενο μπορεί να «στριμωχτεί» στα αριστερά η δεξιά μίας ιστοσελίδας επιτρέποντας άλλα αντικείμενα να τοποθετηθούν γύρω τους. Οι τιμές που μπορεί να πάρει η ιδιότητα είναι left, right και none. Σημειώνεται ότι τα αντικείμενα δεν μπορούν να πλέουν προς τα πάνω ή κάτω παρά μόνο στα αριστερά ή δεξιά. 10. Η πιο συχνή χρήση της ιδιότητας float είναι σε εικόνες και κείμενο που «τυλίγεται» γύρω τους. <title> Επίδειξη float </title> href="floatimage.css"> <h1>float: right</h1> <img src="tigershark.jpg" width="200" class="rightfloat"> <p>ο καρχαρίας-τίγρης (επιστημονική ονομασία Galeocerdo cuvier) είναι ένας καρχαρίας της 6

7 οικογένειας των καρχαρινίδων. Το κύριο χαρακτηριστικό του είναι οι σκούρες ραβδώσεις στο σώμα του, οι οποίες μοιάζουν με το μοτίβο της τίγρης, και εξασθενούν όσο ο καρχαρίας μεγαλώνει. Είναι ένα σχετικά μεγάλο αρπακτικό ψάρι, με μέγεθος που πολλές φορές ξεπερνά τα 5 μέτρα.</p> img.rightfloat { float : right; Νέα αρχεία: floatimage.html, floatimage.css Υλοποιήστε την 5 η δραστηριότητα. 11. Εάν τοποθετηθούν διάφορα floating αντικείμενα το ένα μετά το άλλο θα τοποθετούνται δίπλα δίπλα όσο υπάρχει χώρος. <title> Επίδειξη Float </title> <div style="background-color: yellow; width:200px; height:100px; float:left;"></div> <div style="background-color: gray; width:400px; height:100px; float:left;"></div> <div style="background-color: red; width:300px; height:100px; float:left;"></div> <div style="background-color: blue; width:100px; height:100px; float:left;"></div> <div style="background-color: green; width:500px; height:100px; float:left;"></div> <div style="background-color: cyan; width:300px; height:100px; float:left;"></div> Νέο αρχείο: floatmultiple.html Πειραματιστείτε με τα μεγέθη των παραπάνω στοιχείων. Clear 12. Τα στοιχεία που είναι μετά από στοιχεία με float τοποθετούνται εάν χωράνε δίπλα από αυτά. Για να αποφευχθεί αυτό χρησιμοποιείται η ιδιότητα clear. Ανάλογα με την τιμή της, left, right, both, και εξορισμού none, δεν επιτρέπει αντικείμενα αριστερά, δεξιά και από τις δύο πλευρές ή επιτρέπει παντού. 7

8 Εφόσον μία συχνή χρήση της float είναι με εικόνες, μπορούμε να δούμε και μία χρήση της clear σε συνδυασμό με floated εικόνα. Η τρίτη παράγραφος, ακόμη και αν χωράει δίπλα στην εικόνα, έχει κάνει clear τα αντικείμενα αριστερά (αλλά και δεξιά) και τοποθετείται μόνη της κάτω από την εικόνα. <title> Επίδειξη clear </title> href="clear.css"> <img src="tigershark.jpg" width="200" class="leftfloat"> <p>ο καρχαρίας-τίγρης (επιστημονική ονομασία Galeocerdo cuvier) είναι ένας καρχαρίας της οικογένειας των καρχαρινίδων. </p> <p>το κύριο χαρακτηριστικό του είναι οι σκούρες ραβδώσεις στο σώμα του, οι οποίες μοιάζουν με το μοτίβο της τίγρης, και εξασθενούν όσο ο καρχαρίας μεγαλώνει. </p> <p class = "clear">είναι ένα σχετικά μεγάλο αρπακτικό ψάρι, με μέγεθος που πολλές φορές ξεπερνά τα 5 μέτρα.</p> img { float: left; p.clear { clear: both; Νέα αρχεία: clear.html, clear.css Μπορείτε να αφαιρέσετε την κλάση clear Από την παράγραφο ή να την προσθέσετε και σε άλλη παράγραφο για να δείτε τη λειτουργία της. Overflow Η ιδιότητα overflow καθορίζει εάν το περιεχόμενο θα κοπεί ή θα προστεθούν μπάρες κύλισης όταν το περιεχόμενο είναι πολύ μεγάλο για να χωρέσει στην περιοχή του στοιχείου. Μπορεί να πάρει τις επόμενες τιμές: visible: εξορισμού, το περιεχόμενο δεν κόβεται, αλλά συνεχίζει μετά το box του στοιχείου. hidden: Το περιεχόμενο κόβεται και αυτό που δεν χωράει δεν είναι ορατό. scroll: Το περιεχόμενο κόβεται αλλά προστίθενται scrollbars. auto: Scrollbars προστίθενται μόνο όταν το περιεχόμενο δεν χωράει. 8

9 13. Στη συνέχεια ορίζεται, θα μπορούσε και να μην οριστεί, η εξορισμού τιμή της overflow, visible. <title> Επίδειξη overflow </title> href="overflow.css"> <h2>overflow</h2> <p>εξορισμού, το overflow έχει τιμή visible, κάτι που σημαίνει ότι δεν κόβεται και απλά εμφανίζεται έξω από το κουτί του στοιχείου.</p> <div>μπορείς να χρησιμοποιήσεις την ιδιότητα overflow όταν θέλεις να έχεις καλύτερο έλεγχο της διάταξης της σελίδας. Η ιδιότητα αυτή καθορίζει τι συμβαίνει όταν το περιεχόμενο ξεπερνά το box του στοιχείου.</div> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; Νέα αρχεία: overflow.html, overflow.css 14. Στη συνέχεια ορίζεται η τιμή hidden που κρύβει το περιεχόμενο που δεν χωρά στο στοιχείο. <title> Επίδειξη overflow </title> href="overflow.css"> <h2>overflow</h2> <p>εξορισμού, το overflow έχει τιμή visible, κάτι που σημαίνει ότι δεν κόβεται και απλά εμφανίζεται έξω από το κουτί του στοιχείου.</p> <div>μπορείς να χρησιμοποιήσεις την ιδιότητα overflow όταν θέλεις να έχεις καλύτερο έλεγχο της διάταξης της σελίδας. Η ιδιότητα αυτή καθορίζει τι συμβαίνει όταν το περιεχόμενο ξεπερνά το box του στοιχείου.</div> 9

10 div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; Υπάρχοντα αρχεία: overflow.html, overflow.css 15. Ακολουθεί η τιμή scroll που προσθέτει scrollbars. <title> Επίδειξη overflow </title> href="overflow.css"> <h2>overflow</h2> <p>εξορισμού, το overflow έχει τιμή visible, κάτι που σημαίνει ότι δεν κόβεται και απλά εμφανίζεται έξω από το κουτί του στοιχείου.</p> <div>μπορείς να χρησιμοποιήσεις την ιδιότητα overflow όταν θέλεις να έχεις καλύτερο έλεγχο της διάταξης της σελίδας. Η ιδιότητα αυτή καθορίζει τι συμβαίνει όταν το περιεχόμενο ξεπερνά το box του στοιχείου.</div> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: scroll; Υπάρχοντα αρχεία: overflow.html, overflow.css Τέλος η τιμή auto της overflow προσθέτει scrollbars μόνο όταν είναι απαραίτητο. Πειραματιστείτε με την auto αλλάζοντας στην παραπάνω css το μέγεθος του box στο div στοιχείο. 10

11 Z-index 16. Όταν αντικείμενα είναι τοποθετημένα εκτός της κανονικής ροής υπάρχει περίπτωση να επικαλύπτονται. Η ιδιότητα z-index καθορίζει ποια αντικείμενα θα τοποθετούνται μπροστά και ποια πίσω. Προφανώς τα πίσω θα κρύβονται από τα μπροστά τους. Στην επόμενη ιστοσελίδα <title> Επίδειξη z-index </title> href="zindex.css"> <h1>αυτή εδώ είναι μία ετικέτα</h1> <img src="shark.png" width="300"> <p>η εικόνα έχει z-index -1, και έτσι θα τοποθετηθεί πίσω από το κείμενο.</p> img { position: absolute; left: 0px; top: 0px; z-index: -1; Νέα αρχεία: zindex.html, zindex.css Υλοποιήστε τις δραστηριότητες 6 και 7. Δραστηριότητες 1. Διαλέξτε μία inline ετικέτα από τη λίστα, κατά προτίμηση την img. Διαλέξτε δύο εικόνες και παρουσιάστε τες σε μία ιστοσελίδα. Στην συνέχεια θέστε με τη βοήθεια της css την ιδιότητα display τους σε block. Έπειτα διαλέξτε μία block ετικέτα, έστω μίας κεφαλίδας <h1> έως <h6>. Παρουσιάστε 2 3 κεφαλίδες και στη συνέχεια θέστε τες ως inline 2. Εξαφανίστε μία από τους παραγράφους χωρίς να επηρεάσετε την συνολική διάταξη της σελίδας και άλλη μία επηρεάζοντάς την. Χρησιμοποιήστε τις display:none και visibility:hidden. 3. Προσαρμόστε τη css στο positionrelative.css ώστε το αντικείμενο div να «πέσει» πάνω στο προηγούμενο αντικείμενο <p>. 4. Στο παράδειγμα positionimage προσθέστε κείμενο με τον ίδιο τρόπο που προστέθηκε πάνω αριστερά στην εικόνα, πάνω δεξιά, κάτω αριστερά, κάτω δεξιά και στο κέντρο όπως φαίνεται και στην επόμενη εικόνα. 5. Συνεχίστε την ιστοσελίδα floatimage.html με την εικόνα και το float right προσθέτοντας άλλη μία παράγραφο και μία εικόνα που αυτή το φορά θα είναι στα αριστερά του κειμένου. 6. Αλλάξτε το z-index στην ιστοσελίδα zindex.html έτσι ώστε η εικόνα να τοποθετηθεί μπροστά από το κείμενο. 11

12 7. Δίνεται η επόμενη ιστοσελίδα στην οποία βλέπετε τα δύο βασικά χρώματα όπου το ένα υπερκαλύπτει το άλλο. Προσπαθήστε να τοποθετήσετε και το τρίτο βασικό χρώμα σαν συνέχεια των άλλων 2 όπως βλέπετε και στην 2 η εικόνα. <title> Επίδειξη z-index </title> href="zindexcolor.css"> <div class="red">κόκκινο</div> <div class="green">πράσινο</div>.red { background-color: #FF0000; position: relative; width: 120px; height: 120px; color: #00ffff; margin-bottom: 15px; z-index:2;.green { background-color: #00ff00; position: relative; width: 120px; height: 120px; color: #Ff00ff; margin-top: -50px; margin-left: 50px; z-index:3; Νέα αρχεία: zindex.html, zindex.css 12