Τετάρτη, 18 Μαΐου, 2022
Online σεμινάρια
ΑρχικήcssCSS - Pseudo Classes

CSS – Pseudo Classes

Οι  CSS pseudo-classes (ψευδοκλάσεις) χρησιμοποιούνται για την προσθήκη ειδικών εφέ σε ορισμένους επιλογείς.

Δεν χρειάζεται να χρησιμοποιήσετε JavaScript ή οποιοδήποτε
άλλο script για να χρησιμοποιήσετε αυτά τα εφέ οπότε είναι μια πολύ χρήσιμη πρακτική για την δημιουργία ιστοσελίδων

Μια απλή σύνταξη pseudo-classes είναι η εξής:

selector:pseudo-class {property: value}

Οι κλάσεις CSS μπορούν επίσης να χρησιμοποιηθούν με pseudo classes:

selector.class:pseudo-class {property: value}

Οι πιο συχνά χρησιμοποιούμενες pseudo classes είναι οι εξής:

A/A Value (Τιμή) & Περιγραφή
1 :link

Το χρησιμοποιούμε για να προσθέσουμε ειδικό στυλ σε
έναν σύνδεσμο που δεν έχουμε ανοίξει.

2 :visited

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

3 :hover

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

4 :active

Χρησιμοποιούμε αυτήν την κλάση για να προσθέσουμε ειδικό στυλ σε ένα
ενεργό στοιχείο.

5 :focus

Χρησιμοποιούμε αυτήν την κλάση για να προσθέσουμε ειδικό στυλ σε ένα
στοιχείο που έχουμε εστιάσει.

6 :first-child

Χρησιμοποιούμε αυτήν την κλάση για να προσθέσουμε ειδικό στυλ σε ένα
στοιχείο που είναι το πρώτο παιδί κάποιου άλλου στοιχείου.

7 :lang

Χρησιμοποιούμε αυτήν την κλάση για να καθορίσουμε μια γλώσσα που θα
χρησιμοποιηθεί σε ένα καθορισμένο στοιχείο.

 
Κατά τον ορισμό ψευδοκλάσεων σε ένα μπλοκ <style>…</style>, πρέπει να
σημειωθούν τα ακόλουθα:

  • Το a:hover ΠΡΕΠΕΙ να έρχεται μετά από a:link και a:visited στον ορισμό CSS για να είναι αποτελεσματικό.
  • Το a:active ΠΡΕΠΕΙ να έρχεται μετά το a:hover στον ορισμό CSS για να είναι αποτελεσματικό.
  • Τα ονόματα των ψευδοκλάσεων δεν κάνουν διάκριση πεζών-κεφαλαίων.
  • Οι ψευδοκλάσεις είναι διαφορετικές από τις κλάσεις CSS, αλλά μπορούν να συνδυαστούν.

Η ψευδοκλάση :link

Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :link για να ορίσετε το χρώμα του συνδέσμου. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.html-gr-css-pseudo-classes-link

Η ψευδοκλάση :visited

Το παρακάτω παράδειγμα μας δείχνει πώς να χρησιμοποιήσετε την κλάση :visited για να ορίσετε το χρώμα των συνδέσμων που έχετε επισκεφθεί. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.html-gr-pseudo-classes-visitedΑυτό θα δημιουργήσει τον ακόλουθο σύνδεσμο. Μόλις κάνετε κλικ σε αυτόν τον σύνδεσμο, θα αλλάξει το χρώμα του σε πράσινο.

Η ψευδoκλάση :hover

Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :hover για να αλλάξετε το χρώμα των συνδέσμων όταν φέρνουμε έναν δείκτη του ποντικιού πάνω από αυτόν τον σύνδεσμο. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.
html-gr-css-pseudo-classes-hover

Η ψευδοκλάση :active

Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :active για να αλλάξετε το χρώμα των ενεργών συνδέσμων. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.html-gr-css-pseudo-classes-active

