033.2 Μάθημα 1

Ένα από τα πλεονεκτήματα της χρήσης CSS είναι ότι δεν χρειάζεται να γράφετε μεμονωμένους κανόνες σε elements που μοιράζονται το ίδιο style. Ένας αστερίσκος εφαρμόζει τον κανόνα σε όλα τα elements της ιστοσελίδας, όπως φαίνεται στο ακόλουθο παράδειγμα:

Ο selector * δεν είναι η μόνη μέθοδος για την εφαρμογή ενός κανόνα style σε όλα τα elements της σελίδας. Ένας selector που απλώς ταιριάζει με ένα element με το όνομα του tag του ονομάζεται type selector, επομένως οποιοδήποτε όνομα HTML tag όπως body, p, table, em, κ.λπ., μπορεί να χρησιμοποιηθεί ως selectors. Στο CSS, το style του parent κληρονομείται στα children elements. Έτσι, στην πράξη, η χρήση του selector * έχει το ίδιο αποτέλεσμα με την εφαρμογή ενός κανόνα στο element body:

Επιπλέον, η δυνατότητα cascading του CSS σάς επιτρέπει να ρυθμίσετε με ακρίβεια τις κληρονομημένες ιδιότητες ενός element. Μπορείτε να γράψετε έναν γενικό κανόνα CSS που ισχύει για όλα τα elements της σελίδας και, στη συνέχεια, να γράψετε κανόνες για συγκεκριμένα elements ή σύνολα απο elements.

Εάν το ίδιο element ταιριάζει με δύο ή περισσότερους αντικρουόμενους κανόνες, το πρόγραμμα περιήγησης εφαρμόζει τον κανόνα από τον πιο συγκεκριμένο selector. Πάρτε τους ακόλουθους κανόνες CSS ως παράδειγμα:

Το πρόγραμμα περιήγησης θα εφαρμόσει τα styles color: purple και font-size: large σε όλα τα elements μέσα στο element body. Ωστόσο, εάν υπάρχουν li elements στη σελίδα, το πρόγραμμα περιήγησης θα αντικαταστήσει το style font-size: large με το style font-size: small, επειδή ο selector li έχει ισχυρότερη σχέση με το element li από ό,τι κάνει ο selector body.

Το CSS δεν περιορίζει τον αριθμό των ισοδύναμων selectors στο ίδιο stylesheet, επομένως μπορείτε να έχετε δύο ή περισσότερους κανόνες χρησιμοποιώντας τον ίδιο selector:

Σε αυτήν την περίπτωση, και οι δύο κανόνες είναι εξίσου συγκεκριμένοι για το element li. Το πρόγραμμα περιήγησης δεν μπορεί να εφαρμόσει αντικρουόμενους κανόνες, επομένως θα επιλέξει τον κανόνα που θα εμφανιστεί αργότερα στο αρχείο CSS. Για να αποφευχθεί η σύγχυση, η σύσταση είναι να ομαδοποιήσετε όλες τις ιδιότητες που χρησιμοποιούν τον ίδιο selector.

Η σειρά με την οποία εμφανίζονται οι κανόνες στο stylesheet επηρεάζει τον τρόπο εφαρμογής τους στο έγγραφο, αλλά μπορείτε να παρακάμψετε αυτήν τη συμπεριφορά χρησιμοποιώντας έναν κανόνα important. Εάν, για οποιονδήποτε λόγο, θέλετε να διατηρήσετε τους δύο ξεχωριστούς κανόνες li, αλλά να επιβάλετε την εφαρμογή του πρώτου αντί του δεύτερου, σημειώστε τον πρώτο κανόνα ως σημαντικό:

Οι κανόνες που επισημαίνονται με !important θα πρέπει να χρησιμοποιούνται με προσοχή, επειδή σπάνε το φυσικό cascading του stylesheet και καθιστούν πιο δύσκολη την εύρεση και τη διόρθωση προβλημάτων μέσα στο αρχείο CSS.

Είδαμε ότι μπορούμε να αλλάξουμε ορισμένες κληρονομημένες ιδιότητες χρησιμοποιώντας selectors που ταιριάζουν με συγκεκριμένα tags. Ωστόσο, συνήθως χρειάζεται να χρησιμοποιούμε διαφορετικά styles για elements του ίδιου τύπου.

