CSS yazarken bazı kurallar koyarsak ve bu kurallara göre kodumuzu yazarsak bir çok konuda yararını göreceğiz.

  • Daha hızlı kod yazma: Belli bir standardınız oluşturunca kod yazmak daha hızlı olacaktır.
  • Birden fazla kişinin çalıştığı durumlarda kolaylık sağlar: Aynı kodlama düzenine sahip olmak beraber çalışmayı kolaylaştırır. Koordinasyonu arttırır.
  • Daha okunabilir kodlar elde ederiz.
  • Daha performanslı sayfalar elde ederiz.
  • Daha sonra kodları güncellememiz gerektiğinde bize kolaylıklar sağlar. Mesela bir projeyi bitirdik 3-4 ay sonra değişiklik geldiğinde düzenimiz standart olduğu için düzeltmelerimizi daha kolay yaparız.

CSS kodu yazarken bazı standartlar oluşturmanın avantajlarından bahsettik yukarıda. Peki bu standartlar nasıl olmalı neler yapmalıyız ki optimum kod elde edelim.

css_duzenleme2

1. CSS doküman indeksini oluşturun

CSS dokümanınız indeksini hazırlayınız. Büyük projelerde tercih edilecek bir husus bence. Şimdiye kadar hiç uygulamadım ama büyük projelerde uygulamanın yararlı olacağını düşündüğüm bir uygulama

/*------------------------------------------------------------------
[CSS Kod indeksi]
1. Body
2. Üst Alan / #ustAlan
2.1. Menü / #menu
3. İçerik Alanı / #icerik
3.1. Sol Kolon / #solKolon
3.2. Sidebar / #yanKolon
3.2.1. RSS / #rss
3.2.2. Arama / #arama
3.2.3. Kutular / .kutu
4. Alt Alan / #altAlan
-------------------------------------------------------------------*/

2. CSS dokümanınıza imzanızı atın

Kod yazarının veya yazarlarının imzası ve genel bilgilerini yazarak kodlarımızı başlamalıyız.(Bende bunu ara sıra unutuyorum. Ama unutmamak gerekli)

/********************************************
MYK Medya - http://myk-medya.com/ yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************************************/

3. Seçici isimlendirirken standart ve anlamlı isimler verin

Seçici isimleri ve genel isimlendirmede bir standardı oturtun.

Anlamlı isimler verin. Anlamlı isimler vermek kod yazarken ve daha sonrası için çok büyük kolaylık sağlayacaktır. XHTML kodların nasıl bir anlamı(body, p, form vd.) varsa, kendi oluşturduğumuz seçici isimlerinde bir anlamı olması mantıklıdır.

#maviKutu yerine #haberKutusu veya #haberAlani tanımı daha mantıklı ve anlamlı bir isimlendirmedir.

İsimlendirmede bir standardınız olsun. Benim standardım bu konuda ilk harf küçük, sonraki kelimelerin baş harfi büyük ile başlar ve bitişik yazılır.

#icerikOzu{..} #solIcerikAlani{..}

Bu benim standardım. Başka türlü standartlarda vardır. Her kesin kendince bir standardı olabilir. Mesela alt çizgiyle ayıranlar var. (-)Tire ile ayıranlar var.

#icerik_ozu{..} #sol-icerik-alani{..}

Bu standardı herkes kendince yapabilir. Benim önerim aynı projede çalışan insanların aynı kodlama yöntemini kullanması, diğer türlü pek hoş olmuyor. Göz aşina olmayınca bir eksik hissediyor insan kod yazarken.

4. Kısaltma kullanın.

CSS tanımlarında kısaltmaları kullanın. CSS kısaltmaları hakkında daha fazla bilgi için http://fatihhayrioglu.com/cssde-kisaltmalar/ okumanızı tavsiye ederim.

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;

yerine

font: bold 11px/15px verdana, sans-serif;

5. CSS dokümanlarınızı anlamlı bölümlere ayırın.

