Dari halaman sebelumnya kita telah belajar bahwa variabel global dapat diakses/digunakan melalui seluruh dokumen, sedangkan variabel lokal hanya dapat digunakan di dalam pemilih tempat dideklarasikan
Lihatlah contoh dari halaman sebelumnya
Contoh
akar {
--biru. #1e90ff;
--putih. #ffffff;
}
tubuh {
warna latar belakang. var[--biru];
}
h2 {
perbatasan-bawah. 2px padat var[--biru];
}
wadah {
warna. var[--biru];
warna latar belakang. var[--putih];
lapisan. 15px;
}
tombol {
warna latar belakang. var[--putih];
warna. var[--biru];
berbatasan. 1px padat var[--biru];
lapisan. 5px;
}
Terkadang kami ingin variabel berubah hanya di bagian halaman tertentu
Asumsikan kita menginginkan warna biru yang berbeda untuk elemen tombol. Kemudian, kita dapat mendeklarasikan ulang variabel --blue di dalam pemilih tombol. Saat kita menggunakan var[--blue] di dalam pemilih ini, ia akan menggunakan nilai variabel --blue lokal yang dideklarasikan di sini
Kita melihat bahwa variabel --blue lokal akan menggantikan variabel --blue global untuk elemen tombol
Contoh
akar {
--biru. #1e90ff;
--putih. #ffffff;
}
tubuh {
warna latar belakang. var[--biru];
}
h2 {
perbatasan-bawah. 2px padat var[--biru];
}
wadah {
warna. var[--biru];
warna latar belakang. var[--putih];
lapisan. 15px;
}
tombol {
--biru. #0000ff;
warna latar belakang. var[--putih];
warna. var[--biru];
berbatasan. 1px padat var[--biru];
lapisan. 5px;
}
Tambahkan Variabel Lokal Baru
Jika sebuah variabel akan digunakan hanya di satu tempat, kita juga bisa mendeklarasikan variabel lokal baru, seperti ini
Contoh
akar {
--biru. #1e90ff;
--putih. #ffffff;
}
tubuh {
warna latar belakang. var[--biru];
}
h2 {
perbatasan-bawah. 2px padat var[--biru];
}
wadah {
warna. var[--biru];
warna latar belakang. var[--putih];
lapisan. 15px;
}
tombol {
--tombol-biru. #0000ff;
warna latar belakang. var[--putih];
warna. var[--tombol-biru];
berbatasan. 1px solid var[--button-blue];
lapisan. 5px;
}
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung fungsi var[]
Cara Mengganti Satu Kelas CSS dengan Yang Lain
Zuzanna Stolińska
11 Mei 2016 • 1 mnt dibaca
Lebih banyak posting oleh penulis ini
Zuzanna Stolińska
Awalnya, Zuzanna bercita-cita menjadi bintang musik sehingga dia belajar bermain gitar
CSS eksternal ditimpa oleh CSS sebaris dan CSS sebaris hanya akan ditimpa oleh. kata kunci penting. Anda dapat menggunakannya dalam tag gaya atau file CSS eksternal
Catatan. Menambahkan kata kunci !important
ke aturan CSS apa pun memungkinkan aturan tersebut secara paksa mendahului semua aturan CSS lainnya untuk elemen tersebut
Ganti gaya CSS dalam HTML [Semua jenis CSS]
Satu-satunya cara untuk mengganti gaya inline adalah dengan menggunakan kata kunci !important
di samping aturan CSS. Mari kita lihat di bawah ini contoh kodenya
div {
color: blue !important;
/* Adding !important will give this rule more precedence over inline style */
}
Hello, World. How can I change this to blue?
Keluaran
Ganti CSS eksternal dengan gaya sebaris
Mari kita lihat cara membuat satu kelas CSS menimpa yang lain menggunakan tag gaya
_Q. Bagaimana cara mengganti CSS sebaris tanpa menggunakan penting?
Menjawab. Anda tidak dapat melakukannya, gaya sebaris diutamakan, Anda dapat menimpanya hanya dengan !important
Q. Bisakah saya mengesampingkan inline ”. penting "?
Menjawab. Anda tidak dapat mengganti CSS sebaris jika memiliki !important
. Ini memiliki prioritas lebih tinggi daripada gaya di file CSS eksternal Anda. , tidak ada cara untuk menimpa !important
inline
Harus Dibaca – Kekhususan CSS oleh MDN 🔗
Berikan komentar jika Anda memiliki cara lain atau kode contoh atau pertanyaan apa pun tentang tutorial ini
Catatan. Semua kode Contoh HTML diuji di browser Firefox dan browser Chrome
OS. Windows 10
Kode. Versi HTML5
Rohit
Gelar dalam Ilmu Komputer dan Insinyur. Pengembang Aplikasi dan memiliki banyak pengalaman bahasa Pemrograman. Antusias terhadap teknologi & suka belajar teknis