Menggunakan CSS, pengguna dapat menambahkan berbagai fitur ke halaman web mereka. Saat pengguna menggunakan beberapa aturan CSS dalam elemen HTML yang sama, mereka harus mengarahkan browser dengan aturan praktis untuk menunjukkan instruksi gaya mana yang harus diprioritaskan
Bergantung pada jenis pemilih mana yang digunakan pengguna untuk memberi gaya pada elemen HTML, aturan ini akan menetapkan atau menentukan gaya mana yang menggantikan yang lain. Inilah yang akan dibahas secara singkat oleh artikel ini dengan berbagai kriteria yang dapat digunakan pengguna di CSS.
Apa maksud Mengesampingkan dalam CSS?
Mengesampingkan berarti menggunakan properti dari satu kelas CSS di atas yang lain. Penggantian dalam CSS menunjukkan bahwa pengguna menggunakan properti gaya apa pun ke elemen HTML tertentu yang telah mereka sediakan gaya CSS-nya
Misalnya, jika pengguna ingin mengubah gaya CSS yang telah mereka gunakan ke elemen HTML menggunakan CSS eksternal, tetapi jika mereka tidak menemukan di mana mereka telah menulis baris kode, maka mereka hanya dapat mengganti gaya CSS lain dengan menggunakan CSS sebaris. . Juga, mereka dapat menggunakan atau. arahan penting yang menimpa kelas CSS di atas yang lain
Urutan prioritas inline style adalah sebagai berikut
lembar gaya inline (tertinggi) >> tag >> lembar gaya eksternal (terendah)
Jadi, ketika muncul konflik antara dua atau lebih gaya CSS di bawah elemen HTML yang sama, gaya terakhir yang akan digunakan pengguna akan diutamakan.
Dua aturan di bawah ini akan membuat pengguna jelas tentang konsep tersebut
- Pengguna harus menempatkan gaya sebaris di dalam tag HTML dari dokumen HTML. Sementara mereka harus menempatkan lembar gaya yang disematkan di dalam tag HTML dari dokumen HTML sehingga browser menggunakan gaya sebaris sebagai yang terakhir digunakan dan didahulukan
- Dalam dokumen HTML, style sheet internal mengambil prioritas lebih tinggi daripada yang eksternal. Itu hanya karena browser akan selalu mempertimbangkan style sheet eksternal atau style sheet tertaut untuk datang sebelum style sheet internal atau sheet tersemat, bahkan jika pengguna menggunakannya atau meletakkannya setelahnya.
Mari kita lihat gaya utama yang berbeda di CSS
Metode 1. Mengganti gaya CSS dengan pemilih ID
It is an example of CSS class overriding where we are using an ID selector to override.
Keluaran
Jalankan Cuplikan Kode
Penjelasan
Pada cuplikan kode di atas, kita dapat melihat bahwa ID didahulukan saat kita menempatkan kelas setelah ID. Kami hanya dapat menggunakan ini ketika kami menetapkan ID dan kelas CSS di bawah elemen HTML yang sama
Metode 2 Mengganti gaya CSS dengan pemilih Kelas
It is an example of CSS class overriding where we use an CSS selector to override...
_Keluaran
Jalankan Cuplikan Kode
Penjelasan
Seperti yang telah kita diskusikan, ketika kita menggunakan pemilih Kelas dan pemilih ID di bawah elemen HTML yang sama, pemilih ID akan didahulukan. Namun dalam contoh kode di atas, kami menggunakan pemilih Kelas di bagian terakhir;
Metode 3. Membuat kelas CSS dengan properti yang berbeda
Ada teknik lain untuk mengganti gaya CSS. Pengguna dapat menerapkan menggunakan satu kelas CSS di atas yang lain. Mari kita pelajari bagaimana pengguna dapat menggunakan CSS untuk mengganti satu kelas CSS dengan yang lain menggunakan cuplikan kode
Cuplikan Kode
Overwriting by redeclaring second Class with different property
Keluaran
Jalankan Cuplikan Kode
Penjelasan
Pengguna dapat menggunakan operator titik untuk menentukan nama kelas CSS, mis. e. ,. nama kelas {}. Di sini, dalam contoh ini, kami menggunakan dua kelas CSS, yaitu bg-maroon dan bg-orange. Di kelas dua, i. e. , di dalam kelas CSS bg-orange, kita mendefinisikan warna latar belakang dan padding teks dengan nilai oranye dan 60 px. Teks di dalam HTML
tag akan merujuk ke kelas kedua
Catatan. Pengguna juga dapat mengubah properti dari
tag dengan mengubah gaya di kelas CSS itu sendiri
Metode 4. Menggunakan Inline CSS
Seperti yang kita ketahui inline CSS adalah bobot tertinggi sehingga akan menimpa semua kelas CSS lainnya
Sinteks
Using inline CSS
Kode
Using inline CSS
_Keluaran
Jalankan Cuplikan Kode
Catatan. Tidak direkomendasikan, Tidak Didukung di halaman AMP
Metode 5. Menggunakan. arahan penting
Metode terakhir melibatkan salah satu teknik paling penting dalam CSS untuk mengganti gaya adalah. arahan penting. Untuk mendeklarasikan kelas dengan. Arahan penting adalah cara terbaik untuk mengganti gaya yang diinginkan pengguna
Saat pengguna menggunakan aturan penting apa pun pada deklarasi gaya CSS, deklarasi ini akan menggantikan gaya CSS lainnya
Mari kita lihat caranya. karya direktif penting
Cuplikan Kode
!important directive
Keluaran
Jalankan Cuplikan Kode
Catatan. Tidak direkomendasikan, Tidak Didukung di halaman AMP
Penjelasan
Direktif memprioritaskan properti gaya CSS yang akan ditambahkan pengguna ". penting. " Ini menunjukkan bahwa gaya itu penting dan dapat mengesampingkan gaya inline. Di baris kode, kami telah menambahkan ". penting" di akhir baris instruksi styling
Kesimpulan
Saat pengguna menggunakan gaya CSS di dalam elemen HTML, mereka dapat mengubah propertinya dengan mengubah atau menambahkan properti baru di kelas tersebut. Juga; . Mengganti kelas CSS itu mudah, efisien, dan dapat menghemat waktu. Kami harap semua teknik di atas dalam artikel ini membantu Anda dengan penggantian gaya CSS