Μαθήματα CSS

Ψευδοστοιχεία (Pseudo-elements)

Τα ψευδοστοιχεία της CSS χρησιμοποιούνται για να προσθέσουν εφέ σε ορισμένα στοιχεία της σελίδας μας

Σύνταξη ψευδοστοιχείων

Η σύνταξη των ψευδοστοιχείων είναι η παρακάτω:
Σύνταξη ψευδοστοιχείων
επιλογέας:ψευδοστοιχείο {
ιδιότητα: τιμή;
}

Σύνταξή με την τιμή class:
Σύνταξη ψευδοστοιχείων με την τιμή class
επιλογέας.τιμή_της_ιδιότητας_class:ψευδοστοιχείο {
ιδιότητα: τιμή;
}

Τα ψευδοστοιχεία είναι τα παρακάτω :
  • :first-line, xρησιμοποιείται για να προσθέσει στυλ στην πρώτη γραμμή του κειμένου του στοιχείου που αναφέρετε ο επιλογέας του στυλ
  • :first-letter, xρησιμοποιείται για να προσθέσει στυλ στον πρώτο γράμμα του κειμένου του στοιχείου που αναφέρετε ο επιλογέας του στυλ

Το ψευδοστοιχείο :first-line

Το ψευδοστοιχείο :first-line xρησιμοποιείται για να προσθέσει στυλ στην πρώτη γραμμή του κειμένου του στοιχείου που αναφέρεται ο επιλογέας του στυλ

Στο παρακάτω παράδειγμα, η πρώτη γραμμή της παραγράφου θα εμφανιστεί με μπλε χρώμα:
Χρήση ψευδοστοιχείου για την πρώτη γραμμή μιας παραγράφου
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p:first-line {
color:#0000ff;
font-variant:small-caps
}
</style>
</head>
<body>
<p>Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. </p>

</body>
</html>
Δοκίμασε το
Δεν μπορούμε να χρησιμοποιήσουμε όλες τις ιδιότητες CSS σε ένα στυλ με το ψευδοστοιχείο :first-line. Οι επιτρεπτές ιδιότητες είναι οι παρακάτω:

Το ψευδοστοιχείο :first-letter

Το ψευδοστοιχείο :first-letter xρησιμοποιείται για να προσθέσει στυλ στον πρώτο χαρακτήρα του κειμένου του στοιχείου που αναφέρεται ο επιλογέας του στυλ

Στο παρακάτω παράδειγμα, ο πρώτος χαρακτήρας της παραγράφου, θα εμφανιστεί με μπλε χρώμα:
Χρήση ψευδοστοιχείου για τον πρώτο χαρακτήρα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p.paragr1:first-letter {
color:#0000ff;
font-variant:small-caps
}
</style>
</head>
<body>
<p class="paragr1" >Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. </p>

</body>
</html>
Δοκίμασε το
Δεν μπορούμε να χρησιμοποιήσουμε όλες τις ιδιότητες CSS σε ένα στυλ με το ψευδοστοιχείο :first-letter. Οι επιτρεπτές ιδιότητες είναι οι παρακάτω:

Χρήση και των δύο ψευδοστοιχείων σε ένα στοιχείο της σελίδας

Μπορούμε να εφαρμόσουμε και τα δύο ψευδοστοιχεία σε ένα στοιχείο της σελίδας μας. Για παράδειγμα, αν θέλουμε να εφαρμόσουμε ένα στυλ στην πρώτη γραμμή της παραγράφου και ταυτόχρονα ένα άλλο στυλ για τον πρώτο χαρακτήρα της ίδιας παραγράφου, τότε θα γράψουμε:
Στυλ για την πρώτη γραμμή μιας παραγράφου και για τον πρώτο χαρακτήρα
<html>
<head>
<title>Δοκίμασε το</title>
<meta content="text/html; charset=iso-8859-7" />
<style type="text/css">
p:first-letter {
color:Red
font-size:30px;
}
p:first-line {
color:#0000ff;
font-variant:small-caps
}
</style>
</head>
<body>
<p>Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός.
Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. Αυτή είναι μια παράγραφός. </p>

</body>
</html>
Δοκίμασε το
Pin It