CSS Podcast - 030: Listeler
Bir sonraki market alışverişi yolculuğunuzda satın almayı planladığınız birkaç ürün olduğunu hayal edin. Bunu görsel olarak temsil etmenin yaygın yollarından biri listedir. Peki 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, semantik öğe veya <ul>
ile, alışveriş listesi öğeleri (<li>
öğeleri) alt öğe olarak başladı. Her <li>
öğesini incelediğinizde hepsinde display: list-item
bulunduğunu görebilirsiniz. Bu nedenle tarayıcı varsayılan olarak ::marker
oluşturur.
li {
display: list-item;
}
İki tür liste daha vardır.
Sıralı listeler <ol>
ile oluşturulabilir. Bu durumda, liste-öğesinde ::marker
olarak bir sayı gösterilir.
<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 öğesini kullanmaz.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
Liste stilleri
Artık liste oluşturmayı öğrendiğinize göre liste stillerini belirleyebilirsiniz. Keşfedilecek ilk CSS özellikleri, listenin tamamına uygulanan özelliklerdir.
Örneğinizin stilini belirlemek için kullanabileceğiniz liste tarzı üç özellik vardır: list-style-position
, list-style-image
ve list-style-type
.
list-style-position
list-style-position
madde noktanızı liste öğesinin içeriğine inside
veya outside
taşımanıza olanak tanır. Varsayılan outside
, madde işaretinin liste öğesi içeriğine dahil edilmediği, inside
ise ilk öğeyi liste öğesinin içerikleri arasında taşıdığı anlamına gelir.
list-style-image
list-style-image
, listenizdeki madde işaretlerini resimlerle değiştirmenize olanak tanır. Bu işlem, madde işaretlerini resim, svg veya gif dosyası yapmak için url
veya none
gibi bir resim ayarlamanıza olanak tanır. Ayrıca herhangi bir medya türünü ve hatta bir veri URI'sini de kullanabilirsiniz.
Market ürünlerimizin her birinin resmini list-style-image
olarak nasıl ekleyebileceğimize bakalım:
list-style-type
Son seçenek, list-style-type
stilini belirlemektir. Bu sayede madde işaretleri bilinen stil anahtar kelimeleri, özel dizeler, emojiler ve diğer öğelerle değiştirilir. Olası tüm liste stili türlerini burada görebilirsiniz.
list-style
stenosu
Artık bu özelliklerin tümüne sahip olduğunuza göre, tüm liste stillerimizi tek bir satırda ayarlamak için list-style
kısayolunu kullanabilirsiniz:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
, list-style
özelliklerinden bir, iki veya üçünün kombinasyonlarını herhangi bir sırada bildirmenize olanak tanır. Hem list-style-type
hem de list-style-image
ayarlanırsa resim kullanılamadığında 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. Yaygın olarak kullanılan bir uygulama, varsayılan stilleri gizlemek için list-style: none
işlevidir. Varsayılan stiller tarayıcıdan gelir ve genellikle dolgu ve kenar boşlukları gibi liste stillerini kaldıran stil sayfalarının sıfırlandığını görürsünüz. Bu kısaltmayı, list-style: square inside;
gibi stilleri ayarlamak için de kullanabilirsiniz
Şimdiye kadar örnekler listenin tamamının ve liste öğelerinin stilini biçimlendirmeye odaklandı. Peki ya daha ayrıntılı bir yaklaşım?
::marker
sözde öğe
list-item
işaretçi öğesi, listenizdeki her bir öğeyi göstermeye yardımcı olan madde işareti, kısa çizgi veya romen rakamıdır.
Listeyi Geliştirici Araçları'nda incelerseniz HTML'de herhangi bir öğe belirtmeseniz bile liste öğelerinin her biri için bir ::marker
öğesi görebilirsiniz. ::marker
öğesini daha ayrıntılı 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 romen rakamı bulunmasa bile her öğeye bir işaretçi verilir. Bu, sözde öğedir çünkü tarayıcı bunu sizin için oluşturur ve hedeflemek için sınırlı bir stil API'si sağlar. CSS madde işaretinin anatomisi hakkında daha fazla bilgi edinin. ::marker
, Safari'de sınırlı desteğe sahiptir.
İşaretçi kutusu
CSS düzen modelinde, liste öğesi işaretçileri her bir liste öğesiyle ilişkilendirilmiş bir işaretçi kutusuyla gösterilir. İşaretçi kutusu, genellikle madde işaretini veya numarayı içeren kapsayıcıdır.
İşaretçi kutusu stilini belirlemek için ::marker
seçiciyi kullanabilirsiniz. Bu, listenin tamamını temel alarak stil eklemek yerine yalnızca işaretçiyi seçmenize olanak tanır.
İşaretçi stilleri
Artık işaretçiyi seçtiğinize göre, bu seçicinin kullanabileceği stil özelliklerine bakalım. web.dev'de CSS ::marker ile özel madde işaretleri hakkında daha fazla bilgi edinebilirsiniz.
İzin verilen epey CSS ::marker
özelliği vardır:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
Gösterim türü
list-style
ve ::marker
mülklerimizin tümü, varsayılan görüntüleme değeri list-item olduğu için <li>
öğelerinin stilini belirlemesini bilir. <li>
olmayan öğeleri de liste öğesine dönüştürebilirsiniz.
Bunu, display: list-item
mülkünü ekleyerek yapabilirsiniz. display: list-item
kullanımına örnek olarak, başlıkta askıda madde işareti olmasını istediğinizde bunu ::marker
ile başka bir öğeyle değiştirebilirsiniz. Aşağıdaki örnekte, biçimlendirme amacıyla display: list-item
kullanılan bir başlık ve doğru liste işaretlemesini kullanan bir liste gösterilmektedir.
display
ile herhangi bir şeyi liste öğesi görünümüne dönüştürebilirsiniz, ancak stilini oluşturduğunuz içerik gerçekten bir listeyse doğru liste işaretlemesini kullanmak 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 biçimini değiştirmez. Bu nedenle, öğe ekran okuyucularda liste öğesi olarak okunmaz veya cihazlar arasında geçiş yapılmaz. Mümkün olduğunda her zaman anlamsal işaretleme kullanmalı ve <li>
ile listeler oluşturmalısınız.
Öğrendiklerinizi sınayın
Listeler hakkındaki bilginizi test edin
Bir liste öğesinden önce gelen öğeye
HTML listelerinin üç türü
<dl>
<lo>
<ol>
<li>
<ul>
<list>
Bu listedeki hangi iki stil ::marker öğesine stil uygular?
transition
background-color
color
display