Büyük projelerde css dokümanlarını birden fazla bölümlere ayırarak daha düzenli ve kolay kodlanabilir dokümanlar elde ederiz.

@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/sifirlama.css);

Ben yukarıdaki yöntemi genelde çok büyük projelerde kullanmayı tercih ediyorum. Normalde ve genellikle tek ve iki css dokümanı ile projeyi bitiriyorum. Performans açısından bu daha iyi ayrıca.

Eğer CSS sıfırlama tekniklerinden birini kullanacaksam Bunu imzadan sonraya yazmak. Yada site genel tanımlarını başa yazmak. YUI CSS Reset ve Eric Meyer‘in ki var mesela.

/************************
************************
MYK Medya - http://myk-medya.com/
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu{display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu{height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */

6. Her satıra bir tanım yöntemini kullanın

CSS özelliği tanımlarken her satıra bir tanım yazarak daha uygun kod elde edebiliriz.

Ben daha önce her satıra bir özellik tanımı yapıyordum.

#aramaAlani{
    float:left;
    width:265px;
    background-color:#fff;
    border:3px solid #525252;
}

Bu yöntemde kod açık ve görüntü olarak daha kullanışlı görünse de, fazla boşluklar sorun oluşturmaya başladı. CSS kodları çok uzayınca kaydırma çubuğu ile çok aşağılara in yukarı çık zaman kaybına neden oluyordu.

Her Satırda Bir Tanım Yapma Yöntemi

Bende her satıra bir tanım yöntemini kullanmaya başladım. Aslında benim bu yönteme ilk geçme nedenim olan optimizasyonda css kodlarımı optimize ederken fazla boşluklardan kurtulmam gerektiğiydi. Daha sonra bu yöntemin daha avantajlı olduğunu gördüm, ayrıca daha derli toplu kodlar oluşturmama yaradı. Bundan sonra böyle kod yazamaya başladım.

#anaKapsul{...}
#ustalan{...}
#icerikAlani{...}
#solIcerikAlani{...}
#sagIcerikAlani{...}
#altAlan{...}

Kodlarımızın daha okunabilir olması içinde girintili bir yapıyı tercih etmeliyiz.

#icerikAlani{
	clear: left;
	float: left;
	padding-top: 20px;
}
#solIcerikAlani{
	float: left;
	margin-right: 13px;
	width: 647px;
}
#icerikOzu{
	clear: left;
	float: left;
	margin-top: 20px;
}
#sagIcerikAlani{
	float: left;
	margin: 0;
	width: 300px;
}

7. Kodlarınızı yorum satırları ile açıklayıcı hale getirin.

Kodumuzun anlaşılabilir olması için yorum satırları eklemeliyiz. Bölümleri ve özel alanları yorum kodu ile belirleyerek anlaşılabilirliği arttırabiliriz. Böylelikle bölümler arasında daha kolay ayrım yapabiliriz. Kod okunabilirliği daha fazla olacaktır.

#anaKapsul{margin:0 auto; width:960px;}
/**************************************************** ustalan   */
#ustalan{padding-top:20px;}

/**************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}

/*sol icerik alani */
	#solIcerikAlani{float:left; width:647px; margin-right:13px}
		#icerikOzu{float:left; clear:left; margin-top:20px}

/* sagIcerikAlani */

	#sagIcerikAlani{float:left; width:300px; margin:0;}       

8. CSS özellik tanımlarını sıralayın.

Özellik tanımlarında sıralama uygulayın. Özellik tanımlarında şablon tanımlarını başta yazmak. CSS tabanlı kodlama yazarken site yapısını oluşturan özellikler(float, width, height gibi özellikleri) ilk sırada yazıp sonra diğer özellikleri yazmayı tercih ediniz.

#solIcerikAlani{float:left; width:647px; margin-right:13px}

Burada bir diğer yöntemde özellikleri alfabetik sıraya göre yazmaktır. Buradaki amaç bir standart oluşturup göz aşinalığı sağlamak ve böylelikle daha hızlı kod yazmaktır.

