Τα ψευδοστοιχεία της CSS χρησιμοποιούνται για να προσθέσουν εφέ σε ορισμένα στοιχεία της σελίδας μας
Σύνταξη ψευδοστοιχείων
Η σύνταξη των ψευδοστοιχείων είναι η παρακάτω:
Σύνταξή με την τιμή class:
Τα ψευδοστοιχεία είναι τα παρακάτω :
Σύνταξη ψευδοστοιχείων
επιλογέας:ψευδοστοιχείο {
ιδιότητα: τιμή;
}
ιδιότητα: τιμή;
}
Σύνταξή με την τιμή class:
Σύνταξη ψευδοστοιχείων με την τιμή class
επιλογέας.τιμή_της_ιδιότητας_class:ψευδοστοιχείο {
ιδιότητα: τιμή;
}
ιδιότητα: τιμή;
}
Τα ψευδοστοιχεία είναι τα παρακάτω :
- :first-line, xρησιμοποιείται για να προσθέσει στυλ στην πρώτη γραμμή του κειμένου του στοιχείου που αναφέρετε ο επιλογέας του στυλ
- :first-letter, xρησιμοποιείται για να προσθέσει στυλ στον πρώτο γράμμα του κειμένου του στοιχείου που αναφέρετε ο επιλογέας του στυλ
Το ψευδοστοιχείο :first-line
Το ψευδοστοιχείο :first-line xρησιμοποιείται για να προσθέσει στυλ στην πρώτη γραμμή του κειμένου του στοιχείου που αναφέρεται ο επιλογέας του στυλ
Στο παρακάτω παράδειγμα, η πρώτη γραμμή της παραγράφου θα εμφανιστεί με μπλε χρώμα:
Δεν μπορούμε να χρησιμοποιήσουμε όλες τις ιδιότητες CSS σε ένα στυλ με το ψευδοστοιχείο :first-line. Οι επιτρεπτές ιδιότητες είναι οι παρακάτω:
Στο παρακάτω παράδειγμα, η πρώτη γραμμή της παραγράφου θα εμφανιστεί με μπλε χρώμα:
Χρήση ψευδοστοιχείου για την πρώτη γραμμή μιας παραγράφου
<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>
<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>
- Όλες οι ιδιότητες της γραμματοσειράς
- Όλες οι ιδιότητες του φόντου
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Το ψευδοστοιχείο :first-letter
Το ψευδοστοιχείο :first-letter xρησιμοποιείται για να προσθέσει στυλ στον πρώτο χαρακτήρα του κειμένου του στοιχείου που αναφέρεται ο επιλογέας του στυλ
Στο παρακάτω παράδειγμα, ο πρώτος χαρακτήρας της παραγράφου, θα εμφανιστεί με μπλε χρώμα:
Δεν μπορούμε να χρησιμοποιήσουμε όλες τις ιδιότητες CSS σε ένα στυλ με το ψευδοστοιχείο :first-letter. Οι επιτρεπτές ιδιότητες είναι οι παρακάτω:
Στο παρακάτω παράδειγμα, ο πρώτος χαρακτήρας της παραγράφου, θα εμφανιστεί με μπλε χρώμα:
Χρήση ψευδοστοιχείου για τον πρώτο χαρακτήρα
<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>
<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>
- Ιδιότητες γραμματοσειράς
- Ιδιότητες του φόντου
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Χρήση και των δύο ψευδοστοιχείων σε ένα στοιχείο της σελίδας
Μπορούμε να εφαρμόσουμε και τα δύο ψευδοστοιχεία σε ένα στοιχείο της σελίδας μας. Για παράδειγμα, αν θέλουμε να εφαρμόσουμε ένα στυλ στην πρώτη γραμμή της παραγράφου και ταυτόχρονα ένα άλλο στυλ για τον πρώτο χαρακτήρα της ίδιας παραγράφου, τότε θα γράψουμε:
Στυλ για την πρώτη γραμμή μιας παραγράφου και για τον πρώτο χαρακτήρα
<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>
<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>