CSS LİSTE ÖZELLİKLERİ
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 […]
Devamı...