Listeleri Şekillendirmek

Listeler çoğunlukla diğer metinler gibi davranır, ancak bilmeniz gereken bazı listelere özgü CSS özellikleri ve uygulama yaklaşımları vardır. Bu ders herşeyi açıklıyor.

Basit bir liste örneğiyle başlayalım. Bu ders boyunca sıralanmamış, sıralanmış ve açıklama listelerine bakacağız. Hepsinin birbirlerine benzeyen, bazılarında ise kendi liste türlerine özgü şekillendirme özellikleri vardır. Github üzerinde biçimlendirilmemiş bir örneğimiz mevcuttur(kaynak koduna bakabilirsiniz).

Liste örneğimizin HTML'si şu şekildedir.

<h2>Sırasız alışveriş listesi</h2>

<p>Referans için paragraf, referans için paragraf, referans için paragraf,
referans için paragraf, referans için paragraf, referans için paragraf.</p>

<ul>
  <li>Humus</li>
  <li>Pide</li>
  <li>Yeşil salata</li>
  <li>Hellim peyniri</li>
</ul>

<h2>Sıralı tarif listesi</h2>

<p>Referans için paragraf, referans için paragraf, referans için paragraf,
referans için paragraf, referans için paragraf, referans için paragraf.</p>

<ol>
  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin</li>
  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
  <li>Salatayı yıkayıp doğrayın</li>
  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
</ol>

<h2>Madde açıklama listesi</h2>

<p>Referans için paragraf, referans için paragraf, referans için paragraf,
referans için paragraf, referans için paragraf, referans için paragraf.</p>

<dl>
  <dt>Humus</dt>
  <dd>Genellikle tahin, limon suyu, tuz, sarımsak ve diğer malzemelerle harmanlanmış nohuttan yapılan koyu bir sos</dd>
  <dt>Pide</dt>
  <dd>Yumuşak, hafif mayalı bir gözleme</dd>
  <dt>Hellim peyniri</dt>
  <dd>Normalden daha yüksek erime noktasına sahip, genellikle keçi/koyun sütünden yapılan yarı sert, olgunlaşmamış, salamura peynir</dd>
  <dt>Yeşil salata</dt>
  <dd>Bir çoğumuzun kebapları süslemek için kullandığımız yeşil sağlıklı sebzeler</dd>
</dl>

Şimdi canlı örneğe giderseniz ve tarayıcı geliştirme araçlarını kullanarak liste öğelerini araştırırsanız, birkaç stil varsayılanını fark edeceksiniz:

• <ul> ve <ol> öğeleri için üst ve alttan 16px(1em) margin için ve soldan 40px(2,5em) padding-left  için varsayılan bir değere sahip olduklarını;
• Liste <li> öğesinin varsayılan dolgu ve kenar boşluğu değerlerinin olmadığını;
• <dl> öğesinin alt ve üstten 16px margin değerine sahip olduğunu fakat herhangi bir dolgu değerinin bulunmadığını;
• Liste <dt> öğesinin varsayılan dolgu ve kenar boşluğu değerinin olmadığını;
• liste <dd> öğesinin margin-left niteliğinin 40px (2.5em.) değerine sahip olduğunu görürsünüz.
• <p> öğesini size referans olması için dahil ettik. Bu öğemiz de, farklı liste türleriyle aynı üst ve alt margin(16px (1em)) değerine sahiptir.

Listelerin şeklini belirlerken, stillerini çevreleyen öğelerle(paragraf ve görüntü gibi; dikey ritmi olarakta adlandırılır) aynı dikey aralığına ve birbirleriyle aynı yatay aralığa sahip olacak şekilde ayarlamamız gerekebilir(you can see the finished styled example on Github, and find the source code too.).

