HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
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