Όλα τα elements της HTML έχουν συγκεκριμένες διαστάσεις, είτε πρόκειται για block είτε για inline. Ειδικά τα blocks, καταλαμβάνουν εξ ορισμού όλο το διαθέσιμο πλάτος και έχουν όσο ύψος χρειάζεται για το περιεχόμενο τους. Μέσω CSS όμως μπορούμε να αλλάξουμε τα μεγέθη τους κατά το δοκούν — λαμβάνοντας υπόψιν το box model.
Κατά τον σχεδιασμό του site αποφάσισα πως ήθελα το περιεχόμενο μου να καταλαμβάνει μόνο 760 pixels. Τα pixels (px) είναι μία από τις διαθέσιμες μονάδες μέτρησης στα CSS. Μας εξυπηρετεί στο να έχουμε σχεδόν απόλυτο έλεγχο στο design. Σε μερικές περιπτώσεις αυτό δεν είναι ούτε χρήσιμο ούτε επιθυμητό — θα μπορούσα να ορίσω το πλάτος της σελίδας μου στο 100% (ή στο 80%) του διαθέσιμου πλάτους, καταλαμβάνοντας έτσι όλο το παράθυρο του browser. Αν βέβαια ο χρήστης έχει ανάλυση π.χ. 1440x900 και το παράθυρο του είναι fullscreen τότε το site μου θα φαίνοταν άσχημο (και δυσανάγνωστο). Τέλος θα μπορούσα να έχω ορίσει το πλάτος σε em. Το em είναι μια σχετική μονάδα μέτρησης και βασίζεται στην τυπογραφία. 1 em έχει τόσα pixels ύψος όσα έχει ορίσει ο χρήστης σαν προεπιλογή στον browser του σαν μέγεθος γραμματοσειράς και τόσα pixels πλάτος όσα περίπου καταλαμβάνει το M. Αυτές είναι οι 3 βασικότερες μονάδες μέτρησης των CSS και τις εναλλάξ, χρησιμοποιούμε κατά περίπτωση. Ας ξεκινήσουμε από το <body>.
body { background: #f5f5f5 url(images/headerBg.gif) repeat-x top; color :#0a0a0a; font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 62.5%; margin: 0; padding: 0; }
Αυτοί είναι όλοι οι κανόνες που αφορούν στο <body> — το background: #f5f5f5 url(images/headerBg.gif) repeat-x top; είναι 4 κανόνες σε έναν! Ας το δούμε σε ανεπτυγμένη μορφή (αντί της συντομογραφίας που χρησιμοποίησα):
background-color: #f5f5f5; background-image: url(images/headerBg.gif); background-position: top; background-repeat: repeat-x;
Το background-color: #f5f5f5 καθορίζει -μαντέψτε- το χρώμα του φόντου του site μας. Μπορεί επίσης να γραφτεί σαν background-color: rgb(245,245,245) — τα νούμερα θα τα βρείτε από το σχεδιαστικό πρόγραμμα που θα χρησιμοποιήσετε και μπορείτε να γράψετε είτε τα δεκαδικά είτε τα δεκαεξαδικά, αρκεί να θυμάστε την διαφορά στην σύνταξη.
Το background-image: url(images/headerBg.gif) τοποθετεί το εν λόγω .gif στο φόντο της σελίδας, tο background-position: top κανονίζει ώστε αυτό να τοποθετηθεί στην κορυφή της σελίδας (άλλες ρυθμίσεις είναι left, center, right, bottom ή και ένας συνδυασμός αυτών για να τοποθετήσουμε κάποιο γραφικό σε γωνία) ενώ το background-repeat: repeat-x θα φροντίσει ώστε το γραφικό μας να επαναλαμβάνεται μόνο κατά μήκος της σελίδας.
Το color :#0a0a0a αφορά στο χρώμα του κειμένου, τo font-family: Verdana, Tahoma, Arial, sans-serif κανονίζει τις γραμματοσειρές που θα χρησιμοποιεί το site, με σειρά προτεραιότητας από αριστερά προς τα δεξιά, ανάλογα με την ύπαρξη τους στο λειτουργικό σύστημα του χρήστη, το font-size: 62.5% το χρησιμοποιώ υποθέτοντας πως ο χρήστης δεν έχει αλλάξει το default μέγεθος γραμματοσειράς (16 pixels) οπότε θα έχω 1em = 10px. Τέλος, μηδενίζω τα margin και padding διότι κάθε browser εφαρμόζει εξ ορισμού διαφορετικά μεγέθη.
#container { border: 0; margin: 0 20px 20px 20px; padding: 0; width: 760px; }
Θα αναλύσω και τους κανόνες του #container <div>: το border: 0 κάνει αυτό ακριβώς που φαντάζεστε — μηδενίζει το border του κουτιού (θυμηθείτε πως το <div> είναι block element και έχει border), και, τώρα που το ξανασκέφτομαι, ίσως να μην είναι απαραίτητο (…), το margin: 0 20px 20px 20px είναι ακόμα μια συντομογραφία και κανονίζει τα margins με αυτή τη σειρά: πάνω, δεξιά, κάτω, αριστερά — να θυμάστε ένα ρολόι αρχίζοντας από το 12, το padding: 0 μηδενίζει το padding (just in case) και τέλος το width: 760px, όπως ήδη είπαμε, κανονίζει ώστε τα περιεχόμενα του site μου να καταλαμβάνουν μόνο 760 pixels, στα αριστερά της σελίδας που είναι η εξ ορισμού τοποθέτηση. Ας δούμε τέλος και τους κανόνες του <p> και να ανακεφαλαιώσουμε:
p { font-size: 1.1em; line-height: 150%; margin: 1em 0 0 0; text-indent: 1em; }
Αφού στο <body> κανόνισα ώστε το 1 em να είναι 10 pixels, στο <p> (που περιλαμβάνονται όλα τα κείμενα μου) μεγαλώνω λίγο το μέγεθος των γραμμάτων στα 11 pixels (1.1em). Για να είναι δε ευανάγνωστα, αυξάνω την απόσταση των γραμμών μεταξύ τους με line-height: 150% (προσέξτε το %), προσθέτω ένα 1em margin στο πάνω μέρος κάθε παράγραφου (που δεν με νοιάζει πόσο πραγματικά θα είναι, αρκεί να δίνει «αέρα») ενώ μηδενίζω τα υπόλοιπα για να έχω την ίδια εμφάνιση σε όλους τους browsers, και τέλος, φέρνω λίγο μέσα το κείμενο της πρώτης γραμμής με το text-indent: 1em.
Βλέπουμε πως οι κανόνες των CSS είναι σε απλά αγγλικά, αν και τα αποτελέσματα τους δεν είναι άμεσα καταννοητά σε μερικές περιπτώσεις. Θα σταθώ λίγο στην χρήση των em, px και %: να προτιμάτε πάντοτε τα em για τα μεγέθη των γραμματοσειρών διότι τα % θα σας μπερδέψουν ενώ τα px δεν προτείνονται επειδή ο Internet Explorer 6 δεν μπορεί να κάνει resize όσα κείμενα έχουν μέγεθος καθορισμένο με pixels! Για τα πλάτη και ύψη των blocks μπορείτε να χρησιμοποιείτε είτε τα px είτε τα %, ότι εξυπηρετεί το design σας καλύτερα, αρκεί να φροντίσετε ώστε να μην «σπάει» αυτό με μεγάλο μέγεθος γραμματοσειράς από την πλευρά του χρήστη ή σε μεγάλο πλάτος ή σε πολλές ακόμα περιπτώσεις που θα δούμε και στη συνέχεια. Και πάντα να ελέγχετε τη δουλειά σας σε 4 τουλάχιστον browsers!
(Καμία ψήφος)
Loading ...