Sıralayı şöyle yapmak mantıklı olacaktır.

  • Konumlandırma, boyutlar (width, height, position, float, clear)
  • Kenar için ve kenar dışı boşluklar ve kenar dışı çizgisi (margin, padding, border)
  • Metin tanımları (font, line-height, color)
  • Diğer özellikler

9. Çalışma gruplarınızda ortak standardınızı oluşturun.

Bir projede beraber çalıştığınız insanlarla aynı kodlama düzeninde çalışması çok önemlidir. Projede çalışan kişilerin bir araya gelip ortak bir düzen oluşturmaları ve projede bu düzen üzerine çalışmaları herkes açısından büyük katkı sağlayacaktır. Ayrıca css düzeltmelerinde(hack) de aynı şey söz konusu. Mümkünse aynı css düzeltmelerini kullanmanız ortak çalışılan projelerde size kolaylık sağlayacaktır.

10. CSS Editör araçlarından yararlanın

Daha öncede yazdığım gibi css editörü olarak Adobe Dreamweaver kullanıyorum. Bunun bir kaç sebebi var. Eskiden beri kullana gelmenin verdiği bir el alışkanlığı. CSS ve son sürümde de javascript editör kısımların gayet güzel çalışması.

Gelelim CSS Editörlerinin bizim CSS düzenine katkılarına

10.1 Otomatik tamamlama özelliği bize kod yazarken çok yardımcı oluyor. Bu özellik kod yazma hızımızı arttırıyor ve yanlış yazımları engelliyor.

dw_duz_01

10.2 Kodların renklendirilmesi de editörün güzel özelliklerinden biridir. Seçici, özellik, tanım ve yorum satırı ayrımı bize göstererek kod ayrımına yardımcı olur ve daha okunabilir kod görünümü sağlar.

dw_duz_02

10.3 Sık kullandığımız css düzeltmelerini(hack) snippets(dw özelliği) alanına ekleyerek hız kazanabiliriz. Daha hızlı olmak için bu tanımlara bir kısa yol bile atayabilirisiniz.

dw_duz_03

10.4 Dreamweaver’ın stil dosyalarını standarda oturmak çok kolay.

Edit -> Preferences.. tıklayınca gelen pencereden Code Format kısmını seçince sağ tarafta CSS.. düğmesine tıklayınca CSS doküman formatını ayarlama ekranından css düzenimizi ayarlayabiliyoruz.

dw_stil_ayarlama

Notepad ++ daki hizalama çizgileride çok güzel dw olmaması çok üzücü. DW’da hala tam olarak istedikleri karşılaya bilmiş değil, ama bildiğim en iyi editör.

hiza_cizgileri

Sonuç

Burada ben kullandığım ve araştırma sonucu elde ettiğim css düzeninden bahsettim. Bu stadartları kendinize göre değiştirebilir ve kendi stadartlarınızı oluşturabilirsiniz, Amaç stadart ve düzenli bir css kodlama düzenine erişmek. Son olarak örnek bir css dokümanı nasıl olmalıya bir örnek yazarsak:

XHTML kodu:

<div >

    <div >
    </div><!--[if !IE]>ustAlan sonu<![endif]-->

    <div >
        <div >
            <div ><img src="images/promo.jpg" width="647" height="264" alt="Promo" /></div>
            <div >
            </div><!--[if !IE]>icerikOzu sonu<![endif]-->
        </div><!--[if !IE]>solIcerikAlani sonu<![endif]-->
        <div >
        </div><!--[if !IE]>sagIcerikAlani sonu<![endif]-->
    </div><!--[if !IE]>icerikAlani sonu<![endif]-->

    <div  class="kapsayamamaSorunu">
    </div>

</div><!--[if !IE]>anaKapsul sonu<![endif]-->

CSS kodu

/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

/************************************************** Genel Tanımlar   */

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
    .kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    .kapsayamamaSorunu{display: inline-block;}
    /* IE-mac de bu bolumu sakla \ */
    * html .kapsayamamaSorunu{height: 1%;}
    .kapsayamamaSorunu {display: block;}
    /* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */


