p:first-letter{font-style:italic;font-size:200%;}
אותו דבר אפשרי גם לגבי שורה ראשונה:
p:first-line{font-weight:bold;font-size:120%;}
תת אלמנט של A אפשרי גם כן:
A:link{color:gold;}
A:hover{color:white;background-color:gold;}
A:active{color:orange;}
A:visited{color:red;}
הגדרות אלה מורות לדפדפן להציג את תוכן תגית <A> בזהב, לשנות את צבעו ללבן עם רקע זהוב בעת מעבר הסמן עליו, לשנות את צבעו לכתום אחרי הלחיצה ואילו לינק שכבר ביקרנו בו יצבע באדום.
תת-אלמנטים נוספים:
before - מיועד לבצע פעולה כלשהי לפני אובייקט מסויים. בדוגמא הבאה, ישמע צליל לפני הופעת כותרת ראשית:
h1:before {content: url(beep.wav)}
after - מיועד לבצע פעולה כלשהי אחרי אובייקט מסויים. בדוגמא הבאה, ישמע צליל אחרי הופעת כותרת ראשית:
h1:after {content: url(beep.wav)}
ישנם תת-אלמנטים נוספים (אשר בזמן כתיבת שורות אלו עדיין אינם פעילים בדפדפנים):
- focus - אשר מפעיל את הסגנון כאשר האלמנט מקבל פוקוס, בין אם בלחיצת העכבר או בהקשת TAB.
a:link {color: #FF0000} /* unvisited link */
a:focus {color: #00FF00} /* focused link */
- first-child - מצרף סגנון לאלמנט אשר הינו "אלמנט בן" של אלמנט אחר:
<style type="text/css">
p:first-child{color:blue
}</style>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
- lang - מאפשר לתכנת להגדיר את השפה בה יעשה שימוש באלמנט הספציפי.
<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~"}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
רשומות
אין תגובות:
הוסף רשומת תגובה