HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css liste özellikleri
css listeleme
css listeleme örnekleri
css a list-style
css liste code
lists class css
css for list
css liste kodları
css kod listesi
css list style kullanımı
css liste menü
css liste örnekleri
css list item markers
css list item marker
css list item marker color
css position list
css position list element
css position in list
html css default settings
default settings of css
default settings that comes with css
css shorthand property support
css background shorthand property
css font shorthand property
shorthand property in css
css shorthand properties list
list of css shorthand properties
css list style colors
css list style color
css list style background color

CSS List(Liste)

CSS List(Liste)

Web sitenizde listelerden faydalanacaksınız. Gerek bir konuyu maddeler halinde açıklayacak yada var olan bir grup bilgiyi teker teker listelemek isteyeceksiniz. Bunları yaparken de kısa olan listeleri genelde sırasız(sayımsız) liste olacak şekilde kullanacak, daha uzun listeleri ise sıralı(sayımlı) bir şekilde listenin kaçıncı elemanı olduğunu göstermek isteyeceksiniz. Biz tabi listelerimize nasıl güzel ve uygun şekil verebiliriz, düzenleyebiliriz onu göreceğiz. Aşağıda başlıklar halinde bir web sitesi yaparken sık kullanacağınız liste ile ilgili özellikleri ele almak istedim.

1-Different List Item Markers( Farklı Liste Öğesi İşaretleyicileri)

Liste elemanlarının başında onların listenin bir elemanı olduğunu belirten işaretçiler vardır. Bunlar bir karakter bir şekil, bir sayı, bir harf hatta küçük bir resim bile olabilir.Bu işaretçiler siz listeye eleman ekledikçe otomatik olarak artar yada eğer sırasız bir listeyse aynı imgeyi sürekli başına ekler.

Kullanımı:

Css
ul.a {
list-style-type: circle;
}
ul.b{
list-style-image: url('../../../img/list_icon_bluesquare.gif');
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Html
<p>Sıralı liste:</p>
<ul class="a">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ul>
<ul class="b">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ul>
<p>Sırasız Liste:</p>
<ol class="c">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ol>
<ol class="d">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ol>

2-Position The List Item Markers( Liste Öğesi İşaretleyicilerini Konumlandırma)

Listenizin işaretçileri ile liste elemanı arasındaki mesafe durumunu ayarlamanızı sağlar.

Kullanımı:

Css
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Html
<h2>list-style-position: outside (varsayılan):</h2>
<ul class="a">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ul>
<h2>list-style-position: inside</h2>
<ul class="b">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ul>

3-Remove Default Settings(Varsayılan Ayarları Kaldırma)

Tarayıcı varsayılan olarak siz stil özellikleri belirlemez iseniz de bunun bir liste olduğunu anlar ve siz özellik atamasanız bile varsayılan olarak liste özelliklerini kullanır. Bunu siz kaldırabilirsiniz yani listenizin özelliklerini belirlerken özellik olmaması için ayarlayabilirsiniz

Kullanımı:

Css
ul.temiz {
list-style-type: none;
margin: 0;
padding: 0;
}
Html
<p>Varsayılan liste:</p>
<ul>
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ul>
<p>Liste özellikleri kaldırılmış ama hala liste:</p>
<ul class="temiz">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

4-Shorthand property(Kısa Düzenlenmesi)

Listelerinizin temel stil ayarlarını tek satırda fazla yorulmadan ve kod kalabalığına gerek kalmadan yapabilirsiniz. Bunun için belirli bir sıra doğrultusunda aralarında tek boşluk bırakarak özellikleri atayabilirsiniz. Aşağıdaki örnekte önce uzun halini ardından aynı yapının kısa halini yazalım.

Kullanımı:

Css
ul.kisa {
list-style: square inside url('../../img/list_icon_bluesquare.gif');
}
ul.uzun {
list-style-type: square;
list-style-position: inside;
list-style-image: url('../../img/list_icon_bluesquare.gif');
}
Html
<ul class="kisa">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ul>
<ul class="uzun">
<li>Kahve</li>
<li>Çay</li>
<li>Kola</li>
</ul>

5-Styling List With Colors(Renkler ile Stil Verme)

Biraz daha işleri zorlaştırarak bu sefer sadece listeler yerine listelerin elemanlarını da düzenleyeceğiz. Bu sayede daha iyi bir şekilde listenin düzenine hakim olacağız

Kullanımı:

Css
ol.acikpembe {
background: #ff9999;
padding: 20px;
}
ul.acikmavi {
background: #3399ff;
padding: 20px;
}
ol.acikpembe li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul.acikmavi li {
background: #cce5ff;
margin: 5px;
Html
<ol class="acikpembe">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul class="acikmavi">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>


Paylaş:

Enes KILIÇ
Webmaster