Listeler

Bir sonraki market alışverişinizde satın almayı planladığınız bir grup ürün olduğunu varsayalım. Bunu görsel olarak göstermenin yaygın bir yolu liste kullanmaktır. Ancak alışveriş listenize nasıl stil ekleyebilirsiniz?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Liste oluşturma

Önceki liste, anlamsal bir öğeyle veya <ul> ile başladı. Bu öğenin alt öğeleri, alışveriş listesi öğeleri (<li> öğeleri) idi. Her bir <li> öğesini incelerseniz hepsinin display: list-item değerine sahip olduğunu görebilirsiniz. Bu nedenle tarayıcı varsayılan olarak bir ::marker öğesi oluşturur.

li {
  display: list-item;
}

İki tür liste daha vardır.

<ol> ile sıralı listeler oluşturulabilir. Bu durumda liste öğesi, ::marker olarak bir sayı gösterir.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Açıklama listeleri <dl> ile oluşturulur ancak bu liste türü <li> liste öğesi kullanmıyor.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Liste stilleri

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Liste oluşturmayı öğrendiniz. Artık listelere stil uygulayabilirsiniz. İlk keşfedilen CSS özellikleri, listenin tamamına uygulanan özelliklerdir.

Örneğinize stil uygulamak için kullanabileceğiniz üç liste stili özelliği vardır: list-style-position, list-style-image ve list-style-type.

list-style-position

list-style-position, madde işaretinizi inside veya outside liste öğesinin içeriğine taşımanıza olanak tanır. Varsayılan outside, liste öğesi içeriğine madde işareti eklenmediği anlamına gelir. inside ise liste öğesinin içeriği arasında ilk öğeyi taşır.

Hem outside hem de inside ::marker içeren bir liste. Bu liste, outside&#39;un (varsayılan değer) liste öğesinde olmadığını ve liste öğesi içerik kutusunun içinde olduğunu gösterir.

list-style-image

list-style-image, listenizin madde işaretlerini resimlerle değiştirmenize olanak tanır. Bu sayede, url veya none gibi bir resim ayarlayarak madde işaretlerinizi resim, SVG veya hatta GIF olarak gösterebilirsiniz. Ayrıca herhangi bir medya türünü veya hatta bir veri URI'sini de kullanabilirsiniz.

list-style-image olarak her bir market ürünümüze nasıl resim ekleyebileceğimize göz atalım:

list-style-type

Son seçenek, madde işaretlerini bilinen stil anahtar kelimeleri, özel dizeler, emoji ve daha fazlasına dönüştüren list-style-type öğesine stil uygulamaktır. Olası tüm liste stili türlerini burada görebilirsiniz.

list-style kısaltma

Tüm bu bağımsız özelliklere sahip olduğunuza göre, liste stillerimizin tümünü tek bir satırda ayarlamak için list-style kısaltmasını kullanabilirsiniz:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style, list-style özelliklerinden birini, ikisini veya üçünü herhangi bir sırada belirtmenize olanak tanır. Hem list-style-type hem de list-style-image ayarlanırsa resim kullanılamazsa yedek olarak list-style-type kullanılır.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Bu, bu bölümde ele alınan liste stillerinin en sık kullanılan özelliğidir. Varsayılan stilleri gizlemek için list-style: none yaygın olarak kullanılır. Varsayılan stiller tarayıcıdan gelir ve genellikle sıfırlanan stil sayfalarının dolgu ve kenar boşlukları gibi liste stillerini kaldırdığını görürsünüz. Stil ayarlamak için bu kısaltmayı da kullanabilirsiniz (ör. list-style: square inside;

Şimdiye kadarki örneklerde, bir listenin tamamına ve liste öğelerine stil uygulamaya odaklanıldı. Peki daha ayrıntılı bir yaklaşıma ne dersiniz?

::marker sözde öğe

list-item işaretçi öğesi, listenizdeki her bir öğeyi belirtmeye yardımcı olan madde işareti, kısa çizgi veya Roma rakamıdır.

Üç öğenin yer aldığı bir liste. Bu listedeki her bir madde işaretinin ::marker sözde öğesi olduğunu gösterir.

DevTools'ta listeyi incelerseniz HTML'de hiçbir öğe tanımlanmamış olmasına rağmen liste öğelerinin her biri için bir ::marker öğesi görebilirsiniz. ::marker öğesini daha ayrıntılı bir şekilde incelerseniz tarayıcının varsayılan stilini görürsünüz.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Bir liste bildirdiğinizde, HTML'nizde madde işareti veya Roma rakamı olmamasına rağmen her öğeye bir işaretçi verilir. Tarayıcı bunu sizin için oluşturduğundan ve hedeflemek üzere sınırlı bir stil API'si sağladığından bu bir sözde öğedir. CSS mermisinin anatomisi hakkında daha fazla bilgi edinin. ::marker, Safari'de sınırlı destek alır.

İşaretçi kutusu

CSS düzen modelinde liste öğesi işaretçileri, her liste öğesiyle ilişkili bir işaretçi kutusuyla temsil edilir. İşaretçi kutusu, genellikle madde işaretini veya numarayı içeren kapsayıcıdır.

İşaretçi kutusunu biçimlendirmek için ::marker seçiciyi kullanabilirsiniz. Bu sayede, listenin tamamına göre stil uygulamak yerine yalnızca işaretçiyi seçebilirsiniz.

İşaretçi stilleri

İşaretçiyi seçtiniz. Şimdi bu seçicide kullanılabilen stil özelliklerine bakalım. CSS ::marker ile özel madde işaretleri hakkında daha fazla bilgiyi web.dev'de bulabilirsiniz.

İzin verilen birçok CSS ::marker özelliği vardır:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

Gösterim türü

list-style ve ::marker özelliklerimizin tümü, varsayılan görüntüleme değeri list-item olduğu için <li> öğelerine stil uygulamayı bilir. <li> olmayan öğeleri de liste öğesi haline getirebilirsiniz.

Bunu yapmak için display: list-item özelliğini ekleyin. display: list-item karakterini kullanmaya örnek olarak, bir başlıkta sarkan bir madde işareti kullanmak isteyebilirsiniz. Bu durumda ::marker ile bunu başka bir şeyle değiştirebilirsiniz. Aşağıdaki örnekte, stillendirme amacıyla display: list-item kullanılan bir başlık ve doğru liste işaretlemesini kullanan bir liste gösterilmektedir.

display ile her şeyi liste öğesi görünümüne dönüştürebilirsiniz ancak stil uyguladığınız içerik gerçekten bir listeyse doğru liste işaretlemesi yerine bunu kullanmamalısınız. Bir öğenin görsel görünümünü liste öğesi olarak değiştirmek, erişilebilirlik hizmetlerinin öğeyi okuma ve tanıma şeklini değiştirmez. Bu nedenle, ekran okuyucularda liste öğesi olarak okunmaz veya cihazlar arasında geçiş yapmaz. Her zaman semantik işaretleme kullanmalı ve mümkün olduğunda <li> ile listeler oluşturmalısınız.

Öğrendiklerinizi test etme

Listelerle ilgili bilginizi test edin

Liste öğesinden önce gelen öğeye

::pencil
::counter
::bullet
::marker

Üç tür HTML listesi vardır:

<ul>
<list>
<ol>
<lo>
<dl>
<li>

Bu listedeki hangi iki stil, ::marker öğesine stil uygular?

background-color
transition
display
color

Kaynaklar