Melihat dan mengubah CSS

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Selesaikan tutorial interaktif ini untuk mempelajari dasar-dasar melihat dan mengubah CSS halaman menggunakan Chrome DevTools.

Melihat CSS elemen

  1. Klik kanan teks Inspect me! di bawah, lalu pilih Periksa. Panel Elements di DevTools akan terbuka.

    Periksa saya!

  2. Amati elemen Inspect me! yang ditandai dengan warna biru di DOM Tree.

    Elemen yang ditandai.

  3. Di DOM Tree, temukan nilai atribut data-message untuk elemen Inspect me!.

  4. Masukkan nilai atribut di kotak teks di bawah.

  5. Di tab Elemen > Gaya, temukan aturan class aloha.

    Tab Gaya mencantumkan aturan CSS yang diterapkan ke elemen apa pun yang dipilih di Hierarki DOM, yang seharusnya masih berupa elemen Inspect me!.

  6. Class aloha mendeklarasikan nilai untuk padding. Masukkan nilai ini dan unitnya tanpa spasi di kotak teks di bawah.

Jika Anda ingin menambatkan jendela DevTools ke kanan area pandang, seperti pada screenshot di langkah pertama, lihat Mengubah penempatan DevTools.

Menambahkan deklarasi CSS ke elemen

Gunakan tab Gaya jika Anda ingin mengubah atau menambahkan deklarasi CSS ke elemen.

  1. Klik kanan teks Add a background color to me! di bawah, lalu pilih Periksa.

    Tambahkan warna latar belakang ke saya.

  2. Klik element.style di dekat bagian atas tab Gaya.

  3. Ketik background-color dan tekan Enter.

  4. Ketik honeydew dan tekan Enter. Di hierarki DOM, Anda dapat melihat bahwa deklarasi gaya inline diterapkan ke elemen.

Menambahkan deklarasi CSS ke elemen melalui tab Gaya.

Menambahkan class CSS ke elemen

Gunakan tab Gaya untuk melihat tampilan elemen saat class CSS diterapkan ke atau dihapus dari elemen.

  1. Klik kanan elemen Add a class to me! di bawah, lalu pilih Periksa.

    Tambahkan kelas ke saya.

  2. Klik .cls. DevTools akan menampilkan kotak teks tempat Anda dapat menambahkan class ke elemen yang dipilih.

  3. Ketik color_me di kotak teks Tambahkan kelas baru, lalu tekan Enter. Kotak centang akan muncul di bawah kotak teks Tambahkan class baru, tempat Anda dapat mengaktifkan dan menonaktifkan class. Jika elemen Add a class to me! memiliki class lain yang diterapkan, Anda juga dapat mengaktifkan dan menonaktifkannya dari sini.

Menerapkan class color_me ke elemen.

Menambahkan pseudostate ke class

Gunakan tab Gaya untuk menerapkan pseudostate CSS ke elemen.

  1. Arahkan kursor ke teks Hover over me! di bawah. Warna latar belakang berubah.

    Arahkan kursor ke saya.

  2. Klik kanan teks Hover over me!, lalu pilih Periksa.

  3. Di tab Gaya, klik :hov.

  4. Centang kotak :hover. Warna latar belakang berubah seperti sebelumnya, meskipun Anda tidak sebenarnya mengarahkan kursor ke elemen.

Mengalihkan pseudostate pengarahan kursor pada elemen.

Untuk informasi selengkapnya, lihat Mengaktifkan/menonaktifkan pseudo-class.

Mengubah dimensi elemen

Gunakan diagram interaktif Model Kotak di tab Gaya untuk mengubah lebar, tinggi, padding, margin, atau panjang batas elemen.

  1. Klik kanan elemen Change my margin! di bawah, lalu pilih Periksa.

    Ubah margin saya.

  2. Untuk melihat Model Kotak, klik tombol Menampilkan sidebar. Tampilkan sidebar di panel tindakan pada tab Gaya. Tombol Tampilkan sidebar.

  3. Pada diagram Model Kotak di tab Gaya, arahkan kursor ke padding. Padding elemen ditandai di area pandang. Padding elemen.

  4. Klik dua kali margin kiri di Model Kotak. Elemen saat ini tidak memiliki margin, sehingga margin-left memiliki nilai -.

  5. Ketik 100 dan tekan Enter. Mengubah margin-left elemen.

Model Kotak ditetapkan secara default ke piksel, tetapi juga menerima nilai lain, seperti 25%, atau 10vw.