CSS Liste
CSS liste nitelikleri ile HTML dosyanızdaki listele işaretleri ve dizin özelliklerini özelleştirebilirsiniz.
Örnekler
Örnek 1
html>
<head>
<style type="text/css">
ul.bir{list-style-type:circle;}
ul.iki{list-style-type:disc; }
ul.uc{list-style-type:square; }
ul.dort{list-style-type:none; }
</style>
</head>
<body>
<ul class="bir">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ul>
<ul class="iki">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ul>
<ul class="uc">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ul>
<ul class="dort">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ul>
</body>
</html>
Örnek 2
<html>
<head>
<style type="text/css">
ol.bir {list-style-type:lower-alpha;}
ol.iki {list-style-type:upper-roman;}
ol.uc {list-style-type:upper-latin;}
ol.dort {list-style-type:lower-greek;}
</style>
</head>
<body>
<ol class="bir">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ol>
<ol class="iki">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ol>
<ol class="uc">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ol>
<ol class="dort">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ol>
</body>
</html>
Örnek 3
<html>
<head>
<style type="text/css">
ol.bir {list-style-image:url('kare.gif');}
</style>
</head>
<body>
<ol class="bir">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ol>
</body>
</html>
Örnek 4
<html>
<head>
<style type="text/css">
ol.bir {list-style-position:inside;}
ol.iki {list-style-position:outside; }
</style>
</head>
<body>
<p>icerideki liste</p>
<ol class="bir">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ol>
<p>disaridaki liste</p>
<ol class="iki">
<li>Kahve</li>
<li>cay</li>
<li>gazoz</li>
</ol>
</body>
</html>
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com