033.4 Μάθημα 1

Ο προεπιλεγμένος τρόπος με τον οποίο το πρόγραμμα περιήγησης αποδίδει το έγγραφο ονομάζεται normal flow. Τα ορθογώνια που αντιστοιχούν στα elements τοποθετούνται λίγο πολύ με την ίδια σειρά που εμφανίζονται στο έγγραφο, σε σχέση με τα parent elements. Ωστόσο, ανάλογα με τον τύπο του element, το αντίστοιχο κουτί μπορεί να ακολουθεί διαφορετικούς κανόνες τοποθέτησης.

Ένας καλός τρόπος για να κατανοήσετε τη λογική της κανονικής ροής είναι να κάνετε ορατά τα κουτιά. Μπορούμε να ξεκινήσουμε με μια πολύ βασική σελίδα, που έχει μόνο τρία ξεχωριστά div elements, το καθένα από τα οποία έχει μια παράγραφο με τυχαίο κείμενο:

Κάθε λέξη είναι μέσα σε ένα span element, ώστε να μπορούμε να διαμορφώσουμε τις λέξεις και να δούμε πώς αντιμετωπίζονται επίσης ως κουτιά. Για να γίνουν ορατά τα κουτιά, πρέπει να επεξεργαστούμε το stylesheet αρχείο style.css που αναφέρεται από το έγγραφο HTML. Οι παρακάτω κανόνες θα κάνουν αυτό που χρειαζόμαστε:

Το αποτέλεσμα εμφανίζεται στην Figure 1.

Η Figure 1 δείχνει ότι κάθε HTML tag έχει ένα αντίστοιχο κουτί στο layout. Τα elements div, h2 και p εκτείνονται στο πλάτος του parent element. Για παράδειγμα, το parent element των div elements είναι το body element, επομένως επεκτείνονται στο πλάτος του σώματος, ενώ το parent element κάθε h2 και p element είναι το αντίστοιχο div του. Τα κουτιά που εκτείνονται στο πλάτος του parent element ονομάζονται block elements. Μερικά από τα πιο κοινά HTML tags που αποδίδονται ως blocks είναι h1, h2, h3, p, ul, ol, table, li, div, section , form και aside. Sibling block elements — block elements που μοιράζονται το ίδιο άμεσο parent element — στοιβάζονται μέσα στο parent element από πάνω προς τα κάτω.

Εκτός από το ίδιο το κείμενο, elements όπως h1, p και li περιμένουν μόνο inline elements ως children. Όπως τα περισσότερα σενάρια Western, τα inline elements ακολουθούν τη ροή του κειμένου από αριστερά προς τα δεξιά. Όταν δεν υπάρχει χώρος στη δεξιά πλευρά, η ροή των inline elements συνεχίζεται στην επόμενη γραμμή, όπως και το κείμενο. Ορισμένα κοινά HTML tags που αντιμετωπίζονται ως ενσωματωμένα κουτιά είναι τα span, a, em, strong, img, input και label.

Στο δείγμα της HTML σελίδας μας, κάθε λέξη μέσα στις παραγράφους περιβάλλεται από ένα span tag, ώστε να μπορούν να επισημανθούν με έναν αντίστοιχο κανόνα CSS. Όπως φαίνεται στην εικόνα, κάθε span element τοποθετείται οριζόντια, από αριστερά προς τα δεξιά, έως ότου δεν υπάρχει πλέον χώρος στο parent element.

Το ύψος του element εξαρτάται από το περιεχόμενό του, επομένως το πρόγραμμα περιήγησης προσαρμόζει το ύψος ενός container element για να χωρέσει τα nested block elements ή τις γραμμές των inline elements του. Ωστόσο, ορισμένες ιδιότητες CSS επηρεάζουν το σχήμα ενός κουτιού, τη θέση του και την τοποθέτηση των εσωτερικών του elements.

Οι ιδιότητες margin και padding επηρεάζουν όλους τους τύπους κουτιών. Εάν δεν ορίσετε αυτές τις ιδιότητες ρητά, το πρόγραμμα περιήγησης ορίζει ορισμένες από αυτές χρησιμοποιώντας τυπικές τιμές. Όπως φαίνεται στην Figure 1, τα h2 και p elements αποδόθηκαν με ένα κενό μεταξύ τους. Αυτά τα κενά είναι τα επάνω και κάτω περιθώρια που προσθέτει το πρόγραμμα περιήγησης σε αυτά τα elements από προεπιλογή. Μπορούμε να τα αφαιρέσουμε τροποποιώντας τους κανόνες CSS για τους h2 και p selectors:

Το αποτέλεσμα εμφανίζεται στην Figure 2.

Το body element επίσης, από προεπιλογή, έχει ένα μικρό περιθώριο που δημιουργεί ένα κενό που το περιβάλλει. Αυτό το κενό μπορεί επίσης να αφαιρεθεί χρησιμοποιώντας την ιδιότητα margin.

Ενώ η ιδιότητα margin ορίζει το κενό μεταξύ του element και του περιβάλλοντός του, η ιδιότητα padding του element ορίζει το εσωτερικό κενό μεταξύ των ορίων του container και των child elements του. Εξετάστε τα elements h2 και p μέσα σε κάθε div στο δείγμα κώδικα, για παράδειγμα. Θα μπορούσαμε να χρησιμοποιήσουμε την ιδιότητά τους margin, για να δημιουργήσουμε ένα κενό στα όρια του αντίστοιχου div, αλλά είναι πιο απλό να αλλάξουμε την ιδιότητα padding του container:

Μόνο ο κανόνας για το δεύτερο div τροποποιήθηκε, επομένως τα αποτελέσματα (Figure 3) δείχνουν τη διαφορά μεταξύ του δεύτερου div και των άλλων div containers.

