Ωραία όλα αυτά με τα κουτάκια, αλλά, μέχρι στιγμής, όλα είναι άδεια. Έχω να προσθέσω το περιεχόμενο — ο λόγος για τον οποίο δημιουργήθηκε αυτό το site. Και πρέπει να είναι εύχρηστο, εύκολο και σαφες. Για να δούμε τι μπορούμε να κάνουμε…
Για να μπορέσετε να καταλάβετε πως ακριβώς λειτουργούν τα block level elements θα πρέπει να τα δείτε. Το Web Developer extension του Firefox μπορεί να μας βοηθήσει. Στην φωτό φαίνονται τα 4 <div>, ο χώρος που καταλαμβάνουν στη σελίδα και η σειρά με την οποία εμφανίζονται στον κώδικα. Η σειρά παίζει ρόλο!
Το πρώτο <div> είναι το container. To χρησιμοποιώ για να ορίσω το συνολικό πλάτος του site μου. Θα μπορούσα να κάνω το ίδιο χρησιμοποιώντας το ίδιο το <body> αλλά θα είχα προβληματάκια στα margins και δεν θα μπορούσα να κεντράρω το περιεχόμενο αν το επιθυμούσα. Ας δούμε τον κώδικα CSS:
#container { border: 0; margin: 0 20px 20px 20px; padding: 0; width: 760px; }
Αν δεν βγάζετε κανένα νόημα από τα παραπάνω είναι …φυσιολογικό! Δεν έχουμε ακόμα συζητήσει το πως τελικά λειτουργούν οι κανόνες CSS. Κάθε rule (κανόνας) ξεκινάει με τον selector — είναι το #container στον παραπάνω κώδικα. Αυτό σημαίνει ότι ζητάμε από τον browser να αναζητήσει εκείνο το element με το id="container" στον κώδικα της σελίδας μας και να εφαρμόσει σε αυτό τους ορισμούς που περικλείονται από τα {}. Υπάρχουν πολλοί τρόποι να αναζητήσουμε elements (tags) στον κώδικα HTML μέσω των CSS: .about {font-size: 1.2em;} που θα ορίσει το μέγεθος της γραμματοσειράς σε 1.2 em (στις μονάδες μέτρησης θα αφιερώσω το επόμενο μάθημα) σε όσα tags έχουν class="about", abbr,acronym {cursor: help;} που αλλάξει τον cursor όταν το ποντίκι βρίσκεται πάνω από τα <abbr> και <acronym> tags, #content h2 {…} που θα αναζητήσει το <h2> μέσα στο id="content" και πολλοί ακόμα συνδυασμοί. Αν θυμάστε, οι κανόνες των CSS κληρονομούνται στα παιδιά tags και αυτό με βοηθάει να καθορίσω διάφορους κανόνες σε όλα τα tags δηλώνοντας τους στο <body>:
body { color :#0a0a0a; font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 62.5%; margin: 0; padding: 0; }
Οι παραπάνω κανόνες ορίζουν πως όλα τα κείμενα θα έχουν το χρώμα #0a0a0a (δεκαεξαδικός κώδικας RGB - υπάρχει και ευκολότερος τρόπος), οι γραμματοσειρές που θα χρησιμοποιήσω είναι οι Verdana, Tahoma, Arial, sans-serif με σειρά προτεραιότητας από αριστερά προς τα δεξιά αν δεν είναι εγκατεστημένες στο λειτουργικό σύστημα τους χρήστη, το μέγεθος των γραμμάτων (font-size) θα είναι 62.5% (που είναι μια μέθοδος να αντιστοιχίσω 1 em σε 10 pixels) και τέλος, margin και padding 0 (pixels - όταν χρησιμοποιούμε 0 δεν χρειάζεται να ορίσουμε μονάδα μέτρησης) για όλα τα tags — θα μου δώσει καλύτερο έλεγχο στο στήσιμο της σελίδας γιατί, οι περισσότεροι browsers έχουν κάποιες εξ ορισμού τιμές για τα margins και τα paddings διαφόρων tags και δεν είναι για όλους ίδιες! Και τέλος, αν όλα αυτά σας φάνηκαν ακαταλαβίστικα, που να διαβάσετε για specificity και attribute selectors (που μας φέρνει η CSS 3!. Ευτυχώς, δεν χρειάζεται να τα μάθετε όλα μονομιάς, θα αναλύω κάθε κανόνα που έχω χρησιμοποιήσει όσο θα γεμίζουμε τα κουτιά μας. Στο μεταξύ, μπορείτε να διαβάσετε για το specificity και, γιατί όχι, να αγοράσετε ένα-δυό βιβλία.
(Βαθμολογία: +1, ψήφοι: 1)
Loading ...