033.1 Μάθημα 1

Ο απλούστερος τρόπος για να τροποποιήσετε το style ενός συγκεκριμένου element είναι να το γράψετε απευθείας στο tag του element χρησιμοποιώντας το attribute style. Όλα τα ορατά HTML elements επιτρέπουν ένα style attribute, του οποίου η τιμή μπορεί να είναι ένας ή περισσότεροι κανόνες CSS, γνωστοί και ως properties. Ας ξεκινήσουμε με ένα απλό παράδειγμα, ένα element παραγράφου:

Η βασική σύνταξη ενός προσαρμοσμένου CSS property είναι property: value, όπου το property είναι η συγκεκριμένη πτυχή που θέλετε να αλλάξετε στο element και το value ορίζει την αντικατάσταση της προεπιλεγμένης επιλογής που γίνεται από το πρόγραμμα περιήγησης. Ορισμένα properties ισχύουν για όλα τα elements και ορισμένα properties ισχύουν μόνο για συγκεκριμένα elements. Ομοίως, υπάρχουν κατάλληλες τιμές που πρέπει να χρησιμοποιηθούν σε κάθε property.

Για παράδειγμα, για να αλλάξουμε το χρώμα της απλής παραγράφου μας, χρησιμοποιούμε το property color. Το property color αναφέρεται στο foreground χρώμα, δηλαδή στο χρώμα των γραμμάτων της παραγράφου. Το ίδιο το χρώμα μπαίνει στο τμήμα τιμής του κανόνα και μπορεί να καθοριστεί σε πολλές διαφορετικές μορφές, συμπεριλαμβανομένων απλών ονομάτων όπως red, green, blue, yellow κ.λπ. Έτσι, για να γίνει το γράμμα της παραγράφου purple, προσθέστε το προσαρμοσμένο property color: purple στο attribute style του element:

Άλλα προσαρμοσμένα properties μπορούν να μπούν στο ίδιο style property, όμως πρέπει να διαχωρίζονται με ερωτηματικά. Για παράδειγμα, εάν θέλετε να κάνετε το μέγεθος της γραμματοσειράς μεγαλύτερο, προσθέστε το font-size: larger στο style property:

Για να δείτε το αποτέλεσμα αυτών των αλλαγών, αποθηκεύστε το ακόλουθο HTML σε ένα αρχείο και, στη συνέχεια, ανοίξτε το σε ένα πρόγραμμα περιήγησης (τα αποτελέσματα εμφανίζονται στην Figure 1):

Μπορείτε να φανταστείτε κάθε element στη σελίδα ως ένα ορθογώνιο ή ένα πλαίσιο του οποίου τις γεωμετρικές ιδιότητες και τις διακοσμήσεις μπορείτε να χειριστείτε με CSS. Ο μηχανισμός απόδοσης χρησιμοποιεί δύο βασικές τυπικές έννοιες για την τοποθέτηση των elements: τοποθέτηση block και inline τοποθέτηση. Τα block elements καταλαμβάνουν όλο τον οριζόντιο χώρο του parent element και τοποθετούνται διαδοχικά, από πάνω προς τα κάτω. Το ύψος τους (η vertical dimension τους, που δεν πρέπει να συγχέεται με την _ top_ θέση τους στη σελίδα) εξαρτάται γενικά από την ποσότητα περιεχομένου που διαθέτουν. Τα inline elements ακολουθούν τη μέθοδο από αριστερά προς τα δεξιά παρόμοια με τις δυτικές γραπτές γλώσσες: τα elements τοποθετούνται οριζόντια, από αριστερά προς τα δεξιά, έως ότου δεν υπάρχει άλλος χώρος στη δεξιά πλευρά, οπότε το element συνεχίζει σε μια νέα γραμμή ακριβώς κάτω από την τρέχουσα . Elements όπως p, div και section τοποθετούνται ως blocks από προεπιλογή, ενώ elements όπως span, em, a και μεμονωμένα γράμματα τοποθετούνται inline. Αυτές οι βασικές μέθοδοι τοποθέτησης μπορούν να τροποποιηθούν θεμελιωδώς από τους κανόνες του CSS.

Το ορθογώνιο που αντιστοιχεί στο element p, στο body του δείγματος εγγράφου HTML θα είναι ορατό εάν προσθέσετε τo property background-color στον κανόνα (Figure 2):

Καθώς προσθέτετε νέα προσαρμοσμένα CSS properties στο attribute style, θα παρατηρήσετε ότι ο συνολικός κώδικας αρχίζει να γίνεται ακατάστατος. Η σύνταξη πάρα πολλών κανόνων CSS στο attribute style υπονομεύει τον διαχωρισμό δομής (HTML) και παρουσίασης (CSS). Επιπλέον, σύντομα θα συνειδητοποιήσετε ότι πολλά styles μοιράζονται μεταξύ διαφορετικών elements και δεν είναι συνετό να τα επαναλαμβάνετε σε κάθε element.

