Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere HTML'de sıralı (ol) ve sırasız (ul) listelere CSS ile nasıl stil verileceğini göstermektedir.
- Video, önce sırasız listelere CSS uygulaması yaparak başlıyor ve ul nesnesine background color, padding ve margin değerleri vererek listelerin görünümünü değiştiriyor. Ardından sıralı listelere geçiş yapılıyor ve ol nesnesine background color, list-style-type, padding ve border değerleri eklenerek daha profesyonel bir liste menüsü oluşturuluyor. Eğitmen, padding ve margin değerlerinin nasıl ayarlanacağını, border'ların nasıl kullanılacağını ve listelerin daha düzenli görünmesi için gerekli CSS kodlarını adım adım gösteriyor.
- 00:01HTML'de Sıralı ve Sırasız Listeler
- Bu derste HTML'de öğrenilen ul (sırasız liste) ve ol (sıralı liste) nesnelerine CSS yazarak görüntülerinin nasıl iyileştirileceği gösterilecek.
- Body içerisine ul nesnesi oluşturulup, "Web Developer Eğitimi", "ASP.NET MVC Eğitimi" ve "Web Forma" gibi elemanlar ekleniyor.
- Varsayılan olarak ul nesnesine tarayıcı tarafından padding değeri veriliyor, bu nedenle içerikler üst üste ve alta yapışmış görünüyor.
- 01:52Ul Nesnesine CSS Uygulama
- Ul nesnesine padding değeri verildiğinde, içeriğin her taraftan belirli bir piksel değerine kadar içeriye kaydığı görülüyor.
- Ul nesnesinin arka planına renk verildiğinde, içeriğin arka planı da aynı renge bürünüyor.
- Li elemanlarına padding değeri verildiğinde, li'ler arasından padding değerleri oluşuyor ve her bir li ayrı bir eleman haline geliyor.
- 03:21Ol Nesnesine CSS Uygulama
- Ol nesnesi için yeni bir stil oluşturuluyor ve arka planına gri renk veriliyor.
- Ol nesnesinin list-style-type'ı none olarak ayarlanarak, li'lerin varsayılan stilini sıfırlıyoruz.
- Ol nesnesine padding, border ve border-bottom değerleri verilerek daha güzel bir liste görünümü elde ediliyor.
- 06:23Listelerin Düzenlenmesi
- Ul nesnesinden gelen padding değeri sıfırlandığında, li'ler birbirine yapışıyor ve çizgi arasındaki boşluk kayboluyor.
- Ol nesnesine padding değeri verildiğinde, li'ler arasında boşluk oluşuyor ve daha düzenli bir görüntü elde ediliyor.
- İki tane border bottom'un üst üste gelmesi durumunda, en son li elemanına border-bottom değeri sıfırlanarak bu sorun çözülüyor.