Υποενότητα 4.2: Ψευδο-κλάσεις και CSS Display

Ψευδο-κλάσεις

Οι ψευδο-κλάσειςPseudo- classes στο CSS χρησιμοποιούνται για να αλλάξουν την εμφάνιση ενός στοιχείου σε διαφορετικά συμβάντα (events) .

Παράδειγμα συμβάντων:

• Όταν ο χρήατης περνά τον δείκτη του πιντικιού πάνβ από έναν σύνδεσμο (mouse over)
• Όταν ο σύνδεσμος είναι μη επισκεφθείς - not visited, επισκεφθείς  - visited, ή ενεργός - active

Η γενική σύνταξη για τις ψευδο-κλάσεις είναι το όνομα του επιλογέα και η ψευδο-κλάση με άνω- κάτω τελεία μεταξύ τους.

Παράδειγμα:

p: hover { font-size: 1.2em; }

Τα παραπάνω θα κάνουν το κείμενο μέσα σε οποιοδήποτε στοιχείο p να εμφανίζεται μεγαλύτερο όταν ο χρήστης περνά το ποντίκι πάνω από το στοιχείο.

Η συνηθέστερη χρήση των ψευδοκλάδων γίνεται στους συνδέσμους.

Οι σύνδεσμοι έχουν τέσσερις διαφορετικές καταστάσεις.

• a: link: unvisited link
• a: hover: mouse over
• a: active: selected link
• a: visited: visited link

Σημείωση: Στο CSS η active κατάσταση θα πρέπει πάντα να γράφεται μετά την hover κατάσταση του. Η hover κατάσταση θα πρέπει να δηλώνεται μετά τις καταστάσεις link και visited. 

Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_pseudo_classes.asp

Άσκηση

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice04.2.01.html στον φάκελο "Exercises".
2. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση:

CSS Display

Η ιδιότητα εμφάνισης (display property ) χρησιμοποιείται για τον καθορισμό του τρόπου εμφάνισης των στοιχείων στη σελίδα.

Οι πιο συνηθισμένες τιμές για την εμφάνιση είναι inline και block.

Μια πρακτική χρήση της ιδιότητας εμφάνισης βρίσκεται στη γραμμή πλοήγησης.

Η γραμμή πλοήγησης αποτελείται από μια λίστα συνδέσμων.

Σε μια γραμμή πλοήγησης, θέλουμε να επιλέγεται όλη η περιοχή των συνδέσμων (clickable) (συμπεριλαμβανομένου και του περιγράμματος). Αυτό επιτυγχάνεται με τη χρήση της τιμής block. Έτσι, το CSS θα είναι:

li { display: block; }

Μια γραμμή πλοήγησης μπορεί να είναι κάθετη ή οριζόντια.

Από προεπιλογή, η λίστα θα εμφανιστεί κάθετη.

Ωστόσο, αν θέλουμε να δημιουργήσουμε μια οριζόντια γραμμή πλοήγησης, πρέπει να κάνουμε τα στοιχεία της λίστας να εμφανίζονται δίπλα στο άλλο. Αυτό μπορεί να επιτευχθεί εφαρμόζοντας την τιμή inline στην ιδιότητα "εμφάνιση" στο CSS.

Παράδειγμα:

li { display: inline; }

Σημείωση:

Στα παραπάνω παραδείγματα εφαρμόζουμε την ιδιότητα εμφάνισης στα στοιχεία της λίστας <li> και όχι στην ετικέτα <ul>, καθώς θέλουμε να αλλάξουμε η συμπεριφορά αυτών των στοιχείων.

Display: none;

Η ιδιότηταdisplay: none; χρησιμοποιείται συνήθως στη JavaScript για να κρύβει και να εμφανίζει στοιχεία χωρίς να τα διαγράφει ή να τα αναδημιουργεί.