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.
Ön koşullar: | Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım) |
---|---|
Amaç: | Listeleri şekillendirmeyle ilgili en iyi uygulamalara ve özelliklere aşîna olmak. |
Basit bir liste örneği
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 alttan16px
(1em
)margin
için ve soldan40px
(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 üstten16px
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>
öğesininmargin-left
niteliğinin40px
(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 altmargin
(16px (1em)
) değerine sahiptir.
Liste aralıklarını kontrol etme
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.
Listeye özgü şekiller
Ş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
Madde işareti şekilleri
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.
Madde işareti konumu
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;
}
Özel bir madde işareti görüntüsü kullanma
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>
öğemizin40px
olan varsayılan kenar boşluğunu20px
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ğimizenone
değerini atayarak, liste madde işaretlerinde herhangi bir şeyin görüntülenmesini engelemiş olduk. Böylecebackground
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 olan1.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ğimizeno-repeat
değerini tanımlıyoruz.
Bu bize şu sonucu verir:
Liste şekillendirebilen kısa tanım
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.
Liste sayımını kontrol etme
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.
başlangıç
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:
tersten numaralandırmak
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:
Not: Geriye doğru ilerleyen bir listede belirtilen sayıdan daha fazla liste öğesi varsa, sayı sıfır ve ardından negatif sayılara doğru devam eder. 2, 1, 0, -1, -2, ...
değer
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:
Not: Sayı olmayan, farklı bir maddeleme işareti kullansanız bile, yine de value
niteliğindeki değere eş değer bir değer getirilir.
Aktif öğrenme: İç içe listeyi şekillendirme
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:
- Sırasız listeye kare madde işaretleri verin.
- 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.
- Sıralı listeye daha düşük alfabetik madde işaretleri verin.
- 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.
Ayrıca bakınız
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:
Becerilerinizi test edin!
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.
Özet
İ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.