Το απεικονιστικό μοντέλο μορφοποίησης των CSS

Transcript

1 Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει πως τα κουτιά των στοιχείων εμφανίζονται στο browser Εξαρτάται από τον τύπο του στοιχείου. Τα στοιχεία, όσον αφορά την απεικονιστική τους μορφή χωρίζονται σε τρεις κατηγορίες: Block (π.χ., <p>,<div>,<h1>) ανεξάρτητα τμήματα (blocks) που περιέχουν inline boxes που περιέχουν με τη σειρά τους περιεχόμενο Inline ενσωματώνουν περιεχόμενο μέσα σε block στοιχεία (δεν σχηματίζουν νέα blocks περιεχομένου) List item δημιουργούν ένα περιβάλλον δοχείο box και list item inline boxes 1

2 Το απεικονιστικό μοντέλο μορφοποίησης των CSS Προσδιορίζοντας τον τύπο εμφάνισης ενός στοιχείου Τα CSS παρέχουν τη δυνατότητα τροποποίησης του τύπου του κουτιού ενός στοιχείου. To επιτυγχάνετε με την ιδιότητα display. Για παράδειγμα, ο ακόλουθος CSS κανόνας μορφοποιεί τις επικεφαλίδες πρώτου επιπέδου ως inline κουτιά αντί για block κουτιά: h1 { display: inline; } 2

3 Ρυθμίζοντας την ιδιότητα display Χρησιμοποιώντας το CSS Box Χρησιμοποιώντας το CSS Box Model 3

4 Χρησιμοποιώντας το CSS Box Model Περιγράφει τα ορθογώνια κουτιά που ενσωματώνουν περιεχόμενο μιας ιστοσελίδας Κάθε block στοιχείο εμφανίζεται στο παράθυρο του browser ως ένα κουτί που ενσωματώνει περιεχόμενο Κάθε κουτί περιεχομένου μπορεί να έχει περιθώρια (margins), περιγράμματα (borders) και παραγέμισμα (padding) που προσδιορίζονται με επιμέρους ιδιότητες Το CSS Box Model 4

5 Οι περιοχές του CSS Box Model σε ένα στοιχείο <p> Οι επιμέρους πλευρές του CSS Box Model 5

6 Οι επιμέρους πλευρές του CSS Box Model σε ένα στοιχείο <p> Τιμές μέτρησης Οι ιδιότητες border, margin και padding επιτρέπουν δύο τύπους μέτρησης: Μήκος (Length) Σε απόλυτες ή σχετικές τιμές Ποσοστά (Percentages) Βασισμένα στο πλάτος του περιέχοντος κουτιού 6

7 Χρησιμοποιώντας τις ιδιότητες περιθωρίων (Margin) Χρησιμοποιώντας τις ιδιότητες περιθωρίων (Margin) Ορίζοντας Margins Ιδιότητα συντόμευσης που ορίζει και τα τέσσερα (4) επιμέρους περιθώρια σε μία μόνο δήλωση: p {margin: 2em;} 7

8 Χρήση της ιδιότητας συντόμευσης margin Χρήση της ιδιότητας συντόμευσης margin 8

9 Ορίζοντας τις επιμέρους ιδιότητες Margin Θέτει τις επιμέρους ιδιότητες margin: p {margin-left: 2em; margin-right:2em;} right:2em;} Χρήση των επιμέρους ιδιοτήτων margin 9

10 Αρνητικά περιθώρια Τα αρνητικά περιθώρια μπορούν να χρησιμοποιηθούν για να επιτύχουν ειδικά εφέ Παράδειγμα: Υπερκαλύψτε το προκαθορισμένο margin του browser θέτοντας αρνητική τιμή: p {margin-left: -10px;} Το στοιχείο<p> με αρνητικό αριστερό περιθώριο 10

11 Το στοιχείο<h1> με αρνητικό κάτω περιθώριο Χρησιμοποιώντας τις ιδιότητες παραγεμίσματος (Padding) Ελέγξτε την περιοχή παραγεμίσματος στο box model Είναι η περιοχή μεταξύ του περιεχομένου του στοιχείου και του περιγράμματος Η περιοχή παραγεμίσματος κληρονομεί του background color του στοιχείου Όταν ένα περίγραμμα (border) προστίθεται σε ένα στοιχείο, το padding πρέπει να ρυθμιστεί για να αυξήσει την αναγνωσιμότητα και να βελτιώσει την παρουσίαση 11

