Υποενότητα 3.3: Εφαρμογή CSS
Box model
Με τον όρο Box model περιγράφεται η περιοχή γύρω από κάθε στοιχείο HTML.
Μπορείτε να το φανταστείτε ως ένα αόρατο κουτί όπου τα στοιχεία βρίσκονται μέσα.
Αυτά τα "κουτιά" αποτελούνται από τέσσερα στρώματα.
- Το πρώτο είναι το περιεχόμενο (content). Το περιεχόμενο είναι το πραγματικό κείμενο ή πολυμέσο (media) που έχουμε μέσα στο στοιχείο μας.
- Το δεύτερο είναι το διάκενο - padding. Το Padding είναι η περιοχή γύρω από το περιεχόμενό μας.
- Το τρίτο είναι το περίγραμμα- border, περιβάλλει τόσο την περιοχή padding όσο και το περιεχόμενο. Το περιθώριο μπορεί να εμφανιστεί στη σελίδα χρησιμοποιώντας την ιδιότητα CSS "border" δίνοντας της τιμές.
- Το τέταρτο είναι το περιθώριο - margin. Το περιθώριο περιβάλλει όλα τα παραπάνω και ορίζει την απόσταση από τα άλλα "κουτιά" στοιχείων στον κώδικα μας.
Παράδειγμα
The CSS rules:
<html lang="en">
<head>
<title>Style - CSS</title>
<style>
p{
width: 33%;
text-align: left;
font-size: 0.75em;
color: #006600;
background: #fefecd;
padding: 2%;
margin: 0.75em;
border-width: 10px;
border-style: dotted;
border-color: #900000;
}
</style>
</head>
<body>
<h4>This is a Heading 4</h4>
<p>This is lorem ipsum paragraph: <br>
Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
Ne omnesque detraxit eam, cu qui movet affert volutpat. <br>
Qui amet option eu. Utamur euismod hendrerit vel no, ius natum salutatus forensibus in. <br>
Sea diceret vivendo constituam at, duo an adhuc viderer evertitur.
</p>
</body>
</html>θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:
Περισσότερες πληροφορίες για το Box model: https://www.w3schools.com/css/css_boxmodel.asp
Περισσότερες πληροφορίες για τα Borders: https://www.w3schools.com/css/css_border.asp
Περισσότερες πληροφορίες για το Margin: https://www.w3schools.com/css/css_margin.asp
Περισσότερες πληροφορίες για το Padding: https://www.w3schools.com/css/css_padding.asp