Sintaks :
pemilih:pseudo-elemen{
properti:nilai;
}
Atau dengan CSS class :
pemilih.class:pseudo-elemen{
properti:nilai;
}
:first-line
Digunakan untuk menambah gaya khusus pada baris pertama dari teks.
Gunakan Notepad :
<html>
<head>
<style type="text/css">
p:first-line{
color:maroon;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>:first-line digunakan untuk menambah gaya khusus pada baris pertama dari teks. Hanya sekedar contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh.</p>
</body>
</html>
Save As .html atau htm .
Anda bisa gunakan properti berikut :
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter
Digunakan untuk menambah gaya khusus pada huruf pertama dari teks. Mudah-mudahan ini menjawab sahabat saya yang bertanya "bro, gimana cara untuk membuat setiap huruf pertama paragraf menjadi besar ?".
Contoh :
p:first-letter{
font-size:20px;
color:yellow;
}
Jadinya akan seperti ini...
Anda bisa gunakan properti berikut :
- font
- color
- background
- margin
- padding
- border
- text-decoration
- float
- vertical-align (bisa digunakan jika float:none;)
- text-transform
- line-height
- clear
Pseudo-elemen dan CSS Class
Contoh CSS :
p.contoh:first-letter{
font-size:20px;
color:yellow;
}
Contoh HTML :
<p class="contoh">Blog Nano Yulianto</p>
Kombinasi pseudo-elemen
Beberapa pseudo-elemen dapat dikombinasikan
Contoh :
p:first-letter{
font-size:20px;
color:yellow;
}
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
Kombinasi pseudo-elemen hanya sekedar contoh dalam tutorial belajar dasar-dasar kode CSS atau bahasa bataknya CSS Basics.
:before
Digunakan untuk memasukkan beberapa konten sebelum elemen.
Contoh :
p:before{
content:url(http://nanoyulianto.blogspot.com/favicon.ico);
padding-right:10px;
}
Jadinya :before pseudo-elemen
:after
Digunakan untuk memasukan beberapa konten sesudah elemen.
Contoh :
p:after{
content:url(http://nanoyulianto.blogspot.com/favicon.ico);
padding-left:10px;
}
Jadinya :after pseudo-elemen
Alhamdulillah
0 comments:
Posting Komentar