12 Προκαθορισμένο padding έναντι padding με τιμή 2em Ορίζοντας το Padding Μια ιδιότητα συντόμευσης επιτρέπει να ρυθμίσετε και τις τέσσερις ς(4) επιμέρους μρ τιμές μςpadding gμε ένα μόνο κανόνα Η πιο κοινή χρήση της ιδιότητας padding είναι να ορίσει μία ίδια τιμή για όλες τις 4 πλευρές padding: p {padding: 2em;} 12

13 Χρήση της ιδιότητας συντόμευσης padding Ορίζοντας τις επιμέρους ιδιότητες Padding Ελέγχει τις επιμέρους περιοχές padding Τα ακόλουθα σύνολα κανόνων θέτουν τις πάνω (top) και κάτω (bottom) περιοχές padding για την παράγραφο, μαζί με συμπληρωματικά περιγράμματα (borders) και λευκό background: p {padding-top: 2em; padding-bottom: 2em; border-top: solid thin black; border-bottom: solid thin black; background-color: #ffffff;} 13

14 Χρήση των επιμέρους ιδιοτήτων padding Χρήση των ιδιοτήτων Border Ελέγχουν την εμφάνιση των borders γύρω από τα στοιχεία Αφορούν τη ζώνη μεταξύ των περιοχών margin και padding Υπάρχουν πέντε βασικές ιδιότητες border: border border left border right border top border bottom 14

15 Ιδιότητες border Ορίζοντας το Border στυλ Τιμές ιδιότητας border style: none το στοιχείο δε θα έχει περίγραμμα (default) dotted d δά διάστικτο περίγραμμα (με τελείες) ) dashed περίγραμμα με διακεκομμένη γραμμή solid περίγραμμα με συμπαγή γραμμή double περίγραμμα με διπλή γραμμή groove 3 D ανάγλυφο περίγραμμα ridge 3 D εκτεταμένο προς τα έξω περίγραμμα inset ένθετο περίγραμμα (ολόκληρο το box) outset 3 D outset (ολόκληρο το box) p {border-color: red; borderwidth: 1px; border-style: solid;} 15

16 Διαφορετικά στυλ περιγράμματος Επιμέρους στυλ περιγράμματος Μπορούμε να ορίσουμε τις ακόλουθες borderstyle ιδιότητες: border left style border right style border top style border bottom style 16

17 Χρήση συντόμευσης για την ιδιότητα border style Ορίζοντας το πάχος του περιγράμματος Επιτρέπει να ορίσεις το πάχος του περιγράμματος είτε με μια λέξη κλειδί είτε με μια συγκεκριμένη τιμή Μπορείτε να χρησιμοποιείτε μία από τις παρακάτω λέξεις κλειδιά: thin medium (default) thick p {border-color: red; border-width: 1px; border-style: solid;} 17

18 Διάφορα πάχη περιγράμματος Χρήση συντόμευσης για την ιδιότητα border width 18

19 Επιμέρους πλάχη περιγράμματος Μπορούν να προσδιοριστούν με τις ακόλουθες border width ιδιότητες: border left width border right width border top width border bottom width Ορίζοντας το χρώμα του περιγράμματος Επιτρέπει τη ρύθμιση του χρώματος του περιγράμματος ενός στοιχείου p {border-color: red; border-width: 1px; border-style: solid;} 19

20 Προκαθορισμένα ονόματα χρωμάτων Χρήση συντόμευσης για την ιδιότητα border color 20

21 Ορίζοντας τα επιμέρους περιγράμματα Μπορούν να προσδιοριστούν με τις ακόλουθες border color ιδιότητες: δό border left color border right color border top color border bottom color Χρησιμοποιώντας τις Border ιδιότητες συντόμευσης Η ιδιότητα border μας επιτρέπει να ορίσουμε τις ιδιότητες και των τεσσάρων (4) περιγραμμάτων ενός στοιχείου Μπορείτε να ορίσετε τις τιμές των ιδιοτήτων border width, border style και border color με οποιαδήποτε σειρά Ο ακόλουθος κανόνας θέτει στην ιδιότητα border style τιμή solid solid, στο border width 1 pixel και στο bordercolor red p {border: solid 1px red;} 21

