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ğiticileri tamamlayın.

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

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

   Beni denetle!

2. DOM Ağacı'nda maviyle vurgulanan Inspect me! öğesine dikkat edin.

   

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 bölmesinde aloha sınıf kuralını bulun.

   Stiller bölmesinde, DOM Ağacı'nda seçili olan öğeye uygulanan CSS kuralları listelenir. Bu kurallar, hâlâ Inspect me! öğesi olmalıdır.

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

DevTools pencerenizi görüntü alanınızın sağına yerleştirmek istiyorsanız (birinci adımdaki ekran görüntüsünde olduğu gibi) DevTools yerleşimini değiştirme konusuna bakın.

Bir öğeye CSS bildirimi ekleme

Bir öğeye CSS bildirimleri eklemek veya bunları değiştirmek istediğinizde Stiller bölmesini kullanın.

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

   Bana bir arka plan rengi ekle!

2. Stiller bölmesinin üst kısmına yakın bir yerde bulunan element.style simgesini tıklayın.

3. background-color yazıp Enter'a basın.

4. honeydew yazıp Enter'a basın. DOM ağacında öğeye bir satır içi stil bildiriminin 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 bir öğenin nasıl görüneceğini görmek için Stiller bölmesini kullanın.

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

   Bana bir sınıf ekle!

2. .cls'yi tıklayın. Geliştirici Araçları, 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 bir onay kutusu görünür. Burada sınıfı açıp kapatabilirsiniz. Add a class to me! öğesine uygulanan başka sınıflar da varsa bu öğeler arasında geçiş yapabilirsiniz.

Sınıfa sözde durum ekleme

Bir öğeye CSS sözde durumu uygulamak için Stiller bölmesini kullanın. Geliştirici Araçları; :active, :focus, :focus-within, :target, :hover, :visited veya focus-visible dillerini destekler.

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

   Fareyle üzerine gelin!

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

3. Stiller bölmesinde :hov'u tıklayın.

4. :hover onay kutusunu işaretleyin. Fareyle öğenin üzerine gelmediğiniz halde arka plan rengi önceki gibi değişir.

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 bölmesindeki 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.

   Kâr marjımı değiştir!

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

3. Stiller bölmesindeki Kutu Modeli şemasında, fareyle dolgu'nun üzerine gelin. Öğenin dolgusu görüntü alanında vurgulanır.

4. Box Model'de sol kenar boşluğunu çift tıklayın. Öğede şu anda kenar boşlukları bulunmadığından margin-left, - değerine sahiptir.

5. 100 yazıp Enter'a basın.

Kutu Modeli, varsayılan olarak pikseldir, ancak 25% veya 10vw gibi başka değerleri de kabul eder.