CSS – Cascading Style Sheets (Εξωτερική γραμμή, περιθώριο, ενδιάμεση απόσταση) Η εξωτερική γραμμή (outline) σχεδιάζεται γύρω από ένα στοιχείο της HTML,

Παρουσίαση με θέμα: "CSS – Cascading Style Sheets (Εξωτερική γραμμή, περιθώριο, ενδιάμεση απόσταση) Η εξωτερική γραμμή (outline) σχεδιάζεται γύρω από ένα στοιχείο της HTML,"— Μεταγράφημα παρουσίασης:

1 CSS – Cascading Style Sheets (Εξωτερική γραμμή, περιθώριο, ενδιάμεση απόσταση) Η εξωτερική γραμμή (outline) σχεδιάζεται γύρω από ένα στοιχείο της HTML, έξω από το περίγραμμα (border), ώστε το στοιχείο να διακρίνεται καλύτερα. Στην ουσία πρόκειται για ένα δεύτερο περίγραμμα γύρω από το εσωτερικό περίγραμμα.

2 CSS – Cascading Style Sheets (ιδιότητες outline) ΙδιότηταΠεριγραφήΤιμέςCSS outlineΚαθορίζει όλες τις ιδιότητες εξωτερικής γραμμής σε μία δήλωση χρώμα, στυλ, πάχος2 outline-colorΚαθορίζει το χρώμα της εξωτερικής γραμμής όνομα χρώματος, δεκαεξαδικός αριθμός, αριθμός rgb, invert 2 outline-styleΚαθορίζει το στυλ της εξωτερικής γραμμής none, dotted, dashed, solid, double, groove, ridge, inset, outset 2 outline-widthΚαθορίζει το πάχος της εξωτερικής γραμμής thin, medium, thick, πάχος σε pixel 2 Η τιμή invert της ιδιότητας outline-color εκτελεί αντιστροφή χρώματος. Έτσι εξασφαλίζεται ότι η εξωτερική γραμμή θα είναι πάντα ορατή, ανεξάρτητα από το χρώμα φόντου. Πρόκειται για την προκαθορισμένη τιμή.

3 CSS – Cascading Style Sheets (ιδιότητες outline) p { border:1px solid red; outline:green dotted thick; } Σημείωση: Ο Internet Explorer 8 (και οι επόμενες εκδόσεις) υποστηρίζουν την ιδιότητα outline μόνο αν έχει συμπεριληφθεί δήλωση !DOCTYPE.

4 CSS – Cascading Style Sheets (Εξωτερική γραμμή, περιθώριο, ενδιάμεση απόσταση) Το περιθώριο (margin) καθαρίζει μια περιοχή γύρω από ένα στοιχείο της HTML, έξω από το περίγραμμα (border). Δεν έχει χρώμα φόντου και είναι τελείως διαφανές. Μπορεί να πάρει και αρνητικές τιμές, οπότε τα στοιχεία HTML θα επικαλύπτονται.

5 CSS – Cascading Style Sheets (ιδιότητες margin) Η ιδιότητα margin μπορεί να πάρει μέχρι τέσσερις τιμές. margin:25px 50px 75px 100px; πάνω 25px δεξιά 50px κάτω 75px αριστερά 100px margin:25px 50px 75px; πάνω 25px δεξιά και αριστερά 50px κάτω 75px margin:25px 50px; πάνω και κάτω 25px δεξιά και αριστερά 50px margin:25px; όλα τα περιθώρια 25px

6 CSS – Cascading Style Sheets (ιδιότητες margin) ΙδιότηταΠεριγραφήΤιμέςCSS marginΚαθορίζει το περιθώριο για όλες τις πλευρές μαζί σε μία δήλωση auto, πάχος, %1 margin-bottomΚαθορίζει το κάτω περιθώριο ενός στοιχείου auto, πάχος, %1 margin-leftΚαθορίζει το αριστερό περιθώριο ενός στοιχείου auto, πάχος, %1 margin-rightΚαθορίζει το δεξιό περιθώριο ενός στοιχείου auto, πάχος, %1 margin-topΚαθορίζει το πάνω περιθώριο ενός στοιχείου auto, πάχος, %1 ΤιμήΠεριγραφή autoΤο περιθώριο καθορίζεται από το φυλλομετρητή. Το αποτέλεσμα εξαρτάται από το φυλλομετρητή πάχοςΚαθορίζεται συγκεκριμένο περιθώριο (σε pixels, στιγμές κ.λπ.) %Καθορίζεται περιθώριο σε ποσοστό % του περιεχόμενου στοιχείου

7 CSS – Cascading Style Sheets (ιδιότητες margin) p { background-color:yellow; } p.margin { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } Σε αυτή την παράγραφο δεν έχουν οριστεί περιθώρια. Σε αυτή την παράγραφο έχουν οριστεί συγκεκριμένα περιθώρια. Ούτε σε αυτή την παράγραφο έχουν οριστεί περιθώρια.

8 CSS – Cascading Style Sheets (Εξωτερική γραμμή, περιθώριο, ενδιάμεση απόσταση) Η ενδιάμεση απόσταση (padding) καθαρίζει μια περιοχή ανάμεσα στο στοιχείο HTML και το περίγραμμα (border). Το χρώμα φόντου της ενδιάμεσης απόστασης είναι ίδιο με του στοιχείου.

9 CSS – Cascading Style Sheets (ιδιότητες padding) Η ιδιότητα padding μπορεί να πάρει μέχρι τέσσερις τιμές. padding:25px 50px 75px 100px; πάνω 25px δεξιά 50px κάτω 75px αριστερά 100px padding:25px 50px 75px; πάνω 25px δεξιά και αριστερά 50px κάτω 75px padding:25px 50px; πάνω και κάτω 25px δεξιά και αριστερά 50px padding:25px; Όλες οι ενδιάμεσες αποστάσεις 25px

10 CSS – Cascading Style Sheets (ιδιότητες padding) ΙδιότηταΠεριγραφήΤιμέςCSS paddingΚαθορίζει την ενδιάμεση απόσταση για όλες τις πλευρές σε μία δήλωση πάχος, % 1 padding-bottomΚαθορίζει την ενδιάμεση απόσταση στην κάτω πλευρά πάχος, % 1 padding-leftΚαθορίζει την ενδιάμεση απόσταση στην αριστερή πλευρά πάχος, % 1 padding-rightΚαθορίζει την ενδιάμεση απόσταση στη δεξιά πλευρά πάχος, % 1 padding-topΚαθορίζει την ενδιάμεση απόσταση στην πάνω πλευρά πάχος, % 1 ΤιμήΠεριγραφή πάχοςΚαθορίζεται συγκεκριμένη ενδιάμεση απόσταση (σε pixels, στιγμές κ.λπ.) %Καθορίζεται ενδιάμεση απόσταση σε ποσοστό % του περιεχόμενου στοιχείου

11 CSS – Cascading Style Sheets (ιδιότητες padding) p {border: solid 1px} p.ex1 {padding:2cm;} p.ex2 {padding-top:0.5cm; padding-bottom:0.5cm; padding-left: 3cm; padding-right: 3cm;} Αυτό το κείμενο έχει ίδια ενδιάμεση απόσταση 2 εκατοστά σε κάθε πλευρά. Αυτό το κείμενο έχει ενδιάμεση απόσταση πάνω και κάτω ίση με 0,5 εκατοστά και αριστερά και δεξιά ίση με 3 εκατοστά.