Melihat dan mengubah CSS

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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 Pohon DOM.

    Elemen yang ditandai.

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

  4. Masukkan nilai atribut dalam kotak teks di bawah.

  5. Di panel Elements > Styles, cari aturan class aloha.

    Panel Styles mencantumkan aturan CSS yang diterapkan ke elemen apa pun yang saat ini dipilih di DOM Tree, yang seharusnya tetap berupa elemen Inspect me!.

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

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

Menambahkan deklarasi CSS ke elemen

Gunakan panel 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 panel Styles.

  3. Ketik background-color dan tekan Enter.

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

Menambahkan deklarasi CSS ke elemen melalui panel Styles.

Menambahkan class CSS ke elemen

Gunakan panel Styles 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 menampilkan kotak teks tempat Anda bisa menambahkan class ke elemen yang dipilih.

  3. Ketik color_me di kotak teks Add new class, lalu tekan Enter. Kotak centang akan muncul di bawah kotak teks Add new class, tempat Anda dapat mengaktifkan dan menonaktifkan class. Jika elemen Add a class to me! menerapkan class lain, Anda juga dapat mengalihkannya dari sini.

Menerapkan class color_me ke elemen.

Menambahkan pseudostate ke class

Gunakan panel Gaya untuk menerapkan pseudostate CSS secara permanen ke elemen. DevTools mendukung :active, :focus, :hover, :visited, dan lainnya.

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

    Arahkan kursor ke atas saya!

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

  3. Di panel Styles, klik :hov.

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

Mengalihkan status semu pada elemen.

Mengubah dimensi elemen

Gunakan diagram interaktif Box Model di panel 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 Box Model, klik tombol Tampilkan sidebar. Tampilkan sidebar dalam panel tindakan di panel Styles. Tombol Tampilkan sidebar.

  3. Pada diagram Box Model di panel Styles, arahkan kursor ke padding. Padding elemen ditandai di area pandang. Padding elemen.

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

  5. Ketik 100 dan tekan Enter. Mengubah margin kiri elemen,

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