#anaKapsul{margin:0 auto; width:960px;}

/************************************************** ustalan   */
#ustalan{padding-top:20px;}

/************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}

/*sol icerik alani */
    #solIcerikAlani{float:left; width:647px; margin-right:13px}
    #icerikOzu{float:left; clear:left; margin-top:20px}

/* sagIcerikAlani */

    #sagIcerikAlani{float:left; width:300px; margin:0;}

/************************************************** altAlan */

#altAlan{clear:left; background-color:#404040; padding:12px; margin-bottom:20px;}

Kaynaklar

metin_secme_rengi

css-tricks.com sitesine her girdiğimde metinleri seçince çok hoş bir görüntü ile karşılaşıyorum. Bence çok güzel. Belkide standart renklerden bıktığım için farklı renkler bana hoş geliyor. Metinleri seçince ardalan rengini ve metin rengini değiştirebilmek çok güzel bence. Özelliğin tek kötü yanı Internet Explorer’un(8. sürüm dahil) desteğinin söz konusu olmaması.

Kodlama çok basit

::-moz-selection {
    background:#c00;
    color:#fff;
}
::selection {
    background:#c00;
    color:#fff;
}

Kodlamanın birinci kısmı(::-moz-selection) mozilla tabanlı yani Firefox için ikinci kısmı ise normal CSS 3 ile birlikte gelen koddur. Webkit tabanlı tarayıcılar ve Opera 9.5 bu kodu destekliyor.

Ayrıca diğer seçicilerede bunu uygulayabiliyoruz. Bağlantılar için farklı bir renk tanımlayalım mesela

a::-moz-selection {
    background:#1259C7;
    color:#fff;
}

a::selection {
    background:#1259C7;
    color:#fff;
}

Örnek olarak bu sitede herhangi bir metni seçince göreceksiniz.

Internet Explore desteklemiyor. Bunun haricinde Firefox 2, Safari, Opera 9.5 ve Google Chrome destekliyor.

Kaynaklar

sayfalama_Web sitelerin kodlarken genelde hafızamdaki hazır metotları kullanıyorum. Ancak sonra farklı bir yöntem görünce aklıma “acaba bu daha mı iyi” sorusu geliyor ve araştırma yapmaya başlıyorum.  Sayfalamada da aynı durum söz konusu benim için. Burada yaptığım araştırmayı sizlerle paylaşmayı düşünüyorum. Genel olarak sayfalama hakkında bir giriş yapalım sonra kodlamaya geçeriz.

Sayfalama

Web sitelerinde sayfalama genel olarak içeriğin uzun olduğu durumlarda kullanıcıya daha kullanabilir sayfalar üretmek için içeriğin belli mantıksal kısımlara ayrılmasıdır. Genelde arama sonuç sayfalarında, günlük(blog) sitelerinde, uzun içeriğe sahip makalelerde uygulamalarına rastlarız.

Sayfalama alanları genel olarak sitede gezinme alanlarının(navigation) bir parçasıdır. Sitedeki kullanılabilirliği ve düzeni sağlayan normal menü yapılarının dışındaki yapılardır. Aslında bir bakıma gezinme elemanı sınıfına da sokabiliriz. Sayfalama yaparken aşırıya kaçıp görünüşü çok hoş olsun diye kullanıcıyı zora sokan tasarımlardan kaçınmak gerekir. Sayfalamada önemli olan kullanıcı dostu ve işlevsel bir yapı oluşturmaktır, ondan sonra görsellik gelir. İşlevselliği kaybetmeden görsellikde geliştirilebilir.