When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other ( bitmiş örneğimizi Github'da bulabilir ve kaynak kodlarınıda görebilirsiniz).

Metin stili ve aralığı için kullanılan CSS aşağıdaki gibidir:

/* Genel Stil */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

• İlk kural, site genelinde bir yazı tipi ve 10 piksellik yazı tipi boyutu belirler. Bunlar sayfadaki her öğe tarafından miras alınır.
• 2. ve 3. kurallar da, başlıklar farklı liste türleri(liste öğelerinin alt öğeleri bunları devralır) ve paragraflar için göreli yazı tipi boyutlarını belirler. Bu, her paragrafın ve listenin aynı yazı tipi boyutuna ve üst/alt aralığa sahip olacağı anlamına gelir ve bu da dikey ritmi tutarlı tutmaya yardımcı olur.
• 4. kural da, line-height niteliği ile dikey ritmin tutarlı tutmaya yardımcı olur. Paragraflarda ve liste öğelerinde aynı işlemi yapar ve böylece paragraflar ve her bir liste öğesi satırlar arasında aynı aralığa sahip olur.
• 5. ve 6. kurallar da, açıklama listesine uygulanır. line-height niteliği ile paragraf ve liste öğelerinde yaptığımız gibi, açıklama listesi terimleri ve açıklamalarında da aynısını belirleriz. Yani tutarlılık iyidir! Ayrıca açıklama terimlerinin kalın yazı tipine sahip olmasını sağlayarak görsel olarak daha kolay öne çıkmasına yardımcı olduk.

Şimdiye kadar listeler için genel boşluk tekniklerine baktık, bundan sonra da listeye özgü bazı özellikleri inceleyelim.

İlk başta bilmeniz gereken, <ul> ve <ol> öğelerinde ayarlanabilen üç nitelik vardır.

• list-style-type: Liste için kullanılacak madde işaretlerinin türünü belirler; örn. sırasız bir liste için kare veya daire madde işaretlerini; sıralı bir liste için sayılar, harfler veya roma rakamları.
• list-style-position: Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde mi yoksa liste içeriğinin dışında mı(sol dışında) görüneceğini belirler.
• list-style-image: Madde işareti için basit bir kare veya daire yerine özel bir görüntü kullanmamızı sağlar

Yukarıda belirtildiği gibi, list-style-type niteliğiyle madde işaretleri için ne tür bir işaret kullanacağını ayarlamamıza izin verir. Örneğimizde, sıralı listeyi büyük harfli roma rakamları kullanacak şekilde ayarlamak için:

ol {
  list-style-type: upper-roman;
}

Kuralını oluşturduğumuzda bize aşağıdaki gibi bir sonuç verir.:

list-style-type referans sayfasına bakarak daha fazla seçenek buluabilirsiniz.

list-style-position, Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde yada liste içeriğinin dışında(sol dışında) görünür. Varsayılan değeri olan outside ile yukarıda görüldüğü gibi madde işaretlerinin liste öğelerinin dışında kalmasına neden olur.

Değeri inside olarak ayarlarsak, madde işaretleri öğe içerik alanı içerisine oturur.

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

list-style-image niteliği madde işaretlerinde özel bir resim kullanılmasını sağlar. Sözdizimi oldukça basittir:

ul {
  list-style-image: url(star.svg);
}

Ancak bu nitelik, madde işareti konumunu, boyutunu vb. gibi özellikleri kontrol etme açısından biraz sınırlıdır. Arka planlar ve sınırlar dersinde background nitelik ailesinde öğrendiklerinizi kullanmanız daha iyi olacaktır. Şimdilik tanıyoruz!

Bitmiş örneğimizde, sıralanmamış listeyi bu şekilde biçimlendirdik(yukarıda daha anlattıklarımızın üstüne):

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Burada aşağıdakileri yaptık:

• padding-left niteliğimizle, <ul> öğemizin 40px olan varsayılan kenar boşluğunu 20px olarak ayarladık, sonra liste öğelerininde aynı kenar boşluğuna sahip olması için bir kural tanımladık. Böylece, sipariş liste öğeleriyle açıklama listesi öğelerinin aynı hizada olmasını sağladık. Eğer liste öğlerine(li) kenar boşluğu vermeseydik, liste öğelerinin arka planı içerisinde görüntülediğimiz resmimizle üst üste gelmesine neden olurdu.
• list-style-type niteliğimize none değerini atayarak, liste madde işaretlerinde herhangi bir şeyin görüntülenmesini engelemiş olduk. Böylece background niteliğimizle yerleştireceğimiz madde işaretine temiz bir zemin hazırlamış olduk.
• Sıralanmamış listenin herbir liste öğesine, resmi madde işareti olarak ekledik. İlgili nitelikler aşağıdaki gibidir:
  • background-image: Bu, madde işareti olarak kullanmak istediğimiz resmin dosyasının yolunu belirtiriz.
  • background-position: Bu, seçilen öğenin arka planında görüntünün nerede görüneceğini tanımlar — 0 0; durumunda, her madde işareti tanımlandığı öğenin sol üst köşesinde görüneceği anlamına gelir.
  • background-position: Bu, arka plan resminin boyutunu ayarlar. İdeal olarak madde işaretlerinin liste öğeleriyle aynı boyutta(veya çok az küçük/büyük) olmasını istiyoruz. Madde işaretinin içeriğe oturmasınına izin verdiğimiz dolguya çok iyi uyan bir boyut olan 1.6rem(16px) değeri kullanıyoruz. Madde işareti ile liste öğesinin arasında ki (20px-16px) 4px boşluk çok iyi duruyor.
  • background-repeat: Varsayılan olarak, arka plan resimleri kullanılabilir arka plan alanını doldurana kadar yenilenir. Her durumda görüntünün yalnızca bir kopysının eklenmesini istiyoruz, bu nedenle niteliğimize no-repeat değerini tanımlıyoruz.

Bu bize şu sonucu verir:

Yukarıda belirtilen üç niteliğin tümü, tek bir kısa tanım niteliği kullanılarak tanımlanabilir (list-style). Örn., aşağıdaki CSS:

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

Bununla değiştirilebilir:

ul {
  list-style: square url(example.png) inside;
}

Değerler herhangi bir sırayla girilebilir, biri, ikisi veya üçünü birden tanımlayabilirsiniz (tanımlanmayan değerler için varsayılan değerler kullanılır disc, none ve outside vbg.) Birinci ve ikincideki type ve image türü bildirimin nedeni: Eğer herhangi bir nedenden dolayı resim yüklenemezse de görüntüleyebileceği bir madde işaretini tanımlamaktır.

Bazen sıralı bir listede sıralamanın farklı şekillerde numaralandırılmasını isteyebiliriz — örn. 1'den farkllı bir sayıdan başlayarak veya geriye doğru sayarak veya 1'den fazla adımlarla sayarak. HTML ve CSS'in burada bizlere yardımcı olacak bazı araçları vardır.

start niteliği listenin 1'in haricinde bir sayıdan başlatmak istediğimizde kullanırız. Aşağıdaki örneğimizde listemiz saymaya 4'den başlar:

<ol start="4">
  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
  <li>Salatayı yıkayıp doğrayın</li>
  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
</ol>

Bize bu çıktıyı verir:

reversed niteliği liste numaralandırma sayılarını ileri doğru değilde, geriye doğru yazılmasını sağlar:

<ol start="4" reversed>
  <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
  <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
  <li>Salatayı yıkayıp doğrayın</li>
  <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
</ol>

Gives you this output:

value niteliğiyle liste öğelerine belirli bir sayısal değeri tanımlamamıza izin verir:

<ol>
  <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li>
  <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li>
  <li value="6">Salatayı yıkayıp doğrayın</li>
  <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li>
</ol>

Gives you this output:

Bu aktif öğrenme oturumunda, yukarıda öğrendiklerinizi anlamanızı ve iç içe geçmiş bir liste şekillendirmenizi istiyoruz. Size HTML'yi sağladık ve şunları yapmanızı istiyoruz:

1. Sırasız listeye kare madde işaretleri verin.
2. Sırasız liste öğelerine ve sıralı liste öğelerine yazı tipi boyutlarının 1,5'i kadar yüksekliğinde bir satır yüksekliği verin.
3. Sıralı listeye daha düşük alfabetik madde işaretleri verin.
4. Liste örenğiyle istediğiniz kadar oynayabilirsiniz, madde işareti türleri, boşluklar veya bulabileceğiniz başka özellikleri deneyebilirsiniz.

Bir hata yaparsanız, sıfırla butonunu kullanarak her zaman başlangıça dönebilirsiniz. Gerçekten takılırsanız, olası bir cevap görmek için Çözümü göster düşmesine basabilirsiniz.

CSS sayaçları, liste sayma ve şeklini özelleştirmek için gelişmiş araçlar sağlar, ancak oldukça karmaşıktır. Kendinizi geliştirmek istiyorsanız bunlara bakmanızı öneririz:

• @counter-style
• counter-increment
• counter-reset

Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. Bir topluluk okulunun ana sayfasını düzenleme.

Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.

İlişkili birkaç temel ilkeyi ve belirli özelliği öğrendikten sonra, listelerin stil oluşturmaya alışması nispeten kolaydır. Sonraki makalede bağlantı stil tekniklerine geçeceğiz.

• Previous
• Overview: Styling text
• Next

• Temel metin ve yazı tipi şekilleri
• Listeleri şekillendirme
• Bağlantıları şekillendirme
• Web yazı tipleri
• Bir topluluk okulunun ana sayfasını düzenleme