Τα attributes των HTML tags μπορούν να ενσωματωθούν σε selectors για να περιορίσουν το σύνολο των elements στα οποία αναφέρονται. Ας υποθέσουμε ότι η σελίδα HTML στην οποία εργάζεστε έχει δύο τύπους unordered lists (<ul>): ο ένας χρησιμοποιείται στο επάνω μέρος της σελίδας ως menu για τις ενότητες του ιστότοπου και ο άλλος τύπος χρησιμοποιείται για συμβατικές λίστες στο σώμα του κειμένου:

Από προεπιλογή, κάθε αντικείμενο της λίστας έχει έναν μαύρο κύκλο στα αριστερά του. Μπορεί να θέλετε να αφαιρέσετε τους κύκλους από τη λίστα του top menu και να αφήσετε τους κύκλους στην άλλη λίστα. Ωστόσο, δεν μπορείτε απλά να χρησιμοποιήσετε τον selector li γιατί με αυτόν τον τρόπο θα αφαιρεθούν επίσης οι κύκλοι στη λίστα μέσα στο τμήμα του σώματος κειμένου. Θα χρειαστείτε έναν τρόπο για να πείτε στο πρόγραμμα περιήγησης να τροποποιήσει μόνο τα αντικείμενα της λίστας που χρησιμοποιούνται στη μία λίστα, αλλά όχι στην άλλη.

Υπάρχουν διάφοροι τρόποι για να γράψετε selectors που ταιριάζουν με συγκεκριμένα elements στη σελίδα. Όπως αναφέρθηκε προηγουμένως, θα δούμε πρώτα πώς να χρησιμοποιήσουμε τα attributes των elements για να το κάνουμε αυτό. Για αυτό το παράδειγμα συγκεκριμένα, μπορούμε να χρησιμοποιήσουμε το attribute id για να καθορίσουμε μόνο την top λίστα.

Το attribute id εκχωρεί ένα μοναδικό αναγνωριστικό στο αντίστοιχο element, το οποίο μπορούμε να χρησιμοποιήσουμε ως το τμήμα selector του κανόνα CSS. Πριν γράψετε τον κανόνα CSS, επεξεργαστείτε το δείγμα αρχείου HTML και προσθέστε το id="topmenu" στο element ul που χρησιμοποιείται για το top menu:

Υπάρχει ήδη ένα link element στην ενότητα head του εγγράφου HTML που δείχνει το stylesheet αρχείο style.css στον ίδιο φάκελο, ώστε να μπορούμε να προσθέσουμε τους ακόλουθους κανόνες CSS σε αυτό:

Ο hash χαρακτήρας χρησιμοποιείται σε έναν selector, μετά από ένα element, για να ορίσει ένα ID (χωρίς να τα χωρίζουν κενά). Το όνομα του tag στα αριστερά του hash είναι προαιρετικό, καθώς δεν θα υπάρχει άλλο element με το ίδιο ID. Επομένως, ο selector θα μπορούσε να γραφτεί ακριβώς ως #topmenu.

Παρόλο που η ιδιότητα list-style-type δεν είναι άμεση ιδιότητα του ul element, οι ιδιότητες CSS του parent element κληρονομούνται από τα children του, επομένως το style που έχει εκχωρηθεί στο ul element θα κληρονομηθεί από τα child li elements.

Δεν έχουν όλα τα elements ID βάσει του οποίου μπορούν να επιλεγούν. Πράγματι, μόνο μερικά βασικά layout elements σε μια σελίδα αναμένεται να έχουν IDs. Πάρτε, για παράδειγμα, τις λίστες των πλανητών που χρησιμοποιούνται στο δείγμα κώδικα. Αν και είναι δυνατό να εκχωρήσετε μοναδικά IDs για κάθε μεμονωμένο επαναλαμβανόμενο element όπως αυτά, αυτή η μέθοδος δεν είναι πρακτική για μεγαλύτερες σελίδες με πολλά περιεχόμενα. Αντίθετα, μπορούμε να χρησιμοποιήσουμε το ID του parent element div, ως selector για να αλλάξουμε τις ιδιότητες των εσωτερικών του elements.