Αντί να διαμορφώνετε τα elements απευθείας στα style attributes τους, είναι πολύ πιο πρακτικό να πείτε στο πρόγραμμα περιήγησης για ολόκληρη τη συλλογή elements στα οποία ισχύει το προσαρμοσμένο style. Το κάνουμε προσθέτοντας ένα selector στα προσαρμοσμένα properties, αντιστοιχίζοντας elements ανά type, class, unique ID, σχετική θέση κ.λπ. Ο συνδυασμός ενός selector και των αντίστοιχων προσαρμοσμένων properties — επίσης γνωστών ως declarations — ονομάζεται CSS rule. Η βασική σύνταξη ενός CSS rule είναι selector { property: value }. Όπως και στο attribute style, τα properties που χωρίζονται με ερωτηματικά μπορούν να ομαδοποιηθούν, όπως στο p { color: purple; font-size: larger }. Αυτός ο κανόνας ταιριάζει με κάθε element p στη σελίδα και εφαρμόζει τα προσαρμοσμένα properties color και font-size.

Ένας κανόνας CSS για ένα parent element θα ταιριάζει αυτόματα με όλα τα children elements του. Αυτό σημαίνει ότι θα μπορούσαμε να εφαρμόσουμε τα προσαρμοσμένα properties σε όλο το κείμενο της σελίδας, ανεξάρτητα από το αν είναι μέσα ή έξω από ένα tag <p>, χρησιμοποιώντας εναλλακτικά τον selector body: body { color: purple; font-size: larger }. Αυτή η στρατηγική μάς απαλλάσσει από το να γράψουμε ξανά τον ίδιο κανόνα για όλα τα children του, αλλά μπορεί να χρειαστεί να γράψουμε πρόσθετους κανόνες για το “undo” ή την τροποποίηση των κληρονομημένων κανόνων.

Το tag <style> μας επιτρέπει να γράψουμε κανόνες CSS μέσα στη σελίδα HTML που θέλουμε να διαμορφώσουμε. Επιτρέπει στο πρόγραμμα περιήγησης να διαφοροποιήσει τον κώδικα CSS από τον κώδικα HTML. Το tag <style> πηγαίνει στην ενότητα head του εγγράφου:

Το attribute type λέει στο πρόγραμμα περιήγησης τι είδους περιεχόμενο βρίσκεται μέσα στο tag <style>, π.χ. τον MIME τύπο του. Επειδή κάθε πρόγραμμα περιήγησης που υποστηρίζει CSS υποθέτει ότι ο τύπος του tag <style> είναι text/css από προεπιλογή, η συμπερίληψη του attribute type είναι προαιρετική. Υπάρχει επίσης ένα attribute media που υποδεικνύει το μέσο — για παράδειγμα, οθόνες υπολογιστών ή εκτύπωση — στο οποίο ισχύουν οι κανόνες CSS στο tag <style>. Από προεπιλογή, οι κανόνες CSS ισχύουν για οποιοδήποτε μέσο στο οποίο αποδίδεται το έγγραφο.

Όπως και στον κώδικα HTML, τα line breaks και το indentation του κώδικα δεν αλλάζουν τον τρόπο με τον οποίο ερμηνεύονται οι κανόνες CSS από το πρόγραμμα περιήγησης. Ο κώδικας:

έχει το ίδιο ακριβώς αποτέλεσμα με τον κώδικα:

Τα επιπλέον byte που χρησιμοποιούνται από τα κενά διαστήματα και τα line breaks έχουν μικρή διαφορά στο τελικό μέγεθος του εγγράφου και δεν έχουν σημαντικό αντίκτυπο στο χρόνο φόρτωσης της σελίδας, επομένως η επιλογή του layout είναι θέμα προτίμησης. Σημειώστε το ερωτηματικό μετά το τελευταίο declaration (font-size: larger;) του κανόνα CSS. Αυτό το ερωτηματικό δεν είναι υποχρεωτικό, αλλά το να το έχετε εκεί διευκολύνει την προσθήκη άλλου ένα declaration στην επόμενη γραμμή χωρίς να ανησυχείτε μήπως λείπουν ερωτηματικά.

Η ύπαρξη των declarations σε ξεχωριστές γραμμές βοηθά επίσης όταν χρειάζεται να κάνετε comment out ένα declaration. Όποτε θέλετε να απενεργοποιήσετε προσωρινά ένα declaration για λόγους αντιμετώπισης προβλημάτων, για παράδειγμα, μπορείτε να περικλείσετε την αντίστοιχη γραμμή με τα /* και */:

