Mengenal lebih dalam CSS Pseudo Element untuk belajar css
Minggu, 01 Oktober 2017
Tambah Komentar
Pseudo digunakan untuk menambah efek khusus pada selektif atau elemen. Ada dua jenis pseudo yaitu:
1. Pseudo-Elemen
2. Pseudo-Class
a. Pseudo-Elemen
Yang masuk Pseudo-Elemen adalah First-line, First-letter, Before dan After
Contoh penulisan Pseudo-Elemen sebagai berikut:
p:First-line {
color: red;
font-size:40px;
}
Coba kamu tuliskan kode css diatasi dalam file yang berintensi CSS. Kemudian dalam file yang berekreasi htm coba tuliskan script seperti dibawah ini.
<! DOCTYPE html>
<head>
<title>Belajar Css</title>
<Link href="stylesheet" href="script.css" type="text/css">
</head>
<body>
<h1><p>Selamat Belajar CSS <br> sampai Sukses</p></h>
</body>
</html>
Coba kamu perhatikan apa yang terjadi setelah Anda Buka.
Lalu kemudian coba Anda masukkan script berikut ini kedalam file css
<style type="text/css">
#p:first-line {
color: red;
font-size: 40px;
}
</style>
Lalu tuliskan kode berikut ini dalam file berekstensi htm
<! DOCTYPE html>
<head>
<title>Belajar Css</title>
<Link href="stylesheet" href="script.css" type="text/css">
</head>
<body>
<h1><p>Selamat Belajar CSS <br> sampai Sukses</p></h>
</body>
</html>
Sekarang coba Anda Buka file tersebut dan coba anda lihat hasilnya dan jangan lupa juga banding kan dengan contoh pertama. SELAMAT MENCOBA
b. Pseudo-Class
Pseudo-Class digunakan memberi efek khusus kepada elemen khususnya yang berkaitan dengan link ada 6 yang masuk dalam Pseudo-Class yaitu Vusited, Hover, active, Focus, First-cild, Lang dan Masing masing memiliki kegunaan yaitu antara lain:
Visited - untuk memberikan style pada elemen yang dikunjungi
Hover - untuk memberikan style pada elemen Ketika Mouse ditempatkan tepa diatas Link yang diberikan efek tersebut.
Active - digunakan untuk memberikan style pada elemen yang berada pada keadaan aktif
Focus - digunakan untuk memberikan style pada elemen Ketika elemen-elemen tersebut menerima sebuah fokus
First-Cild - digunakan untuk memberikan style pada elemen cild pertama dari elemen lainnya.
Lang - digunakan untuk menentukan bahasa apa yang digunakan pada elemen tersebut.
Sebagai contoh, buatlah file bernama skrips.css didalamnya tulislah kode berikut ini:
a link {
color: blue;
}
a: active {
color: brown;
a:Hover {
color: red;
}
a:active {
color: blue;
}
Lalu buatlah file dengan nama latihan.htm lalu didalmna tulislah script berikut ini:
<!IDOCTYPE html>
<head>
<title>Belajar Css</title>
<link href="stylesheet" href="script.css" type="text/css">
</head>
<body>
<a href="http://jual-es.blogspot.com"><h1>Selamat Belajar</h1></a>
</body>
</html>
Letakan latihan.htm dan script.css dalam folder yang sama. Selanjutnya, penampakannya apabila penunjuk Mouse diletakkan di atas teks "Selamat Belajar" maka teks akan berwarna merah dan saat Mouse di Klik teks akan berwarna biru.
1. Pseudo-Elemen
2. Pseudo-Class
a. Pseudo-Elemen
Yang masuk Pseudo-Elemen adalah First-line, First-letter, Before dan After
Contoh penulisan Pseudo-Elemen sebagai berikut:
p:First-line {
color: red;
font-size:40px;
}
Coba kamu tuliskan kode css diatasi dalam file yang berintensi CSS. Kemudian dalam file yang berekreasi htm coba tuliskan script seperti dibawah ini.
<! DOCTYPE html>
<head>
<title>Belajar Css</title>
<Link href="stylesheet" href="script.css" type="text/css">
</head>
<body>
<h1><p>Selamat Belajar CSS <br> sampai Sukses</p></h>
</body>
</html>
Coba kamu perhatikan apa yang terjadi setelah Anda Buka.
Lalu kemudian coba Anda masukkan script berikut ini kedalam file css
<style type="text/css">
#p:first-line {
color: red;
font-size: 40px;
}
</style>
Lalu tuliskan kode berikut ini dalam file berekstensi htm
<! DOCTYPE html>
<head>
<title>Belajar Css</title>
<Link href="stylesheet" href="script.css" type="text/css">
</head>
<body>
<h1><p>Selamat Belajar CSS <br> sampai Sukses</p></h>
</body>
</html>
Sekarang coba Anda Buka file tersebut dan coba anda lihat hasilnya dan jangan lupa juga banding kan dengan contoh pertama. SELAMAT MENCOBA
b. Pseudo-Class
Pseudo-Class digunakan memberi efek khusus kepada elemen khususnya yang berkaitan dengan link ada 6 yang masuk dalam Pseudo-Class yaitu Vusited, Hover, active, Focus, First-cild, Lang dan Masing masing memiliki kegunaan yaitu antara lain:
Visited - untuk memberikan style pada elemen yang dikunjungi
Hover - untuk memberikan style pada elemen Ketika Mouse ditempatkan tepa diatas Link yang diberikan efek tersebut.
Active - digunakan untuk memberikan style pada elemen yang berada pada keadaan aktif
Focus - digunakan untuk memberikan style pada elemen Ketika elemen-elemen tersebut menerima sebuah fokus
First-Cild - digunakan untuk memberikan style pada elemen cild pertama dari elemen lainnya.
Lang - digunakan untuk menentukan bahasa apa yang digunakan pada elemen tersebut.
Sebagai contoh, buatlah file bernama skrips.css didalamnya tulislah kode berikut ini:
a link {
color: blue;
}
a: active {
color: brown;
a:Hover {
color: red;
}
a:active {
color: blue;
}
Lalu buatlah file dengan nama latihan.htm lalu didalmna tulislah script berikut ini:
<!IDOCTYPE html>
<head>
<title>Belajar Css</title>
<link href="stylesheet" href="script.css" type="text/css">
</head>
<body>
<a href="http://jual-es.blogspot.com"><h1>Selamat Belajar</h1></a>
</body>
</html>
Letakan latihan.htm dan script.css dalam folder yang sama. Selanjutnya, penampakannya apabila penunjuk Mouse diletakkan di atas teks "Selamat Belajar" maka teks akan berwarna merah dan saat Mouse di Klik teks akan berwarna biru.
Belum ada Komentar untuk "Mengenal lebih dalam CSS Pseudo Element untuk belajar css"
Posting Komentar
Silahkan berkomentar sesuai dengan topik yang di bahas