Bagaimamãng cầu Browser Membaca Kode CSS?

Browser seperti manusia, dia membaca kode CSS dari atas ke bawah danmengikuti perintah-perintah dalam CSS.

Bạn đang xem: Css important! là gì? sử dụng như thế nào cho đúng

Browser selalu menuruti perintah CSS, tapi adomain authority kalanya dia mengabaikanperintah.

Contoh:

Kode CSS


body toàn thân background: black; /* hi brow ganti bg-nya jadi hitam */ color: green; /* teksnya warna hijau ya */

body toàn thân style="background:yellow"> p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed vì eiusgian lận tempor incididunt ut labore et dolore magna aliqua.p> body>
Hasilnya:

Hasil Kode CSS tanpa !important

Ya, jelas warmãng cầu background-nya akan kuning, karena itu perintah terakhiryang diberikan ke browser. Sedangkan perintah yang awal (background: black) diabaikan.

Lalu bagaimana caranya agar hitam?

Di sinilah peran !important.

Kenapa Kita Harus Menggunakan !important?

Seperti kasus di atas, browser akan menuruti perintah terakhir yang diberikan padomain authority CSS.

Prioritas CSS dalam Browser

Maka, untuk memberikan prioritas terhadap perintah tertentu,kita harus menggunakan kata kunci !important.


toàn thân background: blachồng !important; /* hi brow ganti bg-nya jadi hitam (PENTING BANGET!)*/ color: green; /* teksnya warmãng cầu hijau ya */

toàn thân style="background:yellow"> p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed vì chưng eiusmod tempor incididunt ut labore et dolore magmãng cầu aliqua.p> body>
Browser akan tetap memprioritaskan perintah yang diberikan kata kunci !important.

Hasil Kode CSS menggunakan !important

Kapan Waktu yang Tepat Menggunakan Important?

Waktu yang tepat menggunakan !important adalah saat kita menggunakan banyakCSS dalam sebuah halaman web.

Xem thêm: " Greenhouse Gases Là Gì - Khí Nhà Kính (Greenhouse Gas) Là Gì

Menurut saran dari beberapa orang, sebaiknya penggunaan !important dikurangiatau jangan terlalu banyak agar tidak merusak flow CSS-nya…

Tapi menurutcss-tricks.com,penggunaan !important cukup bagus digunakan untuk class .button.

Kenapa?

Begini alasannya:

Misalkan kita punya class .button dengan style seperti ini.


.button background: red; color: white; padding: 3px; border-radius: 5px; border: 1px solid black;
Hasilnya:

Tombol tanpage authority Important

Hasilnya tidak sesuai dengan harapan…

Ada garis bertitik biru di bawahnya, itu disebabkan oleh selektor #nội dung adan ada garis bawah di teksnya disebabkan oleh CSS mặc định untuk tag .

Maka dari itu, class .button harus diberikan !important.


.button background: red !important; color: Trắng !important; padding: 3px !important; border-radius: 5px !important; border: 1px solid black !important; /* agar garis bawah di teks hilang */ text-decoration: none !important;
Hasilnya:

Tombol Setelah menggunakan important

Style tombolnya akan tetap konsisten seperti itu dan tidak akan terpengaruhlagi oleh style CSS yang lain.

Kode lengkap dari contoh di atas:


Akhir Kata…

Terima kasih sudah menyimak sampai akhir, mudah-mudahan bisa dipahami.

Masih bingung?

Cotía tanyakan di komentar…


tác giả avatar
Dukungan untuk Penulis

Suka dengan tulisan saya? Kamu bisa memberikan dukungan denganmentraktir kopi di trakteer.id atau bagikan konten ini di sosial truyền thông media.

❤️ Traktir Penulis
Persiapan Pemrograman C# di Windows dengan Visual Studio
Apage authority sih Bedanya Statement dengan Expression dalam Pemrograman?
Belajar C#: Mengenal Operator Dasar pada C#
Tutorial Codeigniter 4: Cara Membuat CRUD dan Validađắm đuối Data
Belajar Membuat Aplikasay đắm GUI Berbasis Pynhỏ nhắn dan GTK dengan PyGObjectđôi mươi Oct 20trăng tròn • baca 6 menit
Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *