Next

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

Οι ψευδο-κλάσεις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

pseudo- classes

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

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

Άσκηση

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

pseudo- classes

Λύση:

Next