CSS – Cascading Style Sheets (Το μοντέλο box) Κάθε στοιχείο της HTML περιέχεται σε ένα “κουτί” (box). Το μοντέλο box μας βοηθάει στο σχεδιασμό της ιστοσελίδας και στη διάταξη των στοιχείων της HTML μέσα σε αυτή. Μας επιτρέπει να βάλουμε περίγραμμα γύρω από στοιχεία html και να καθορίσουμε τις αποστάσεις μεταξύ των στοιχείων

CSS – Cascading Style Sheets (Το μοντέλο box) Πλαίσιο που περιβάλλει τα στοιχεία html (π.χ. παράγραφος κειμένου, εικόνα, πίνακας κ.λπ.) και αποτελείται από το περιθώριο (margin - απόσταση από τα άλλα στοιχεία html), το περίγραμμα (border), την ενδιάμεση απόσταση (padding – απόσταση του περιεχομένου του στοιχείου από το περίγραμμα), και το περιεχόμενο του στοιχείου (content)

CSS – Cascading Style Sheets (Το μοντέλο box) margin: “καθαρίζει” μια περιοχή γύρω από το περίγραμμα (border). Το περιθώριο δεν έχει χρώμα φόντου και είναι τελείως διαφανές. border: περίγραμμα γύρω από την ενδιάμεση απόσταση (padding) και το περιεχόμενο (content). Το περίγραμμα επηρεάζεται από το χρώμα φόντου του “κουτιού”. padding: “καθαρίζει” μια περιοχή γύρω από το περιεχόμενο. Η ενδιάμεση απόσταση επηρεάζεται από το χρώμα φόντου του “κουτιού”. content: το περιεχόμενο του “κουτιού” όπου εμφανίζονται κείμενο και εικόνες.

CSS – Cascading Style Sheets (Το μοντέλο box) Οι ιδιότητες width και height καθορίζουν το πλάτος και το ύψος του περιεχομένου του στοιχείου Το συνολικό ύψος και πλάτος του στοιχείου υπολογίζονται με τις παρακάτω σχέσεις: Συνολικό ύψος = height + πάνω padding + κάτω padding + πάνω border + κάτω border + πάνω margin + κάτω margin Συνολικό πλάτος = width + δεξιό padding + αριστερό padding + δεξιό border + αριστερό border + δεξιό margin + αριστερό margin Στον Internet Explorer, το width περιλαμβάνει το border και το padding, εκτός αν προστεθεί μια δήλωση DOCTYPE, όπως στο επόμενο παράδειγμα.

CSS – Cascading Style Sheets (Το μοντέλο box) div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } Η παραπάνω γραμμή έχει πλάτος 250px. Το συνολικό πλάτος αυτού του στοιχείου είναι επίσης 250px. Σημείωση: Η δήλωση DOCTYPE (πριν την ετικέτα html), είναι απαραίτητη ώστε το πλάτος να υπολογίζεται σωστά σε όλους τους φυλλομετρητές.

CSS – Cascading Style Sheets (ιδιότητα border-style) Καθορίζει το στυλ του περιγράμματος p.none {border-style:none;} p.dotted {border- style:dotted;} p.dashed {border- style:dashed;} p.solid {border-style:solid;} p.double {border- style:double;} p.groove {border- style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border- style:outset;} p.hidden {border- style:hidden;} Καθόλου περίγραμμα. Περίγραμμα "dotted". Περίγραμμα "dashed". Περίγραμμα "solid". Περίγραμμα "double". Περίγραμμα "groove". Περίγραμμα "ridge". Περίγραμμα "inset". Περίγραμμα "outset". Περίγραμμα "hidden".

CSS – Cascading Style Sheets (ιδιότητα border-style – Παράδειγμα) border-style:dotted solid double dashed; Πάνω πλευρά: dotted Δεξιά πλευρά: solid Κάτω πλευρά: double Αριστερή πλευρά: dashed border-style:dotted solid double; Πάνω πλευρά: dotted Δεξιά και αριστερή πλευρά: solid Κάτω πλευρά: double border-style:dotted solid; Πάνω και κάτω πλευρά: dotted Δεξιά και αριστερή πλευρά: solid border-style:dotted; Όλες οι πλευρές: dotted

CSS – Cascading Style Sheets (ιδιότητα border-width) Καθορίζει το πάχος του περιγράμματος Τιμές: thinλεπτό περίγραμμα mediumμεσαίο περίγραμμα thickπαχύ περίγραμμα τιμή σε pixel (π.χ. 10px)

CSS – Cascading Style Sheets (ιδιότητα border-width – Παράδειγμα) border-width:thin medium thick 10px; Επάνω πλευρά λεπτή: thin Δεξιά πλευρά μεσαίου πάχους: medium Κάτω πλευρά παχιά: thick Αριστερή πλευρά: 10px border-width:thin medium thick; Επάνω πλευρά λεπτή: thin Δεξιά και αριστερή πλευρά: medium Κάτω πλευρά παχιά: thick border-width:thin medium; Πάνω και κάτω πλευρά: thin Δεξιά και αριστερή πλευρά: medium border-width:thin; Όλες οι πλευρές: thin

CSS – Cascading Style Sheets (ιδιότητα border-color) Καθορίζει το χρώμα του περιγράμματος Τιμές: χρώμαπ.χ. red δεκαεξαδική τιμήπ.χ. #ffeeaa συνδυασμός rgbπ.χ. rgb(255,122,100)

CSS – Cascading Style Sheets (ιδιότητα border-color - Παράδειγμα) border-color: red green blue pink; Επάνω πλευρά κόκκινη Δεξιά πλευρά πράσινη Κάτω πλευρά μπλε Αριστερή πλευρά ροζ border-color: red green blue; Επάνω πλευρά κόκκινη Δεξιά και αριστερή πλευρά πράσινη Κάτω πλευρά μπλε border-color: red green; Πάνω και κάτω πλευρά: κόκκινη Δεξιά και αριστερή πλευρά: πράσινη border-color: red; Όλες οι πλευρές κόκκινες

CSS – Cascading Style Sheets (γενική ιδιότητα border για όλες τις πλευρές) p { border: 5px solid red; } Αυτή είναι μια παράγραφος κειμένου.

CSS – Cascading Style Sheets (ιδιότητες border για κάθε πλευρά) p { border-top: 5px solid red; border-right: 8px dotted rgb(134, 89, 43); border-bottom: 11px dashed #ffaa34; border-left: 15px double blue; } Αυτή είναι μια παράγραφος κειμένου με διαφορετικό περίγραμμα σε κάθε πλευρά. Συμπαγές κόκκινο πάνω, εστιγμένο καφέ δεξιά, ανοιχτό καφέ με παύλες κάτω, και διπλό μπλε αριστερά.

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