Sayfalamada dikkat edilecek hususları Faruk Ateş‘in makalesinde çok güzel bir liste şeklinde görüyoruz. Biz buraya başlıklarını alalım.

  1. Geniş tıklanabilir alanlar olsun. Kullanıcının tıklamasını kolaylaştırmak için.
  2. Altı çizili kullanmayın. Zaten tıklanacak alanlar olduğu belli.
  3. Mevcut sayfada olduğumuz belli olsun. Önemli bir ayrıntı.
  4. Linkler arasına mesafeler bırakın. Kullanıcının kolay tıklaması için önemli.
  5. “Önceki” ve “Sonraki” bağlantılarını verin.
  6. Duruma göre “İlk” ve “Son” bağlantıları koyun.
  7. İlk ve Son bağlantılarını sayfalama alanın en dışında olmasına dikkat edin.
  8. Sayfa bilgisi kısmını ekleyin. Örn: (Sayfa 80 / 3). Listeye bunu ben ekledim :D

Sayfalama için genelde listeme elemanı(ul) kullanıyorum. Listeleme olmadanda kullanılabilir benim sitemde olduğu gibi. Ama benim tercihim liste elemanı ile oluşturmaktan yana çünkü tüm tasarımsal ihtiyaçları karşılayacak bir yapı bütünlüğü sağlıyor bize listeleme.

CSS ile Sayfalama

Sayfalama Örnek 1:

Basit yapılı sayfalamalarda, daha doğrusu resim, ovallik içermeyen sayfalamalarda;

XHTML Kodu:

<div class="sayfalama"><span class="pasif">&#171; Önceki</span><span class="secili">1</span><a href="/page/2/">2</a><a href="/page/3/">3</a><a href="/page/4/">4</a><a href="/page/5/">5</a><a href="/page/6/">6</a><a href="/page/7/">7</a>...<a href="/page/199/">199</a><a href="/page/200/">200</a><a href="/page/2/" class="next">Sonraki &#187;</a></div>

CSS Kodumuz:

.sayfalama {
    padding: 3px;
    margin: 3px;
    text-align:center;
}

.sayfalama a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    text-decoration: none;
    color: #036CB4;
}

.sayfalama a:hover,
.sayfalama a:active {
    border: 1px solid #999;
    color: #666;
}
.sayfalama .secili {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #036CB4;
    font-weight: bold;
    background-color: #036CB4;
    color: #FFF;
}
.sayfalama .pasif {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    color: #DDD;
}

Site Sayfalama

Örneği görmek için tıklayınız.

Basit kodlama tekniğinde linkler ve span kullanarak sayfalarımızı oluşturuyoruz. Sayfa şeklini belirlemek için kenar için boşluk(padding), kenar dışı boşluk(margin), kenar dışı çizgisi tanımlarını yapıyoruz.

Sayfalamada fare üzerine geldiğinde ve aktif haller için genelde farklı renk tanımları yapılarak fark belirtilir.

Mevcut sayfa için ayrı bir sınıf tanımı(örn: secili) yaparak ona göre bir tanım yaparız.

Ayrıca pasif alanlar için bir tanım yapıyoruz. Daha silik bir renk ile.

Sayfalama Örnek 2:

Yahoyt’da yaptığım örnek sayfalama. Genelde kullanılan sayfalamaya bir örnek olacak nitelikte. İkinci yöntem benim daha çok tercih ettiğim yöntem listeler ile sayfalama;

XHTML

<ul class="sayfalama">
    <li><a href="">|<</a></li>
    <li><a href="">Önceki</a></li>
    <li><span>1</span></li>
    <li><a href="" title="Sayfa 2">2</a></li>
    <li><a href="" title="Sayfa 3">3</a></li>
    <li><a href="" title="Sayfa 4">4</a></li>
    <li><a href="" title="Sayfa 5">5</a></li>
    <li><a href="" title="Sayfa 6">6</a></li>
    <li><a href="" title="Sayfa 7">7</a></li>
    <li><a href="" title="Sayfa 8">8</a></li>
    <li><a href="" title="Sayfa 9">9</a></li>
    <li><a href="" title="Sayfa 10">10</a></li>
    <li><a href="" title="Sonraki">Sonraki</a></li>
    <li><a href="" title="İlk Sayfa">>|</a></li>
</ul>

CSS kodu