Ωστόσο, το div element δεν σχετίζεται άμεσα με λίστες HTML, επομένως η προσθήκη της ιδιότητας list-style-type σε αυτό δεν θα έχει καμία επίδραση στα children του. Έτσι, για να αλλάξουμε τον μαύρο κύκλο στις λίστες μέσα στο div περιεχόμενο σε κοίλο κύκλο, θα πρέπει να χρησιμοποιήσουμε έναν descendant selector:

Ο selector #content ul ονομάζεται descendant selector επειδή αντιστοιχεί μόνο στα ul elements, που είναι children του element του οποίου το ID είναι content. Μπορούμε να χρησιμοποιήσουμε όσα επίπεδα descendance χρειάζεται. Για παράδειγμα, η χρήση του #content ul li, θα ταιριάζει μόνο με τα li elements που είναι descendants των ul elements που είναι descendants του element του οποίου το ID είναι content. Αλλά σε αυτό το παράδειγμα, ο μακρύτερος selector θα έχει το ίδιο αποτέλεσμα με τη χρήση του #content ul, επειδή τα li elements κληρονομούν τις ιδιότητες CSS που έχουν οριστεί στο parent ul. Οι descendant selectors είναι μια ουσιαστική τεχνική καθώς το layout της σελίδας μεγαλώνει σε πολυπλοκότητα.

Ας υποθέσουμε ότι τώρα θέλετε να αλλάξετε την ιδιότητα font-style των αντικειμένων της λίστας, στη λίστα topmenu και στη λίστα στο footer div για να φαίνονται oblique. Δεν μπορείτε απλώς να γράψετε έναν κανόνα CSS χρησιμοποιώντας το ul ως selector, γιατί θα αλλάξει επίσης τα αντικείμενα της λίστας στο content div. Μέχρι στιγμής, έχουμε αλλάξει ιδιότητες CSS χρησιμοποιώντας έναν selector κάθε φορά και αυτή η μέθοδος μπορεί επίσης να χρησιμοποιηθεί για αυτήν την εργασία:

Ωστόσο, οι ξεχωριστοί selectors, δεν είναι ο μόνος τρόπος για να το κάνετε. Το CSS μας επιτρέπει να ομαδοποιήσουμε selectors που μοιράζονται ένα ή περισσότερα styles, χρησιμοποιώντας μια λίστα selectors που χωρίζονται με κόμματα:

Η ομαδοποίηση selectors, εξαλείφει την πρόσθετη εργασία της σύνταξης διπλότυπων styles. Επιπλέον, μπορεί να θέλετε να αλλάξετε ξανά την ιδιότητα στο μέλλον, και ίσως να μην θυμηθείτε να την αλλάξετε σε όλα τα διαφορετικά μέρη.

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

Πίσω στη σελίδα του δείγματός μας, θα μπορούσαμε να αφαιρέσουμε τις υπογραμμίσεις από τους συνδέσμους στο top menu και να εμφανίσουμε μια γραμμή μόνο όταν ο δείκτης του ποντικιού μετακινηθεί πάνω από τον αντίστοιχο σύνδεσμο. Για να γίνει αυτό, γράφουμε πρώτα έναν κανόνα για να αφαιρέσουμε την υπογράμμιση από τους συνδέσμους στο top menu:

Στη συνέχεια χρησιμοποιούμε το pseudo-class :hover πάνω στα ίδια elements, για να δημιουργήσουμε έναν κανόνα CSS που θα ισχύει μόνο όταν ο δείκτης του ποντικιού βρίσκεται πάνω από το αντίστοιχο element:

Ο pseudo-class selector :hover δέχεται όλες τις ιδιότητες CSS των συμβατικών κανόνων CSS. Άλλα pseudo-classes περιλαμβάνουν το :visited, το οποίο ταιριάζει με hyperlinks που έχουν ήδη επισκεφτεί και το :focus, το οποίο ταιριάζει με elements φόρμας που έχουν λάβει focus.