Στο CSS τα στοιχεία αντιμετωπίζονται βασικά ως ορθογώνια πλαίσια ή ως λωρίδες. Για την περιγραφή των πλαισίων χρησιμοποιούνται οι παρακάτω - πλέον οι γνωστές σε εσάς - ιδιότητες:
• width – το πλάτος του στοιχείου
• height – το ύψος του στοιχείου
• left – απόσταση από αριστερά
• right – απόσταση από δεξιά
• top – απόσταση από πάνω
• bottom – απόσταση από κάτω
• margin – η εξωτερική περιοχή
• border – το πλαίσιο γύρω από το στοιχείο
• padding – το εσωτερικό περιθώριο, δηλαδή η απόσταση από το πλαίσιο στο περιεχόμενο του στοιχείου
Αυτές οι ιδιότητες έχουν ήδη παρουσιαστεί.
Το συνολικό πλάτος ενός στοιχείου προκύπτει από το άθροισμα των πλάτων των μεμονωμένων τιμών. (Το ίδιο ισχύει και για το ύψος).
Ένα παράδειγμα:
div#box {
width: 100px;
padding: 20px; /* καθε 20px αριστερά και δεξιά /
border: 2px solid; / καθε 2px αριστερά και δεξιά /
margin: 0 30px; / καθε 30px αριστερά και δεξιά */
}Ποιο πλάτος έχει αυτή η περιοχή div; Ας ρίξουμε μια ματιά στις μεμονωμένες τιμές:
• 100 Pixel
• 2 φορές 20 Pixel
• 2 φορές 2 Pixel
• 2 φορές 30 Pixel
Αυτό οδηγεί σε ένα συνολικό πλάτος του στοιχείου 204 Pixel.
Το πλάτος και το ύψος των στοιχείων καθορίζονται μέσω των width και height. Εάν αυτές οι τιμές δεν έχουν καθοριστεί στο Stylesheet, ισχύει το ακόλουθο:
• Αν λείπει το width, το πλαίσιο εμφανίζεται τόσο ευρύ όσο το γύρω στοιχείο.
• Αν λείπει το height, το στοιχείο εμφανίζεται τόσο ψηλό όσο το περιεχόμενό του.
Ένα παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* καθε 2px αριστερά και δεξιά */
margin: 0 30px; /* καθε 30px αριστερά και δεξιά */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Στον περιηγητή, το αποτέλεσμα εμφανίζεται ως εξής:
Το γονικό στοιχείο του στοιχείου div είναι το body. Επομένως, το στοιχείο εμφανίζεται πράγματι τόσο ευρύ όσο το στοιχείο body. Όσον αφορά στο ύψος, επηρεάζεται από το περιεχόμενό του.
Όλα σε Μηδέν
Κάθε περιηγητής διαθέτει έναν ενσωματωμένο φύλλο στυλ. Σε αυτά τα φύλλα στυλ ορίζονται κάποιες προεπιλεγμένες τιμές. Αυτό ισχύει, για παράδειγμα, και για το padding και το margin. Και αυτές οι προεπιλεγμένες τιμές διαφέρουν δυστυχώς μεταξύ των διαφόρων περιηγητών. Αυτή η πτυχή δυσκολεύει την επίτευξη ίδιων αποτελεσμάτων στους διαφορετικούς περιηγητές, σχετικά με το μοντέλο κουτιού. Γι' αυτό συνιστάται να ορίσετε τα κενά που προκαθορίζονται από τους περιηγητές σε Μηδέν. Μπορείτε να το κάνετε ως εξής:
* { padding: 0; margin: 0; }
Προσθέστε αυτήν τη γραμμή στην αρχή του φύλλου στυλ σας. Με αυτόν τον τρόπο μπορείτε να ξεκινήσετε τώρα να τοποθετείτε τα κουτιά στις επιθυμητές θέσεις.
Τύποι Κουτιών
Πώς ένα στοιχείο εμφανίζεται τελικά και πώς επηρεάζει άλλα στοιχεία, εξαρτάται από τον τύπο του στοιχείου. Πράγματι, η προδιαγραφή CSS διακρίνει μεταξύ Στοιχείων-Μπλοκ και Στοιχείων-Εντός-Γραμμής. (Υπάρχουν και άλλοι τύποι, οι οποίοι ωστόσο παραβλέπονται εδώ, καθώς διαδραματίζουν μικρότερο ρόλο).
Τα Στοιχεία-Μπλοκ πάντα δημιουργούν μια νέα γραμμή. Τα επόμενα στοιχεία ξεκινούν επίσης σε μια νέα γραμμή. Τα τυπικά Στοιχεία-Μπλοκ περιλαμβάνουν, για παράδειγμα, τα p, div, h1, ul κλπ. Για αυτά τα στοιχεία ισχύουν οι προηγουμένως αναφερθείσες ιδιότητες Εξωτερικό Περιθώριο, Εσωτερικό Περιθώριο, Υψος, Πλάτος και Πλαίσιο.
<h1>Digital Painting & Matte Painting: Ορισμός δομής εικόνας</h1> <p>Μονάδα 2 - Μέρος 2: Μια εικόνα είναι πάντα ένα ολόκληρο. Ωστόσο, πάντα πρέπει να σκεφτόμαστε πού πρέπει να κοιτάζει πρώτα ο θεατής.</p>
Ένα μάτι στο αποτέλεσμα στον περιηγητή δείχνει ότι τα h1 και p δημιουργούν έκαστο το δικό του γραμμή.
Τα Στοιχεία-Εντός-Γραμμής από την άλλη δεν δημιουργούν δικό τους παράγραφο, αντίθετα εμφανίζονται στην κανονική ροή κειμένου. Τα τυπικά Στοιχεία-Εντός-Γραμμής περιλαμβάνουν τα span, em, strong, img, br κλπ. Για τα Στοιχεία-Εντός-Γραμμής δεν ισχύουν καμία κάθετη εξωτερικά περιθώρια και δεν περιλαμβάνονται πλάτη και ύψη.
<h1><em>Digital Painting & Matte Painting</em>: Ορισμός δομής εικόνας</h1> <p>Μονάδα 2 - Μέρος δύο: <strong>Μια εικόνα είναι πάντα ένα ολόκληρο</strong>. Ωστόσο, πάντα πρέπει να σκεφτόμαστε πού πρέπει να κοιτάζει πρώτα ο θεατής.</p>
Και εδώ μια ματιά στο αποτέλεσμα:
Τώρα μπορείτε να κάνετε στοιχεία που είναι ουσιαστικά block elements, inline elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Ψηφιακή Ζωγραφική & Ματ Ζωγραφική</h1>
<p>Μονάδα 2 - Μέρος 2: <em>Μια εικόνα είναι πάντα ένα ολόκληρο</em>. Ωστόσο, πρέπει πάντα να σκέφτεστε πού θα πρέπει ο θεατής να κοιτάξει πρώτα.</p>
</body>
</html>Κοιτάξτε το αποτέλεσμα στον περιηγητή.
Το χρώμα φόντου της h1 επικεφαλίδας δείχνει ότι το στοιχείο καλύπτει ολόκληρο το πλάτος. Το πλάτος προσανατολίζεται στο γονικό στοιχείο body.
Τώρα μπαίνει στο παιχνίδι η ιδιότητα display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Ψηφιακή Ζωγραφική & Ματ Ζωγραφική</h1>
<p>Μονάδα 2 - Μέρος 2: <em>Μια εικόνα είναι πάντα ένα ολόκληρο</em>. Ωστόσο, πρέπει πάντα να σκέφτεστε πού θα πρέπει ο θεατής να κοιτάξει πρώτα.</p>
</body>
</html>
Με την display: inline η πλάτος του στοιχείου μεταβάλλεται.
Πράγματι, τώρα το πλάτος του στοιχείου προσαρμόζεται στον υπάρχον περιεχόμενο. Εδώ μια επισκόπηση των τιμών που μπορούν να ανατεθούν στο display:
• none – χωρίς εμφάνιση
• block – το στοιχείο εμφανίζεται ως block element, δημιουργώντας μια νέα γραμμή.
• inline – το στοιχείο εμφανίζεται ως inline element, εμφανίζεται στη συνέχεια του κειμένου.
• inline-block – δημιουργεί εξωτερικά ένα block, όπου μπορεί να καθοριστεί ύψος, πλάτος και εξωτερικό περιθώριο. Κάθε στοιχείο παραμένει ωστόσο στη συνέχεια του κειμένου. Είναι έτσι μια συνδυασμός ενός block και ενός inline element.
• list-item – το στοιχείο εμφανίζεται ως block element. Ωστόσο, ένα σημείο λίστας προτίθεται επιπλέον μπροστά του.
• run-in – δημιουργεί ανεξάρτητα από το περιεχόμενο ένα block ή ένα inline element.
• table – λειτουργεί όπως το γνωστό στο HTML στοιχείο table.
• inline-table – λειτουργεί όπως το στοιχείο table στο HTML, αλλά inline.
• table-row – το στοιχείο περιέχει παιδικά στοιχεία δίπλα-δίπλα. Λειτουργεί όπως το στοιχείο tr του HTML.
• table-cell – το στοιχείο αντιπροσωπεύει μια κελί του πίνακα και λειτουργεί όπως τα δύο στοιχεία th και td του HTML.
• table-row-group – το στοιχείο περιέχει μια ομάδα στοιχείων με παιδιά που είναι δίπλα-δίπλα και λειτουργεί όπως το HTML στοιχείο tbody.
• table-header-group – το στοιχείο περιέχει μια ομάδα στοιχείων με παιδιά που είναι δίπλα-δίπλα και λειτουργεί όπως το HTML στοιχείο thead.
• table-footer-group – το στοιχείο περιέχει μια ομάδα στοιχείων με παιδιά που είναι δίπλα-δίπλα και λειτουργεί όπως το HTML στοιχείο tfoot.
• table-column – παραθέτει τις ιδιότητες των κελιών μιας στήλης. Λειτουργεί όπως το στοιχείο col του HTML.
• table-column-group – αυτό το στοιχείο περιέχει μια ομάδα στοιχείων πάνω στα οποία περιγράφονται ιδιότητες κελιών μιας στήλης. Λειτουργεί όπως το στοιχείο colgroup του HTML.
• table-caption – ορίζει την κεφαλίδα του πίνακα. Η ιδιότητα λειτουργεί όπως το HTML στοιχείο caption.
Πράγματι, το CSS προσφέρει διαφορετικές επιλογές εμφάνισης για διάφορους τύπους στοιχείων. Αυτά παίζουν ένα καίριο ρόλο στην συγκρότηση των στοιχείων. Περισσότερα σχετικά σε επόμενα μαθήματα.