ul.sayfalama {
    margin:0 auto;
    width:530px;
    padding:10px 0 0 0;
    clear:left
}
ul.sayfalama li {
    font:bold 12px Tahoma, Geneva, sans-serif;
    color:#fff;
    float:left;
    list-style:none;
    margin:0 2px;
    background:#005689;
}
ul.sayfalama li span {
    padding:5px 8px;
    display:block
}
ul.sayfalama li a {
    font:bold 12px Tahoma, Geneva, sans-serif;
    color:#005689;
    text-decoration:none;
    background-color:#e2e2e2;
    padding:5px 8px;
    display:block
}
ul.sayfalama li a:hover {
    background-color:#005689;
    color:#e2e2e2;
}

Yahoyt Sayfalama

Örneği görmek için tıklayınız.

Sayfalama Örnek 3:

Son olarakda bonus.com.tr kampanyalarda yaptığım sayfalama.

XHTML kodu

<ul class="sayfalama kapsayamamaSorunu">
  <li class="oncekiSayfa"><a href="javascript:;">önceki</a></li>
  <li class="seciliSayfaNo"><a href="/page/1/">1</a></li>
  <li><a href="/page/2/">2</a></li>
  <li><a href="/page/3/">3</a></li>
  <li><a href="/page/4/">4</a></li>
  <li><a href="/page/5/">5</a></li>
  <li><a href="/page/6/">6</a></li>
  <li><a href="/page/7/">7</a></li>
  <li><a href="/page/8/">8</a></li>
  <li><a href="/page/9/">9</a></li>
  <li class="sonrakiSayfa"><a href="/page/2/">sonraki</a></li>
</ul>

CSS kodu:

ul.sayfalama{
    padding: 3px;
    border-bottom:1px solid #e7e7e7;
    border-top:1px solid #e7e7e7;
}

ul.sayfalama li{
    list-style:none;
    float:left;
    margin-right:10px;
    line-height:15px;
}

ul.sayfalama li.seciliSayfaNo{
	background: url(images/sayfalama_ard.gif) right top no-repeat;
}

ul.sayfalama li.seciliSayfaNo a{
    color:#e2ffcc;
    text-decoration:none;
    padding:0 4px;
    background: url(images/sayfalama_ard.gif) 0 -15px no-repeat;
    font-weight:bold;
}

ul.sayfalama li a{
    color:#5b5d5a;
    text-decoration:none;
    font-size:12px;
}

ul.sayfalama li.oncekiSayfa a{
    display: block;
    width: 6px;
    height: 10px;
    margin:3px 2px 0 0;
    background: url(images/sayfalama_ard.gif) 0 -36px no-repeat;
    text-decoration: none;
    text-indent:-9999px;
}

ul.sayfalama li.sonrakiSayfa a{
    display: block;
    width: 6px;
    height: 10px;
    margin:3px 0 0 0;
    background: url(images/sayfalama_ard.gif) 0 -52px no-repeat;
    text-decoration: none;
    text-indent:-9999px;
}

Listeleri yanyana koyup, seçili olan ardalanına yuvarlak kenarlı olması için li’ye ardalanın sag kısmını li içindeki bağlantıyada sol kısmını koyuyoruz.

Ayrıca ileri ve geri ikonlarını yine ardalan kaydırma tekniği ile aynı resimden yaralanarak ekliyoruz. Bu teknik şimdilerde sprite tekniği olarak adlandırılıyor. İşin mantığı birden fazla resmi ekleyip http isteklerin sayısı azaltarak sayfa yüklenme hızı arttırıyoruz.

Bonus Kampanya Sayfalama

Örneği görmek için tıklayınız.

Bu örnek bazı kısımlar yazının ilk kısmında anlattıklarınıza uymuyor diyebilirsiniz. Ama tasarımcının tercihleri böyle ve bu yazıyı daha yazmamıştım. Her yazıda bende bir şeyler öğreniyorum.

Bu sayfalamalar dışında bir çok örneği bulabileceğiniz. mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/ sitesini ziyaret etmenizi öneririm.

Kaynaklar