Η ψευδοκλάση :focus

Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε την κλάση :focus για να αλλάξετε το χρώμα των εστιασμένων συνδέσμων. Πιθανές τιμές θα μπορούσαν να είναι οποιοδήποτε όνομα χρώματος σε οποιαδήποτε έγκυρη μορφή.html-gr-css-pseudo-classes-focus

H ψευδοκλάση :first-child

Η ψευδο-κλάση :first-child ταιριάζει με ένα καθορισμένο στοιχείο που είναι το πρώτο παιδί ενός άλλου στοιχείου και προσθέτει ειδικό στυλ σε αυτό το στοιχείο που είναι το πρώτο παιδί κάποιου άλλου στοιχείου. Για να γίνει η εργασία :first-child στον IE <!DOCTYPE> πρέπει να δηλωθεί στην κορυφή του εγγράφου.
Για παράδειγμα, για να δημιουργήσετε εσοχές στην πρώτη παράγραφο όλων των στοιχείων <div>, θα μπορούσατε να χρησιμοποιήσετε αυτόν τον ορισμό:

html-gr-pseudo-classes-first-childΘα έχουμε το ακόλουθο αποτέλεσμα:
html-gr-pseudo-classes-first-child-2.png

Η ψευδοκλάση :lang

Η ψευδο-κλάση :lang, επιτρέπει τη δημιουργία επιλογέων με βάση τη ρύθμιση γλώσσας για συγκεκριμένες ετικέτες.
Αυτή η κλάση είναι χρήσιμη σε έγγραφα που απευθύνονται σε πολλές γλώσσες που έχουν διαφορετικούς κανόνες για συγκεκριμένες γλωσσικές δομές. Για παράδειγμα, η γαλλική γλώσσα χρησιμοποιεί συνήθως αγκύλες (< και >) για σκοπούς αναφοράς, ενώ η αγγλική γλώσσα χρησιμοποιεί εισαγωγικά (‘ και ‘).
Σ’ ένα έγγραφο που πρέπει να αντιμετωπίσει αυτή τη διαφορά, μπορείτε να χρησιμοποιήσετε την ψευδο-κλάση :lang για να αλλάξετε κατάλληλα τα εισαγωγικά. Ο παρακάτω κώδικας αλλάζει την ετικέτα <blockquote> κατάλληλα για τη γλώσσα που χρησιμοποιείται.html-gr-pseudo-classes-lang
Οι επιλογείς :lang θα εφαρμοστούν σε όλα τα στοιχεία του εγγράφου. Ωστόσο, δεν χρησιμοποιούν όλα τα στοιχεία την ιδιότητα της παράθεσης, επομένως το εφέ δεν θα είναι εμφανή για τα περισσότερα στοιχεία.

Στο παράδειγμά μας, θα έχουμε το εξής αποτέλεσμα:

...<< A quote in a paragraph >>...

Μπορείτε να μάθετε περισσότερα για την css στην αντίστοιχη θεματική κατηγορία μας στο blog μας που μπορείτε να βρείτε εδώ ενώ το Εργαστήριο ΤΠΕ Ήρων – Lab ICT Heron πολύ συχνά διοργανώνει σεμινάρια εξ΄αποστάσεως εκ των οποίων κάποια είναι δωρεάν και κάποια με μικρή αμοιβή όταν τα συνδιοργανώνει με κάποιον εξωτερικό φορέα. 

Μετάφραση: Νίκος Τσοχαταρίδης, Μαρία Νάσταρη
Πηγή: tutorialspoint.com

ΔΙΑΒΑΣΤΕ ΠΕΡΙΣΣΟΤΕΡΑ
Προηγούμενο άρθροPHP Functions
Επόμενο άρθροPHP File Uploading
RELATED ARTICLES

CSS – Layers

CSS – Visibility (Ορατότητα)

CSS – Positioning (Tοποθέτηση)

ΑΦΗΣΤΕ ΜΙΑ ΑΠΑΝΤΗΣΗ

εισάγετε το σχόλιό σας!
παρακαλώ εισάγετε το όνομά σας εδώ

- Advertisment -
Online σεμινάρια

ΣΧΕΤΙΚΑ ΑΡΘΡΑ