Η ιδιότητα margin είναι μια συντομογραφία για τέσσερις ιδιότητες που ελέγχουν τις τέσσερις πλευρές του κουτιού: margin-top, margin-right, margin-bottom, και margin-left. Όταν στο margin εκχωρείται μία μόνο τιμή, όπως στα μέχρι τώρα παραδείγματα, και τα τέσσερα περιθώρια του πλαισίου τη χρησιμοποιούν. Όταν γράφονται δύο τιμές, η πρώτη ορίζει το επάνω και το κάτω περιθώριο, ενώ η δεύτερη το δεξιό και το αριστερό περιθώριο. Χρησιμοποιώντας το margin: 1em 2em, για παράδειγμα, ορίζει ένα κενό 1 em για το επάνω και κάτω περιθώριο και ένα κενό 2 em για το δεξιό και το αριστερό περιθώριο. Η εγγραφή τεσσάρων τιμών ορίζει τα περιθώρια για τις τέσσερις πλευρές κατά τη φορά των δεικτών του ρολογιού, ξεκινώντας από την κορυφή. Οι διάφορες τιμές σε αυτή τη συντομογραφημένη ιδιότητα, δεν απαιτείται να κάνουν χρήση των ίδιων μονάδων.

Η ιδιότητα padding είναι επίσης μια συντομογραφία, ακολουθώντας τις ίδιες αρχές με την ιδιότητα margin.

Στην προεπιλεγμένη συμπεριφορά τους, τα block elements τεντώνονται ώστε να χωρούν στο διαθέσιμο πλάτος. Αυτό όμως δεν είναι υποχρεωτικό. Η ιδιότητα width μπορεί να ορίσει ένα σταθερό οριζόντιο μέγεθος στο κουτί:

Η προσθήκη του width: 6em στον κανόνα CSS συρρικνώνει το πρώτο div οριζόντια, αφήνοντας ένα κενό χώρο στη δεξιά πλευρά του (Figure 4).

Αντί να αφήσουμε το πρώτο div ευθυγραμμισμένο προς τα αριστερά, ίσως θέλουμε να το κεντράρουμε. Το κεντράρισμα ενός κουτιού ισοδυναμεί με τον ορισμό περιθωρίων ίδιου μεγέθους και στις δύο πλευρές, επομένως μπορούμε να χρησιμοποιήσουμε την ιδιότητα margin για να το κεντράρουμε. Το μέγεθος του διαθέσιμου χώρου μπορεί να διαφέρει, επομένως χρησιμοποιούμε την τιμή auto στο αριστερό και το δεξί περιθώριο:

Το αριστερό και το δεξί περιθώριο υπολογίζονται αυτόματα από το πρόγραμμα περιήγησης και το πλαίσιο θα κεντραριστεί (Figure 5).

Όπως φάνηκε, κάνοντας ένα block element στενότερο δεν καθιστά τον υπόλοιπο χώρο διαθέσιμο στο επόμενο element. Η φυσική ροή εξακολουθεί να διατηρείται, λες και το στενότερο element εξακολουθεί να καταλαμβάνει όλο το διαθέσιμο πλάτος.

Η κανονική ροή είναι απλή και διαδοχική. Το CSS σάς επιτρέπει επίσης να διακόψετε την κανονική ροή και να τοποθετήσετε elements με πολύ συγκεκριμένους τρόπους, παρακάμπτοντας ακόμη και την κύλιση της σελίδας εάν θέλετε. Θα εξετάσουμε αρκετούς τρόπους ελέγχου της θέσης των elements σε αυτήν την ενότητα.

Γνωρίζουμε ότι το CSS παρέχει ιδιότητες που προσαρμόζουν τα μεγέθη των elements και των γραμματοσειρών σε σχέση με τη διαθέσιμη περιοχή οθόνης. Ωστόσο, μπορεί να θέλετε να προχωρήσετε περισσότερο και να χρησιμοποιήσετε διαφορετικό σχεδιασμό για διαφορετικές συσκευές: για παράδειγμα, συστήματα desktop έναντι συσκευών με διαστάσεις οθόνης κάτω από ένα συγκεκριμένο μέγεθος. Αυτή η προσέγγιση ονομάζεται responsive web design και το CSS παρέχει μεθόδους που ονομάζονται mediaqueries για να το καταστήσει δυνατό.

Στο προηγούμενο παράδειγμα, τροποποιήσαμε τη διάταξη της σελίδας για να τοποθετήσουμε τα div elements δίπλα-δίπλα σε στήλες. Αυτή η διάταξη είναι κατάλληλη για μεγαλύτερες οθόνες, αλλά θα είναι πολύ πηγμένη σε μικρότερες οθόνες. Για να λύσουμε αυτό το πρόβλημα, μπορούμε να προσθέσουμε ένα media query στο stylesheet που ταιριάζοντας μόνο οθόνες με τουλάχιστον 600px σε πλάτος:

Οι κανόνες CSS εντός της οδηγίας @media θα χρησιμοποιηθούν μόνο εάν πληρούνται τα κριτήρια στην παρένθεση. Σε αυτό το παράδειγμα, εάν το πλάτος του viewport είναι μικρότερο από 600 px, ο κανόνας δεν θα εφαρμοστεί στο div container και τα children του θα αποδοθούν ως συμβατικά div elements. Το πρόγραμμα περιήγησης αξιολογεί εκ νέου τα media queries κάθε φορά που αλλάζει η διάσταση του viewport, έτσι ώστε η διάταξη να μπορεί να αλλάξει σε πραγματικό χρόνο κατά την αλλαγή του μεγέθους του παραθύρου του προγράμματος περιήγησης ή την περιστροφή του smartphone.