CSS'yi görüntüleme ve değiştirme

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome Geliştirici Araçları'nı kullanarak bir sayfanın CSS'sini görüntüleme ve değiştirmeyle ilgili temel bilgileri öğrenmek için bu etkileşimli eğitimleri tamamlayın.

Bir öğenin CSS'sini görüntüleme

  1. Aşağıdaki Inspect me! metnini sağ tıklayıp İncele'yi seçin. Geliştirici Araçları'nın Nesneler paneli açılır.

    Beni inceleyin.

  2. DOM Ağacı'nda Inspect me! öğesinin mavi renkle vurgulandığını gözlemleyin.

    Vurgulanan öğe.

  3. DOM ağacında, Inspect me! öğesinin data-message özelliğinin değerini bulun.

  4. Özelliğin değerini aşağıdaki metin kutusuna girin.

  5. Öğeler > Stiller sekmesinde aloha sınıf kuralını bulun.

    Stiller sekmesinde, DOM Ağacı'nda seçili olan öğeye (Inspect me! öğesi olmaya devam eder) uygulanan CSS kuralları listelenir.

  6. aloha sınıfı, padding için bir değer açıklıyor. Bu değeri ve birimini aşağıdaki metin kutusuna boşluk bırakmadan girin.

DevTools pencerenizi, birinci adımdaki ekran görüntüsünde olduğu gibi görüntü alanınızın sağ tarafına sabitlemek istiyorsanız DevTools yerleşimini değiştirme başlıklı makaleyi inceleyin.

Bir öğeye CSS beyanı ekleme

Bir öğeye CSS beyanları eklemek veya mevcut beyanları değiştirmek istediğinizde Stiller sekmesini kullanın.

  1. Aşağıdaki Add a background color to me! metnini sağ tıklayıp İncele'yi seçin.

    Bana bir arka plan rengi ekleyin.

  2. Stiller sekmesinin üst kısmındaki element.style simgesini tıklayın.

  3. background-color yazıp Enter tuşuna basın.

  4. honeydew yazıp Enter tuşuna basın. DOM ağacında, öğeye satır içi stil beyanının uygulandığını görebilirsiniz.

Stiller sekmesi aracılığıyla öğeye CSS beyanı ekleme.

Bir öğeye CSS sınıfı ekleme

Bir öğeye CSS sınıfı uygulandığında veya öğeden kaldırıldığında öğenin nasıl göründüğünü görmek için Stiller sekmesini kullanın.

  1. Aşağıdaki Add a class to me! öğesini sağ tıklayın ve İncele'yi seçin.

    Bana sınıf ekleyin.

  2. .cls dosyasını tıklayın. DevTools, seçili öğeye sınıf ekleyebileceğiniz bir metin kutusu gösterir.

  3. Yeni sınıf ekle metin kutusuna color_me yazıp Enter tuşuna basın. Yeni sınıf ekle metin kutusunun altında, sınıfı etkinleştirip devre dışı bırakabileceğiniz bir onay kutusu gösterilir. Add a class to me! öğesine uygulanmış başka sınıflar varsa bunları da buradan etkinleştirip devre dışı bırakabilirsiniz.

Öğeye color_me sınıfını uygulama.

Sınıfa sözde durum ekleme

Bir öğeye CSS sözde durumu uygulamak için Stiller sekmesini kullanın.

  1. İmleci aşağıdaki Hover over me! metninin üzerine getirin. Arka plan rengi değişir.

    Fareyle üzerime gelin.

  2. Hover over me! metnini sağ tıklayın ve İncele'yi seçin.

  3. Stiller sekmesinde :hov simgesini tıklayın.

  4. :hover onay kutusunu işaretleyin. Göstergeyi öğenin üzerine getirmeseniz bile arka plan rengi önceki gibi değişir.

Bir öğede fareyle üzerine gelme sözde durumunu değiştirme

Daha fazla bilgi için Sanal sınıfı etkinleştirme veya devre dışı bırakma başlıklı makaleyi inceleyin.

Bir öğenin boyutlarını değiştirme

Bir öğenin genişliğini, yüksekliğini, dolgusunu, kenar boşluğunu veya kenarlık uzunluğunu değiştirmek için Stiller sekmesindeki Kutu Modeli etkileşimli diyagramını kullanın.

  1. Aşağıdaki Change my margin! öğesini sağ tıklayın ve İncele'yi seçin.

    Marjımı değiştirin.

  2. Kutu modelini görmek için Stiller sekmesindeki işlem çubuğunda Kenar çubuğunu gösterin. Kenar çubuğunu göster düğmesini tıklayın. Kenar çubuğunu göster düğmesi.

  3. Stiller sekmesindeki Kutu Modeli diyagramında fareyle dolgu öğesinin üzerine gelin. Öğenin dolgusu görüntü alanında vurgulanır. Öğenin dolgusu.

  4. Kutu Modeli'nde sol kenar boşluğunu çift tıklayın. Öğe şu anda kenar boşluğuna sahip olmadığından margin-left değeri -'tır.

  5. 100 yazıp Enter tuşuna basın. Öğenin margin-left değerini değiştirme.

Kare modeli varsayılan olarak pikselleri kullanır ancak 25% veya 10vw gibi diğer değerleri de kabul eder.