Css

CSS Temel – CSS Listeler (Lists)

CSS Temel - CSS Listeler (Lists)

Listeler, numaralandırılmış veya bir mermi noktası kümesinin iletilmesinde çok faydalıdır. Bunu CSS Listeler özellik verebilirsiniz.

HTML’de üç farklı liste türü vardır ve her birinin belirli bir amacı ve anlamı vardır:

  • Sırasız liste – Belirli bir sıraya göre bir dizi ilgili öğeyi gruplamak için kullanılır.
  • Sipariş listesi – Bir dizi ilgili öğeyi belirli bir sırayla gruplamak için kullanılır.
  • Açıklama (Tanımlı) listesi – Terimler listesini ve açıklamalarını görüntülemek için kullanılır.

Listeler hakkında daha fazla bilgi için, lütfen HTML listelerindeki öğreticiyi inceleyin.

CSS ile Stil Listeleri

CSS, en sık kullanılan sıralanmamış ve sıralı listelerin şekillendirilmesi için çeşitli özellikler sunar. Bu CSS listesi özellikleri genellikle şunları yapmanıza izin verir:

  • İşaretleyici’nin şeklini veya görünümünü kontrol edin.
  • Madde işareti veya sayı yerine işaretleyici için bir görüntü belirtin.
  • İşaretçi ve listedeki metin arasındaki mesafeyi ayarlayın.
  • İşaretleyicinin veya merminin, sıralanmamış veya sıralı liste öğelerini içeren kutunun içinde mi yoksa dışında mı görüneceğini belirtin.

Sonraki bölümde, stil listelerinde kullanılabilecek özellikler hakkında tartışacağız.

Liste Stili Türü (list-style-type)

Bu varsayılan liste işaretleyici türünü, list-style-type özelliği kullanarak daire, kare, romen rakamları, latin harfleri vb. Gibi başka bir türle değiştirebilirsiniz .

Liste İşaretleyicileri’nin Konumunu Değiştirme (list-style-position)

List-style-position özelliği işaretleyici içinde veya madde işaretleri içeren kutunun dışında görünüp görünmeyeceğini belirler. İki değerden birine sahip olabilir –

Sr.No. Değer ve Açıklama
1 inside

Metin ikinci bir satıra girerse, metin işaretçinin altına sarılır. Ayrıca, listenin dış değeri varsa, metnin başlayacağı yere girintili görünecektir.

2 outside

Metin ikinci bir satıra girerse, metin ilk satırın başlangıcıyla (maddelerin sağına) hizalanır.

İşte bir örnek –

Görüntüleri Liste İşaretleyicileri Olarak Kullanma (list-style-image)

list-style-image Özelliği kullanarak görüntüyü liste işaretçisi olarak da ayarlayabilirsiniz. Verilen görüntüyü bulamazsa, varsayılan madde işaretleri kullanılır.

CSS Liste Kısa Kod Kullanımı (list-style)

List-style tek bir ifadeyele tüm liste özelliklerini belirlemenizi sağlar. Bu özellikler herhangi bir sırada görünebilir.

Not: Kısayol özelliğini kullanırken, değerlerin sırası: list-style-typelist-style-positionlist-style-image. Gerisi belirtilen sırada olduğu sürece yukarıdaki değerlerden birinin eksik olması önemli değildir.

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap