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

Kayce Basques

Sofia Emelianova

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 Öğeler paneli açılır.

   Beni denetle!

2. DOM Ağacı'nda maviyle vurgulanmış Inspect me! öğesini inceleyin.

   

3. DOM Ağacı'nda, Inspect me! öğesi için 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çilen öğeye uygulanan CSS kuralları listelenir. Bu yine de Inspect me! öğesi olmalıdır.

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 olmadan 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 bildirimi ekleme

Bir öğeye CSS bildirimlerini değiştirmek veya eklemek 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 ekle!

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 bir satır içi stil bildirimi uygulandığını görebilirsiniz.

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.

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ıp İ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 eskisi gibi değişir.

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 Box 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ştir!

2. Box Modeli'ni görmek için Stiller sekmesindeki işlem çubuğunda Kenar çubuğunu göster düğmesini tıklayın.

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

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

5. 100 yazıp Enter tuşuna basın.

Box Modeli varsayılan olarak piksel değerini alır ancak 25% veya 10vw gibi diğer değerleri de kabul eder.