Εγκαινιάζω την νέα χρονιά (καλή χρονιά!) με μια νέα σειρά μαθημάτων – Πρώτα βήματα στα CSS. Με βάση τα μαθήματα HTML θα φτιάξουμε ένα πραγματικό site. Αλλά πρώτα, λίγη θεωρία…
Τα CSS είναι σχετικά δύσκολο θέμα για αρχάριους. Για να κατανοήσετε την χρήση (και την χρησιμότητα) τους θα πρέπει πρώτα να μάθετε για το DOM και το box model.
Το DOM είναι η ιεραρχική μέθοδος με την οποία ο browser «αντιλαμβάνεται» τον κώδικα HTML της σελίδας μας. Χρησιμοποιείται κυρίως από την Javascript αλλά μας βοηθάει επίσης να μορφοποιήσουμε τα tags. Μπορούμε να φανταστούμε το DOM σε μορφή δέντρου.
Το box model αντίθετα είναι μια έννοια που αφορά αποκλειστικά τα CSS. Από τον κώδικα CSS αναφερόμαστε στα tags της HTML σαν elements (διότι τα «φύλλα στυλ» δεν χρησιμοποιούνται μόνο στην HTML) και κάθε element της σελίδας μας περιέχεται σε ένα box. Το box model αφορά στα στοιχεία που συνθέτουν ένα «κουτί» και είναι τα: περιεχόμενα, padding, border και margin, από μέσα προς τα έξω.
Κάπου εδώ αρχίζουν τα προβλήματα! Ο πιο διαδεδομένος browser του κόσμου (IE 6, την εποχή που γράφτηκε το άρθρο…), αφενός χρησιμοποιεί διαφορετικό box model, αφετέρου δεν υποστηρίζει πολλές από τις δυνατότητες των CSS. Ευτυχώς, το πρόβλημα με το box model μπορούμε (τις περισσότερες φορές) να το προσπεράσουμε χρησιμοποιώντας Strict αντί για Quirks mode — θυμάστε την συζήτηση για το DOCTYPE;. Εσείς όμως δεν θα χρησιμοποιείτε Internet Explorer για να βλέπετε τις σελίδες που φτιάχνετε — αν δεν έχετε ήδη εγκαταστήσει τον Firefox, θα το κάνετε τώρα και μαζί θα εγκαταστήσετε μερικά extensions που θα σας βοηθήσουν στη δημιουργία και τον εντοπισμό λαθών στα CSS: DOM Inspector (που εγκαθίστανται μαζί με τον browser), Web Developer και Firebug.
Θα κλείσω αυτή την εισαγωγή με την έννοια inheritance (κληρονομικότητα) – το Cascading (μην ακούσω τίποτα για αναδυόμενα…) των Style Sheets. Αν δείτε πιο πάνω το σχήμα του δέντρου είναι ευκολότερο να καταλάβετε το πως λειτουργεί το inheritance στα CSS. Κάθε tag της HTML είναι πιθανόν να περιέχει άλλα tags -παιδιά- ενώ περιέχεται μέσα σε κάποιο άλλο -γονέας- και όλα μαζί ανήκουν στο html που είναι το tag που τα περιέχει όλα. Έτσι λοιπόν, αρκετές από τις ιδιότητες που θα προσθέσουμε σε ένα tag μέσω των CSS κληρονομούνται στα παιδιά. Στην πράξη είναι ευκολότερο απ'ότι στην θεωρία αλλά, προς το παρόν, να θυμάστε πως ο προγραμματισμός θα είναι ευκολότερος αν έχετε κατά νου το παραπάνω σχήμα για τον κώδικα της σελίδας.
(Βαθμολογία: +1, ψήφοι: 1)
Loading ...