![[Belajar HTML #19] Atribut (Class) HTML - class Pada Elemen Inline - Class Tertentu - Banyak class - Class yang Sama - Class dalam JavaScript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcL2gXRwDHHfHkCz2-5NJuOcHN741YSemwMpkmF0EevwnpsJZqNCC28IVdG1k-o7K-WdPQm6dWD7bOZCSV1UdjM2kkwphwgOq6veAv49tUtlG2IJF-0AUBfKP3rU2SS1AfWBLrX7H0FYs/w920-h400-p-k-no-nu/class+atribute.jpg)
Atribut Class HTML
Menggunakan Atribut Class
Atribut class HTML digunakan untuk menentukan gaya yang sama untuk elemen dengan nama Class yang sama.
Jadi, semua elemen HTML dengan atribut class yang sama akan mendapatkan gaya yang sama.
Di sini kita memiliki tiga <div> elemen yang menunjuk ke nama Class yang sama:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London adalah ibu kota Inggris.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris adalah ibu kota Prancis.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang.</p>
</div>
</body>
</html> Hasil:
London
London adalah ibu kota Inggris.
Paris
Paris adalah ibu kota Prancis.
Tokyo
Tokyo adalah ibu kota Jepang.
Menggunakan Atribut Class pada Elemen Inline
Atribut class HTML juga dapat digunakan pada elemen sebaris:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html> Cobalah sendiri "Tip:classatribut dapat digunakan pada setiap elemen HTML.
Catatan: Nama class peka huruf besar kecil!
Pilih Elemen Dengan Class Tertentu
Di CSS, untuk memilih elemen dengan class tertentu, tulis karakter titik (.), Diikuti dengan nama Class:
Perbedaan class dan id untuk CSS:
class Menggunakan tanda titik (.)id Menggunakan tanda pagar (#).
Contoh
Gunakan CSS untuk menata semua elemen dengan nama Class "kota":
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London adalah ibu kota Inggris.</p>
<h2 class="city">Paris</h2>
<p>Paris adalah ibu kota Prancis.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang.</p>
Hasil:
London
London adalah ibu kota Inggris.
Paris
Paris adalah ibu kota Prancis.
Tokyo
Tokyo adalah ibu kota Jepang.
Banyak class
Elemen HTML dapat memiliki lebih dari satu nama Class, setiap nama Class harus dipisahkan oleh spasi.
Contoh
Elemen gaya dengan nama class "city", juga elemen gaya dengan nama class "main":
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Cobalah sendiri "Dalam contoh di atas, <h2> elemen pertama milik class "city" dan class "main".
Tag Berbeda Dapat Membagikan Class yang Sama
Tag yang berbeda, suka <h2>dan <p>, dapat memiliki nama Class yang sama dan karenanya berbagi gaya yang sama:
Contoh
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Cobalah sendiri "Menggunakan Atribut Class dalam JavaScript
Nama Class juga dapat digunakan oleh JavaScript untuk melakukan tugas tertentu untuk elemen dengan nama Class yang ditentukan.
JavaScript dapat mengakses elemen dengan nama Class yang ditentukan dengan menggunakan getElementsByClassName()metode:
Contoh
Saat pengguna mengklik tombol, sembunyikan semua elemen dengan nama Class "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city2");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script> Cobalah sendiri "
0 Response to "[Belajar HTML #19] Atribut (Class) HTML - class Pada Elemen Inline - Class Tertentu - Banyak class - Class yang Sama - Class dalam JavaScript"
Post a Comment