22 Χρησιμοποιώντας ειδικές ιδιότητες κουτιών Επιτρέπει την τοποθέτηση (floating) εικόνων ή κουτιών στα αριστερά ή δεξιά του περιεχομένου στη σελίδα Ειδικές ιδιότητες κουτιών (special box properties): width height float clear Πλάτος (Width) Ορίζει το πλάτος ενός στοιχείου Το πλάτος δεν αφορά «κανονικά»blockστοιχεία, αλλά μπορείτε να το χρησιμοποιήσετε για την τοποθέτηση κουτιών κειμένου ή εικόνων div {width: 200px;} 22

23 Ύψος (Height) Ορίζει το ύψος ενός στοιχείου Αντίστοιχα με το πλάτος (width), το ύψος δεν προορίζεται για χρήση σε «κανονικά» block στοιχεία, αλλά μπορείτε να το χρησιμοποιήσετε για την τοποθέτηση κουτιών κειμένου div {height: 150px;} Float Η ιδιότητα float μας επιτρέπει να τοποθετήσουμε ένα στοιχείο στην αριστερή ή δεξιά άκρη του γονικού του στοιχείου Η ιδιότητα float χρησιμοποιείται συχνά σε στοιχεία <img>, επιτρέποντας τη στοίχιση μιας εικόνας στα αριστερά ή δεξιά κειμένου Μπορείτε να χρησιμοποιείτε την ιδιότητα float και για να στοιχίσετε ένα κουτί κειμένου στην αριστερή ή δεξιά άκρη του γονικού στοιχείου του Η ιδιότητα float μπορεί να χρησιμοποιηθεί για να τοποθετήσει ένα κουτί κειμένου στα αριστερά ή δεξιά άλλου κειμένου Πλεονέκτημα: δεν υπάρχει πλέον η ανάγκη για χρήση πινάκων για τοποθέτηση στοιχείων, αρκεί ένας απλός CSS κανόνας 23

24 Floating κουτιά κειμένου.floatbox {width: 125px; height: 200px; float: left; background-color: #cccccc;} Ρύθμιση ιδιοτήτων margin, padding και border στο floating κουτί κειμένου 24

25 Clear Ελέγχει τη ροή κειμένου γύρω από floated στοιχεία Χρησιμοποιείτε την ιδιότητα clear όταν χρησιμοποιείτε και την ιδιότητα float H clear μας επιτρέπει να αναγκάσουμε κείμενο να εμφανιστεί κάτω από ένα floated στοιχείο, αντί στο πλάι του <h2 style= clear: left; > Κανονική ροή κειμένου δίπλα σε μια floating εικόνα 25

26 Χρήση της ιδιότητας clear Άσκηση #1 Κατεβάστε το αρχείο 01_original.htm, κάνετε τις απαραίτητες προσθήκες στον XHTML κώδικα και δημιουργήστε ένα εξωτερικό CSS αρχείο ώστε να εμφανίζεται με τη διάταξη που φαίνεται παρακάτω: 26

27 Άσκηση #1 Μέγεθος γραμματοσειράς 10% μικρότερη του προκαθορισμένου, Arial, σε όλο το έγγραφο Header, Footer: ύψος στοιχείου 50px, χρώμα υπόβαθρου #666, περιθώριο από κάτω 10px (μόνο για το Header) «Μικρή», «Μεσαία» και «Μεγάλη» στήλη: χρώμα υπόβαθρου #bbb, περιθώριο από αριστερά 3%, περιθώριο από κάτω 10px, πλάτος 20%, 20% και 48% αντίστοιχα h1: παραγέμισμα μ από παντού 5px h2: παραγέμισμα από πάνω 7px h2, p: περιθώριο από αριστερά και δεξιά 7px Άσκηση #2 Χρησιμοποιήσετε το ίδιο XHTML αρχείο της προηγούμενης άσκησης, κάνοντας τις απαραίτητες τροποποιήσεις, και δημιουργήστε ένα εξωτερικό αρχείο ώστε το XHTML αρχείο να εμφανίζεται όπως φαίνεται στην παρακάτω εικόνα 27

28 Άσκηση #3 Αλλάξετε τη διάταξη της προηγούμενης άσκησης ώστε να εμφανίζεται η εικόνα 03_mypic.gif στα αριστερά του κειμένου της «μεγάλης» στήλης: 28