Cara mengganti kelas css di html

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

    


    
   

    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

Bagaimana cara menimpa kelas CSS di HTML?

Bagaimana cara mengganti kelas CSS di div?

Bagaimana cara mengganti kelas CSS sebaris?

Bagaimana cara mengganti kelas di SCSS?