CSS de listelem iki özellikte yer alır. Bunlardan resimli/simgeli liste ve sıralı listedir. Bunlardan resimli/simgeli sıralı liste iconlar olmak üzere circle/disc gibi olanlarıdır. Sıralı listeler ise 1-2, a-b-c, I-II-II şeklinde olan sıralı listelerdir.*/
List-style-type Kullanımı ve Aldığı Değerler
1 2 3 4 5 6 7 8 9 10 11 | .ListStyleType{ list-style-type:none;/*İşaretsiz liste*/ list-style-type: disc;/*Disk işareti koyar*/ list-style-type:circle;/*Çember şeklinde işaret koyar.*/ list-style-type:square;/*Kare şeklinde işaret koyar.*/ list-style-type:decimal;/*Sıralı rakam yapar*/ list-style-type: lower-roman;/*Sıralı küçük roma rakamı.*/ list-style-type: upper-roman;/*Sıralı büyük roma rakamı.*/ list-style-type: lower-alpha;/*Sıralı küçük harf koyar.*/ list-style-type: upper-alpha;/*Sıralı büyük harf koyar.*/ } |
CSS Liste Özellikleri
1 2 3 4 | .ListStyleImage{ list-style-image: url('resim.jpg'); /*Liste başlıklarına istnilen grafik eklenmiş olur.*/ list-style-image:none;/*Liste özelliğine grafik olmayacağı belirtilir.*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!--www.caglarbostanci.com.tr--> <style> ul{ list-style-image: url('listeresim.jpg');} </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </html> |
1 2 3 4 | .ListeStylePosition{ list-style-position:inside;/*Listitem işaretleri içerden başlar*/ list-style-position:outside;/*list-item işaretleri dışardan başlar*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!--www.caglarbostanci.com.tr--> <style> ul{ list-style-position: outside;} </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </html> |
1 2 3 4 | .ListeMarginOzelligiVerme{ list-style-type:none; margin:0px 0px 10px 120px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!--www.caglarbostanci.com.tr--> <style> ul{ list-style-type:none; margin:0px 0px 10px 120px;} </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </html> |
list-style Kullanımı
list-style özelliği list-style-type, list-style-position, ve list-style-image gibi özellikleri bir arada kullanabileceğimiz bir özelliktir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!--www.caglarbostanci.com.tr--> <style> ul{ list-style:disc inside;} ol{ list-style: url(1.jpg) outside;} ul{ list-style: decimal inside;} </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </html> |
Listeleme Özelliğini Menü Olarak Kullanma
Listeleme ile menü yapımak isteiyorsak list-sytle-type özelliğine none değeri vererek simgleri kaldırıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BİLGİ BALONU</title> <link rel="stylesheet" type="text/css" href="font/css/benim.css"> <!-- www.caglarbostanci.com.tr <style> ul#menu{ color:hsla(120,100%,13%,1);/*Menü elemanlarımızın metin rengini yeşil olarak belirledik */ font-weight:bold;/*Menü fontumuzun karakter kalınlığını bold yani kalın olarak belirledik.*/ list-style-type:none;/*Liste başlarındaki disk işaretini kaldırdık*/ margin:0px;/*Listemizi sol tarafa tam olarak yasladık*/ padding:0px;/*Listemizini iç boşluklarını sıfırladık.*/ } ul#menu li{ border-left:10px solid hsla(120,100%,13%,0.5);/*Listemizdeki her li etiketinin soluna 10px genişliğinde solid sitilinde yeşil renkte (opacity özelliğini 0.5 yaparak düşürdük) border verdik*/ border-bottom:2px dashed hsla(120,100%,13%,0.5);/*li etiketlerimizin altına deshed (kesik çizgili) bir border verdik. Kalınlığı 2px rengini yeşil ve opaklığını ise 0.5 yaptık.*/ padding:3px;/*Li etiketlerimizin iç boşluğunu 3px olarak belirledik.*/ margin:5px 0px;/*li etikelerimizin üst ve alt dış boşluklarını 5px olarak belirledik. Sağ ve sol dış boşlukları ise 0px.*/ cursor:pointer;/*li elemenlerimizin fare üzerinde geldiğinide bir el işareti çıkacak buda bu metinlerin bir link olduğunu belirtecek.*/ /*display:inline; /*Bu özelliği eklediğimizde listemiz alt alta değil yan yana sıralanacaktır.*/ } ul#menu li:hover{ /*Fare li elementlerinin üzerine geldiğinde oluşacak özellikleri bu alanda belirleyeceğiz*/ border-color:hsla(0,100%,27%,1);/*li elementinin üzerine gelince kenarlık rengimiz yeşilden kırmızıya dönecek.*/ color:hsla(0,100%,27%,1);/*fare li elementinin üzerine geldiğinde metin rengi kırmızı olacak.*/ } </style> </head> <body> <ul id="menu"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> <li>Element 6</li> <li>Element 7</li> </ul> </html> |
YATAY MENÜ ÖRENĞİ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8"> <title>LİSTELEME ÖZELLİKLERİ</title> <style> ul#menu{ list-style:none;/*Liste özelliklerinin tamamını sıfırladık.*/ margin:0px;/*Dış boşluğu sıfırladık.*/ padding:0px;/*İç boşluğu sıfırladık.*/ } ul#menu li{ display:inline;/*Listelemeyi alt alta yerine yan yana olmasını istedik.*/ cursor:pointer;/*Fare üzerine gelince el işareti belirecek.*/ float:left;/*li elemanlarını sol tarafa yasladık.*/ border-top:5px solid hsla(120,100%,33%,1);/*Li etiketlerinin üstine bir border ekledik*/ border-bottom:1px dashed hsla(120,100%,33%,1);/*Li etikelerinin altına kesik çizgili bir border ekledik.*/ margin:0px 0.3em;/*li etiketlerinin sağ sol boşluklarını 0.3 em yaptık.*/ padding:0.3em 1em 0.3em 0.3em;/*li etiketlerinin iç boşluklarını ayarladık.*/ text-align:left;/*li etiketlerin metin içeriğini sola yasladık.*/ background-color:hsla(0,0%,100%,1);/*li etikelerinin arka planını beyaz yaptık.*/ } ul#menu li a{ text-decoration:none;/*a etiketinin alt çizgisini kaldırdık.*/ color:hsla(120,100%,33%,1);/*a etikentinin metin renginin değiştirdik.*/ font-weight:bold;/*a etiketinin metin kalınlığını artırdık.*/ } ul#menu li:hover,ul#menu li:hover a{ /*ul elementinin li etiketini ve a etiketine fare üzerine geldiğinde özelliği ekledik.*/ color:hsla(0,100%,37%,1);/*Meti rengi kırmızı olacak*/ border-color:hsla(0,100%,37%,1);/*Kenarlık renkleri kırmızı olacak.*/ border-top-width:8px;/*Üst kenarlık genişliği 8px olacak.*/ } </style> </head> <body> <ul id="menu"> <li><a href="">Element 1</a></li> <li><a href="">Element 2</a></li> <li><a href="">Element 3</a></li> <li><a href="">Element 4</a></li> <li><a href="">Element 5</a></li> <li><a href="">Element 6</a></li> </ul> </body> </html> |
DİKEY AÇILIR MENÜ ÖRNEĞİ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AÇILIR MENÜ</title> <style> #menu{ width:18%;/*Menüyü kapsayan divin genişliğini verdik.*/ } #menu ul{ list-style:none;/*menü altındaki ula etiketinin liste özelliğini sıfırladık.*/ margin:0px;/*dış boşluk değerini sıfırladık*/ padding:0px;/*iç boşluk değerini sıfırladık*/ } #menu ul li{/*menü divinden sonra gelen ul ve sonrası olan li*/ position:relative;/*Pozisyon başlangıcı olarak belirledik*/ } #menu li a:link, #menu li a:visited{/*menu id altındaki li nin kapsadığı a etiketi*/ font-size:100%; /*font büyüklüğünü değiştirdik.*/ text-decoration:none;/*a link altındaki çizgiyi kaldırdık.*/ display:block;/*a etiketini enine ve boyuna tam kapsayacak şekilde ayarladık.*/ color: hsla(0,0%,100%,1);/*metin rengini değiştirdik*/ font-weight:bold; /*Metni kalın yaptık*/ font-family:sans-serif;/*Metin sitilini belirledik.*/ border-left:5px solid hsla(120,100%,27%,1);/*Sol kenarlık değerini belirledik.*/ border-bottom:1px solid hsla(120,100%,27%,1);/*Alt kenarlık değerini belirledik.*/ padding:0.3em;/*İç boşluk değerini belirledik.*/ background:hsla(120,100%,27%,0.4);/*Zemin rengi değerini belirledik*/ } #menu li a:hover{/*menu id sinin kapsadığı li ve onun kapsadığı a nın üzerine gelince belirlenecek özellikleri yazdık.*/ background-color:hsla(120,100%,23%,1);/*Arka plan rengini değiştirdik.*/ border-color: hsla(0,0%,87%,1);/*Kenarlık rengini değiştirdik.*/ color:hsla(0,0%,87%,1);/*Metin rengini değiştirdik*/ padding-left:1em; /*iç boşluk değerini değiştirdik.*/ } #menu ul ul{ /*menu id si altında ul kapsayanı ul özelliklerini belirledik.*/ width:100%;/*Genişliğini 100% yaptık.*/ position:absolute;/*Pozisyon değeri vereceğimizi belirttik.*/ left:100%;/*Soldan relative verilen li nin tam sağından başlayacak.*/ top:0px;/*Yine relative verilen li nin üstündan başlayacak.*/ } #menu ul ul a:link, #menu ul ul a:visited{/*menü kapsayan ul ve kapsayan ul kapsayan a etiketi özellikleri*/ color:hsla(0,0%,100%,1);/*Metin rengini değiştirdik.*/ background:hsla(120,100%,27%,0.7); /*Arkaplan özelliğini değiştirdik.*/ } #menu ul ul li a:hover{/*menü kapsayan ul ve kapsayan ul kapsayan a etiketi üzerine gelindiğinde.*/ color:hsla(0,0%,87%,1); /*Metin rengini değiştirdik.*/ background-color:hsla(120,100%,27%,1);/*Arka plan rengini değiştirdik.*/ } #menu ul ul{/*id menu kapsayan ul, kapsayan ul'nin görünürlüğünü pasif yaptık.*/ display:none; } #menu ul li:hover ul{/*id menu kapsayan ul kapsayan li'nin üzerine fare ile varıldığında kapsadığı ul etiketinin görünürlüğünü aktif hale getirdik.*/ display:block; } </style> </head> <body> <div id="menu"> <ul> <li class="altmenu"><a href="">Element 1</a> <ul> <li><a href="">A-Element 1</a></li> <li><a href="">A-Element 2</a></li> <li><a href="">A-Element 3</a></li> </ul></li> <li><a href="">Element 2</a></li> <li><a href="">Element 3</a></li> <li><a href="">Element 4</a></li> <li><a href="">Element 5</a> <ul> <li><a href="">A-Element 4</a></li> <li><a href="">A-Element 5</a></li> <li><a href="">A-Element 6</a></li> </ul></li> <li><a href="">Element 6</a></li> </ul> </div> </body> </html> |
YATAY AÇILIR MENÜ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>YATAY AÇILIR MENÜ</title> <style> #menu{ width:90%; margin:0 auto; } #menu ul{ list-style:none; margin:0px; padding:0px; } #menu ul li{ display:inline; float:left; position:relative; } #menu ul li a:link,#menu ul li a:visited{ text-decoration:none; padding:0.5em 1em 0.5em 1em; color:hsla(0,0%,100%,1); background:hsla(0,100%,37%,1); border-left:2px solid hsla(0,0%,93%,1); font-family:Verdana, Geneva, sans-serif; } #menu ul li a:hover{ background-color:hsla(0,100%,43%,1); } #menu ul li:hover ul{ display:block; } #menu ul ul{ position:absolute; left:0px; top:1.8em; display:none; } #menu ul ul li a:link,#menu ul ul li a:visited{ display:block; width:100%;; border-bottom:1px solid hsla(0,0%,100%,1); } </style> </head> <body> <div id="menu"> <ul> <li><a href="">Element 1</a> <ul> <li><a href="">A-Element 1</a></li> <li><a href="">A-Element 2</a></li> <li><a href="">A-Element 3</a></li> <li><a href="">A-Element 4</a></li> <li><a href="">A-Element 5</a></li> </ul> </li> <li><a href="">Element 2</a></li> <li><a href="">Element 3</a></li> <li><a href="">Element 4</a></li> <li><a href="">Element 5</a></li> <li><a href="">Element 6</a> <ul> <li><a href="">B-Element 1</a></li> <li><a href="">B-Element 2</a></li> <li><a href="">B-Element 3</a></li> <li><a href="">B-Element 4</a></li> <li><a href="">B-Element 5</a></li> </ul> </li> </ul> </div> </body> </html> |