ή:

Γραμμένο έτσι, το declaration font-size: larger θα αγνοηθεί από το πρόγραμμα περιήγησης. Προσέξτε να ανοίξετε και να κλείσετε τα σχόλια σωστά, διαφορετικά το πρόγραμμα περιήγησης ενδέχεται να μην μπορεί να ερμηνεύσει τους κανόνες.

Τα σχόλια είναι επίσης χρήσιμα για τη σύνταξη υπενθυμίσεων σχετικά με τους κανόνες:

Υπενθυμίσεις όπως αυτή στο παράδειγμα είναι αναλώσιμες σε stylesheets που περιέχουν μικρό αριθμό κανόνων, αλλά είναι απαραίτητες για να βοηθήσουν την πλοήγηση σε stylesheets με εκατοντάδες (ή περισσότερους) κανόνες.

Παρόλο που το attribute style και το tag <style> είναι επαρκή για τη δοκιμή προσαρμοσμένων styles και χρήσιμα για συγκεκριμένες καταστάσεις, δεν χρησιμοποιούνται συνήθως. Αντίθετα, οι κανόνες CSS συνήθως διατηρούνται σε ξεχωριστό αρχείο και μπορεί να γίνει αναφορά τους από το έγγραφο HTML.

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

Τα αρχεία CSS έχουν την επέκταση .css και, όπως τα αρχεία HTML, μπορούν να επεξεργαστούν από οποιοδήποτε πρόγραμμα επεξεργασίας απλού κειμένου. Σε αντίθεση με τα αρχεία HTML, τα αρχεία CSS δεν έχουν δομή ανώτατου επιπέδου με ιεραρχικά tags όπως <head> ή <body>. Αντίθετα, το αρχείο CSS είναι απλώς μια λίστα κανόνων που επεξεργάζονται με διαδοχική σειρά από το πρόγραμμα περιήγησης. Οι ίδιοι κανόνες που είναι γραμμένοι μέσα σε ένα tag <style> θα μπορούσαν αντ 'αυτού να μπουν σε ένα αρχείο CSS.

Η συσχέτιση μεταξύ του εγγράφου HTML και των κανόνων CSS που είναι αποθηκευμένοι σε ένα αρχείο ορίζεται μόνο στο έγγραφο HTML. Για το αρχείο CSS, δεν έχει σημασία αν υπάρχουν elements που ταιριάζουν με τους κανόνες του, επομένως δεν χρειάζεται να απαριθμήσετε στο αρχείο CSS τα έγγραφα HTML με τα οποία είναι συνδεδεμένο. Απο την πλευρά του HTML, κάθε συνδεδεμένο stylesheet θα εφαρμοστεί στο έγγραφο, ακριβώς σαν να ήταν γραμμένοι οι κανόνες σε ένα tag <style>.

Το HTML tag <link> ορίζει ένα εξωτερικό stylesheet που θα χρησιμοποιηθεί στο τρέχον έγγραφο και θα πρέπει να βρίσκεται στην ενότητα head του HTML εγγράφου:

Τώρα μπορείτε να τοποθετήσετε τον κανόνα για το element p που χρησιμοποιήσαμε πριν στο αρχείο style.css και τα αποτελέσματα που βλέπει ο επισκέπτης στην ιστοσελίδα θα είναι τα ίδια. Εάν το αρχείο CSS δεν βρίσκεται στον ίδιο κατάλογο με το έγγραφο HTML, καθορίστε το σχετικό ή το απόλυτο μονοπάτι του στο attribute href. Το tag <link> μπορεί να αναφέρεται σε διαφορετικούς τύπους εξωτερικών πόρων, επομένως είναι σημαντικό να καθορίσετε ποια σχέση έχει ο εξωτερικός πόρος με το τρέχον έγγραφο. Για εξωτερικά αρχεία CSS, η σχέση ορίζεται στο rel="stylesheet".

Το attribute media μπορεί να χρησιμοποιηθεί με τον ίδιο τρόπο όπως για το tag <style>: υποδεικνύει τα μέσα, όπως οθόνες υπολογιστών ή εκτύπωση, στα οποία πρέπει να ισχύουν οι κανόνες στο εξωτερικό αρχείο.

Το CSS μπορεί να αλλάξει εντελώς ένα element, αλλά εξακολουθεί να είναι σημαντικό να χρησιμοποιείτε το κατάλληλο element για τα στοιχεία της σελίδας. Διαφορετικά, οι υποστηρικτικές τεχνολογίες, όπως τα screen-readers, ενδέχεται να μην μπορούν να αναγνωρίσουν τα σωστά τμήματα της σελίδας.