CSS ÖĞRENİYORUM

13 yıl

Yüzbaşı

Konu Sahibi

Bismillahirrahmanirrahim

CSS'ye başlıyorum. hadi hayırlısı

CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.

<!DOCTYPE html> 
   
  <html> 
   
  <head> 
   
  <style type="text/css"> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  h1 
   
  { 
   
  color:blue; 
   
  text-align:center; 
   
  } 
   
  p 
   
  { 
   
  font-family:"Times New Roman"; 
   
  font-size:30px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS örnekleri</h1> 
   
  <p>bu bir paragraftır<p> 
   
  </body> 
   
  </html>

Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

alıntı

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 11 Haziran 2012; 0:30:38 >

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Giriş

CSS ye başlamadan önce HTML ve XHTML konusunda teml bilgilerimizin olması gerekir.

CSS Cascading Style Sheets açılımıdır.

Stiller HTML öğelerinin nasıl görüntüleneceğini belirler.

Harici stil sayfaları ile bir çok işi bir arada yapabilirsiniz.

Harici stil sayfaları CSS dosyaları içinde saklanır.

Farklı sayfalarınızı farklı stillerde göstermek için birden çok CSS kodu oluşturup hangi sayfayı hangi stille göstermek istiyorsanız sayfaya o stilin kodunu yerleştrebilirsiniz. Örneğin sitenizde 10 ayrı kategori var siz 10 farklı stil kodu yazıp herbirini farlı bir kategori için kullanabilirsiniz sanırım.( türkçeye tam çeviremediğim için böyle yazdım doğru değilse bile zamanla doğrusunu öğreniriz.)

Stiller büyük bir problemi çözmüş

HTML 3.2 de etiketler için font ve renk gibi özellikler eklendiğinde web programcıları için zor bir dönem başlamış .çünkü büyük sitelerin programcıları her sayfaya font ve renk gibi özellikleri eklemek zorunda kalmışlar. buda hem zaman hemde maddi yönden sıkıntı yaratmış .

World Wide Web Consortium (W3C) bu sorunu çözmek için HTML 4.0 da tüm biçimlendirme özelliklerini ayrı CSS dosyasında kaydedip bu sıkıntıyı ortadan kaldırmış.

Şu anda tüm tarayıcılar CSS ‘yi destekliyormuş.

Stiller harici .css dosyaları şeklinde kaydedilir.

Harici stil sayfaları ile sadece tek bir dosya düzenleyerek, bir Web sitesindeki tüm sayfaların görünümünü ve düzenini değiştirmek mümkündür.

alıntı

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 11 Haziran 2012; 0:31:23 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

Örnek 1

<!DOCTYPE html><html><head><style type=”text/css”> 
  body {background-color:yellow;} 
   
  h1 {font-size:36pt;} 
   
  h2 {color:blue;} 
   
  p {margin-left:50px;} 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>bu başlık 36 pt boyutundadır</h1> 
   
  <h2>bu yazı mavidir</h2> 
   
  <p>bu paragraf sol taraftan 50 piksel boşluk bırakarak başlamıştır</p> 
   
  </body> 
   
  </html>

Örnek 2

<!DOCTYPE html><html><head> 
    
   
  <style type=”text/css”> 
   
    
   
  body {background-color:tan;} 
   
    
   
  h1 {color:maroon;font-size:20pt;} 
   
    
   
  hr {color:blue;} 
   
    
   
  p {font-size:11pt;margin-left:15px;} 
   
    
   
  a:link {color:green;} 
   
    
   
  a:visited {color:yellow;} 
   
    
   
  a:hover {color:black;} 
   
    
   
  a:active {color:blue;} 
   
    
   
  </style> 
   
    
   
  </head> 
   
    
   
  <body> 
   
    
   
  <h1> başlık 1</h1> 
   
    
   
  <hr/> 
   
    
   
  <p>Bu yazının yukarıda kodlandığı gibi göründüğünü farkediyorsunuzdur.</p> 
   
    
   
  <p><a href=”http://www.webciftligi.com” target=”_blank”>Bu bir linktir</a></p> 
  </body> 
   
    
   
  </html>

CSS kodu iki bölümden oluşur.

< Resime gitmek için tıklayın >

h1 kısmı sayfanızın hangi kısmının özelliklerini belirleyeceğini belirtir.

Property özellik, value se değer demektir.

color rengi font_size ise font büyüklüğü belirler.

Her özellik değer çifti noktalı virgül ile biter ve bu çiftleri kıvrımlı parantez ile başlatır ve bitiririz.{ işareti için alt tuşuna basılı tutup 0123 ü tuşlayın } için ise yine alt tuşuna basılı tutup 0125 tuşlayın.

CSS Hatırlatma kodu

Css kodları açıklama amaçlı yazılar koyabilirsiniz.Sonradan kaynak kodunuzu düzenlerken size yardımı dokunabilir.

“/*” ile başlayıp ”*/” ile biter.

Örnek

/*Bu sonradan hatırlamayı kolaylaştırmak için yazılan bir nottur*/p {text-align:center;
/*Buda başka bir nottur*/
color:black;
font-family:arial;
}

Bu hatırlatma kodu sayfanızda görünmez sadece kaynak kodunu görüntülediğinizde görürsünüz.

Alıntıdır

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Id(kimlik) and Class(sınıf)

Id ve sınıf seçiciler

Bir HTML öğesi için bir stil ayarlamanın yanı sıra, CSS, “id” ve “sınıf” olarak adlandırılan kendi seçicilerinizi belirlemenizi sağlar.

Id seçici

Id seçici tek ve özgün bir eleman için bir stil belirlemede kullanılır.
Id seçici HTML öğesinin id özniteliğini kullanır ve bir “#” işareti ile tanımlanır.
Aşağıdak örneği nceleyebilirsiniz.

<!DOCTYPE html><html><head><style type=”text/css”>#para1 
  { 
   
  text-align:center; 
   
  color:red; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p id=”para1″>Merhaba dünya!</p> 
   
  <p>Bu  paragraf stil özelliklerinden faydalanmaz.</p> 
   
  </body> 
   
  </html>

Id seçici adını herhangi bir numara ile başlatırsanız mozilla ve firefox ta çalışmazmış.

Sınıf seçici

Sınıf seçiciler bir grup için stil belirlemede kullanılır.Id seçicilerin aksine sınıf seçiciler birkaç öğe için birden kullanılır.
Birden çok html öğesi için belli bir stili ayarlamak için kullanılır.

<!DOCTYPE html><html><head><style type=”text/css”>.center 
  { 
   
  text-align:center; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1 class=”center”>Ortanlanmış  başlık</h1> 
   
  <p class=”center”>Ortalanmış paragraf.</p> 
   
  </body> 
   
  </html>

Ayrıca, sadece belirli HTML öğelerinin bir sınıf tarafından etkileneceğini belirtebilirsiniz.
Aşağıdaki örnekte, tüm p öğeleri class = “center” ile ortalanmıştır olacaktır:

<!DOCTYPE html><html><head> 
  <style type=”text/css”> 
   
  p.center 
   
  { 
   
  text-align:center; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1 class=”center”>Bu başlık  center özelliğinden etkilenmeyecektir</h1> 
   
  <p class=”center”>Bu  paragraf ortalanacaktır.</p> 
   
  </body> 
   
  </html>

Sınıf isimlerini rakamla başlatmayın bu sadece internet explorerda destklenmektedir.
Alıntıdır.

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 12 Haziran 2012; 21:39:58 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS ekleme

Tarayıcı bir stil sayfası okuduğunda belgeyi buna göre biçimlendirir.

Belgelerinize CSS eklemenin 3 yolu vardır.
Harici stil sayfası
Dahili stil sayfası
Satır içi stil

Harici Stil Sayfası
Harici stil sayfaları birden çok belgenin stilini değiştirmek için en uygun yöntemdir.
Harici bir stil sayfası ile, bir dosyayı değiştirerek bir web sitesinin tamamının görünümünü değiştirebilirsiniz.
Bunu yapmak için her sayfada < link> etiketini kullanarak stil sayfasına bağlantı vermeniz gerekir.

<link> etiketi <head> bölümüne yazılır:

<head> 
  <link rel=”stylesheet” type=”text/css” href=”benimstilim.css”/> 
  </head>

Harici bir stil sayfası, herhangi bir metin editörü ile yazılabilir.
Dosya herhangi bir HTML etiketi içermemelidir.
Stil sayfanız örnekstilim.css uzantısı ile kaydedilmelidir.
Bir stil sayfası dosyasının bir örneği aşağıda gösterilmiştir:

 
  hr {color:sienna;} 
  p {margin-left:20px;} 
  body {background-image:url(“images/örnek.gif”);}

Özellik değeri ve birimi arasına (margin-left:20 px)bir boşluk koymayın.Doğru yol: margin-left:20px

Dahili Stil Sayfası
Sadece bir sayfanın stil özelliklerini belirlemek istiyorsanız dahili stil sayfalarını kullanmanız gerekir.
Bunun için html sayfanızın head bölümünde style etiketi aşağıdaki örnekteki gibi kullanabilirsiniz:

<head> 
  <style type=”text/css”> 
  hr {color:sienna;} 
   
  p {margin-left:20px;} 
   
  body {background-image:url(“images/örnek.gif”);} 
   
  </style> 
   
  </head>

Satır içi stil
Satır içi stil kullanmak stil sayfalarını sağladığı bir çok avantajı kaybetmenize yol açabilirmiş.Bu nedenle mümkün olduğunca az kullanılmalıymış.
İlgili etiket içinde satır içi stil kullanmak için style özniteliğini kullanmanız gerekir.
Style özniteliği herhangi bir CSS özelliği içerebilir.
Aşağıdaki örnek bir paragrafın rengini ve sol kenar boşluğunun değerini nasıl ayarlayacağınızı gösterir:

<p style=”color:sienna;margin-left:20px”>Bu bir paragraftır.</p>

Çoklu Stil Sayfaları
Bazı özellikleri farklı stil sayfalarında aynı seçici için ayarlanmış ise, hangi stil sayfası daha spesifik ise o baz alınarak sayfa gösterilir.
Örneğin, harici bir stil sayfası h3 seçici için şu özelliklere sahipse:

h3 
  { 
  color:red; 
   
  text*alin:left; 
   
  font-size:8pt; 
   
  }

Ve bir dahili stil h3 seçici için şu özelliklere sahipse:

h3 
  { 
  text-align:right; 
   
  font-size:20pt; 
   
  }

Sayfa görüntülenirken dahili stil özellikleri daha spesifik olduğundan sayfa aşağıdaki özelliklere göre görüntülenecektir.

color:red;text-align:right; 
  font-size:20pt;

Dikkat ettiyseniz dahili stil sayfasında renk belirtilmediği için harici stil sayfasındaki renk değeri değişmedi ama text-align ve font-size değerleri dahili stil sayfasındaki şeklini aldı.

Alıntıdır.

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 12 Haziran 2012; 21:53:24 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS arka plan

CSS arka plan özellikleri bir öğenin arkaplan efektlerini tanımlamak için kullanılır.

Arkaplan efektleri için kullanılan CSS özellikleri:

background-color
background-image
background-repeat
background-attachment
background-position
Arkaplan Rengi

Background-color özelliği bir öğenin arka plan rengini belirtir.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style type=”text/css”> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS sayfam</h1> 
   
  <p>CSS arkaplan rengi belirleme</p> 
   
  </body> 
   
  </html>

CSS de renk değerlerini aşağıdaki gibi kullanabilirsiniz.
HEX değeri – “#ff0000″ gibi
RGB değeri – “rgb(255,0,0)” gibi
Bir renk adı – “kırmızı” gibi

Bir kaç örnek;
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de}

Arkaplan Resmi

Arkaplan için herhangi bir resim kullanabilirsiniz.Bu imaj kullandığınız öğenin içinde gösterilir ve gerekiyorsa görüntü tekrarlayarak tüm alanı kaplar.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style type=”text/css”> 
   
  body 
   
  { 
   
  background-image:url(‘örnekimaj.gif’); 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>selam millet</h1> 
   
  </body> 
   
  </html>

Arka plan için imaj kullanırken siteniz görüntülendiğinde içeriğinizin okunup okunmadığına dikkat edin.

Arka plan resmini yatay veya dikey tekrarlama
Varsayılan olarak, arka plan hem yatay hem dikey olarak tekrarlar ama hoş olmayan bir görüntüye sebep olabilir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  body 
  { 
  background-image:url(‘gradient.jpg’); 
  } 
  </style> 
  </head><body> 
  <h1>selam millet</h1> 
  </body></html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için burayatıklayın.

Görüntü sadece yatay (repeat-x) olarak tekrarlanırsa, arka plan daha iyi görünecektir:

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  body 
  { 
  background-image:url(‘gradient2.png’); 
  background-repeat:repeat-x; 
  } 
  </style> 
  </head><body> 
  <h1>selam millet!</h1> 
  </body></html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

Arka plan resminin konumu ve tekrarlanmaması

Arka plan resmi kullanırken yazılarınızı engellememesi ve tekrarlamaması için aşağıdaki örneğleri inceleyin.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style text=”type/css”> 
   
  body 
   
  { 
   
  background-image:url(‘tree.jpg’); 
   
  background-repeat:no-repeat; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Arkaplan  resmi örneği</p> 
   
  <p>Arka plan resmi ile yazılanlar bir arada olduğu için kesişen yerleri okumak güçleşiyor.</p> 
   
  </body> 
   
  </html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style text=”type/css”> 
   
  body 
   
  { 
   
  background-image:url(‘tree.jpg’); 
   
  background-repeat:no-repeat; 
  background-position:right top; 
  margin-right:200px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Arka plan resmi örneği</p> 
   
  <p>Arka plan resmini sağ üst köşeye yerleştirtik ve yazı ile resim arasına 200 
  pixellik bir boşluk bıraktığımız için sayfamızın görüntüsü bozulmadı.</p> 
   
  </body> 
   
  </html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

Arka plan kestirme yolu

Yukarıdaki örneklerden de görebileceğiniz gibi, arka planlar ile ilgili dikkate alınması gereken pek çok özellik vardır.
Tek bir kod içerisinde birden fazla özellik belirtebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style text=”type/css”> 
   
  body 
   
  { 
   
  background:yellow url(‘tree.jpg’) no-repeat right top; 
  margin-right:200px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Arka plan resmi örneği</p> 
  <p>Arka plan özelliklerini tek bir kod içinde belirlemiş olduk.</p> 
  </body> 
   
  </html>

Tablodaki kodların nasıl bir görüntü oluşturduğunu görmek için buraya tıklayın.

Kestirme özelliğini kullanırken özellik değerleri sırası
şöyledir:
background-color
background-image
background-repeat
background-attachment
background-position

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Linkler

Linkleri farklı şekillerde gösterebiliriz.

Linklere şekil verme

Linkler herhangi bir CSS özelliği (renk,yazı tipi,arka plan gibi) ile şekle sokulabilir.

Dört bağlantı şekli kullanabiliriz:

a:link ziyaret edilmemiş link

a:visited ziyaret edilmiş link

a:hover fare link üzerindeyken

a:active linke tıklandığı anda

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link {color:#ff0000;} /*ziyaret edilmemiş link*/ 
  a:visited {color:#00ff00;} /*ziyaret edilmiş link*/ 
  a:hover {color:#ff00ff;} /*fare üzreinde olan link*/ 
  a:active {color:#0000ff;} /*tıklanan link*/ 
  </style> 
  </head><body> 
  <p><b><a href=”http://www.webciftligi.com/” 
  target=”_blank”>www.webciftligi.com</a></b></p> 
  <p> 
  a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden 
  sonra yazılmalıdır. 
  </p> 
  <p> 
  Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra 
  yazılmalıdır. 
  </p> 
  </body> 
  </html>

Genel bağlantı stilleri

Text Decoration özelliği çoğunlukla linklerin altını çizmek için kullanılır.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link {text-decoration:none;} /*ziyaret edilmemiş link*/ 
  a:visited {text-decoration:none;} /*ziyaret edilmiş link*/ 
  a:hover {text-decoration:underline;} /*fare üzreinde olan link*/ 
  a:active {text-decoration:underline;} /*tıklanan link*/ 
  </style> 
  </head><body> 
  <p><b><a href=”http://www.webciftligi.com/” 
  target=”_blank”>www.webciftligi.com</a></b></p> 
  <p> 
  a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden 
  sonra yazılmalıdır. 
  </p> 
  <p> 
  Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra 
  yazılmalıdır. 
  </p> 
  </body> 
  </html>

Arka plan rengi

background-color özelliği ile linkin arka plan rengini belirleyebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link {background-color:red;} /*ziyaret edilmemiş link*/ 
  a:visited {background-color:blue;} /*ziyaret edilmiş link*/ 
  a:hover {background-color:yellow;} /*fare üzreinde olan link*/ 
  a:active {background-color:green;} /*tıklanan link*/ 
  </style> 
  </head><body> 
  <p><b><a href=”http://www.webciftligi.com/” 
  target=”_blank”>www.webciftligi.com</a></b></p> 
  <p> 
  a:hover özelliğinin etkili olabilmesi için a:link ve a:visited özelliklerinden 
  sonra yazılmalıdır. 
  </p> 
  <p> 
  Aynı şekilde a:active özelliğinin etkili olabilmesi için a:hover özelliğinden sonra 
  yazılmalıdır. 
  </p> 
  </body> 
  </html>

Aşağıdaki örnekte linkler için farklı özellikleri nasıl ayarlayacağınızı görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a.bir:link {color:red;} 
  a.bir:visited {color:blue;} 
  a.bir:hover {color:yellow;} 
   
  a.iki:link {color:red;} 
  a.iki:visited {color:blue;} 
  a.iki:hover {font-size:40px;}  
   
  a.üç:link {color:red;} 
  a.üç:visited {color:blue;} 
  a.üç:hover {background:yellow;} 
   
    
   
  a.dört:link {color:red;} 
  a.dört:visited {color:blue;} 
  a.dört:hover {font-family:monospace;} 
   
    
   
  a.beş:link {color:red;text-decoration:none;} 
  a.beş:visited {color:blue;text:decoration:none} 
  a.beş:hover {text-decoration:underline;} 
  </style> 
   
  </head> 
   
  <body> 
   
  <p>Fareyi linklerin üzerinde gezdirerek farkları görebilirsiniz.</p> 
   
  <p><b><a class=”bir” href=”http://www.webciftligi.com/” target=”_blank”>Bu link 
  renk değiştiriyor.</a></b></p> 
   
  <p><b><a class=”iki” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  yazı boyutu değişiyor.</a></b></p> 
   
  <p><b><a class=”üç” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  arka plan rengi değişiyor.</a></b></p> 
   
  <p><b><a class=”dört” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  yazı tipi değişiyor.</a></b></p> 
   
  <p><b><a class=”beş” href=”http://www.webciftligi.com/” target=”_blank”>Bu linkin 
  altı çiziliyor.</a></b></p> 
   
  </body> 
   
  </html>

Bazı CSS özelliklerini birleştirerek gelişmiş linkler oluşturabilirmişiz.Örneğin link kutuları oluşturabilirmişiz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  a:link,a:visited 
  { 
  display:block; 
  font-weight:bold; 
  color:red; 
  background-color:yellow; 
  width:200px; 
  text-align:center; 
  padding:4px; 
  text-decoration:none; 
  } 
  a:hover,a:active 
  { 
  background-color:blue; 
  } 
   
  </style> 
   
  </head> 
   
  <body> 
  <a href=”http://www.webciftligi.com/” target=”_blank”> Web Çiftliği’ne 
  hoşgeldiniz.</a> 
   
  </body> 
   
  </html>

Alıntıdır:)

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 18 Haziran 2012; 1:28:25 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Tablolar

Tablo kenerlıkları

CSS ile tablo kenarlıklarını düzenlemek için border özelliğini kullanın

Aşağıdaki örnekte table,th ve td ögeleri için siyah kenarlığın nasıl oluşturulacağını görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table,th,td 
  { 
  border:1px solid black; 
  } 
  </style> 
  </head> 
  <body> 
  <table> 
  <tr><th>isim</th><th>soyisim</th></tr> 
  <tr><td>dr</td><td>hrn</td></tr> 
  </table> 
   
  </body> 
   
  </html>

Yukarıdaki örnekte iki kenarlık varmış gibi görünüyor bunun sebebi table th ve td ögeleri için ayrı ayrı kenarlık olmasıdır.
Tablonun tek kenarlı olması için border-collapse özelliğini kullanmamız gerekiyormuş.

Collapse kenarlık(sıkıştırılmış kenarlık diyebiliriz)

Border-collapse özelliği ile tablo kenarlıkları tekmiş gibi görünürmüş.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table 
  { 
  border-collapse:collapse; 
  } 
  table,th,td 
  { 
  border:1px solid black; 
  } 
  </style> 
  </head> 
  <body> 
  <table> 
  <tr> 
  <th>isim</th> 
  <th>soyisim</th> 
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Tablo genişlik ve yüksekliği

Bir tablonun genişlik ve yüksekliğini width ve height özellikleri ile belirlersiniz.
Aşağıdaki örnek tablonun genişliği %100 th öğesinin genişliği ise 50 px olarak verilmiştir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table,td,th 
  { 
  border:1px solid black; 
  } 
  table 
  { 
  width:100%; 
  } 
  th 
  { 
  height:50px; 
  } 
  </style> 
  </head> 
  <body> 
  <table> 
   
  <tr> 
   
  <th>isim</th> 
   
  <th>soyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Tablo metin hizalama

Tablo içeriklerini text-align ve vertikal-align özellikleri ile hizalayabilirsiniz.

Text-align özelliği ile metinleri sağ,sol ya da orta gibi yatay olarak hizalayabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  table,td,th 
  { 
  border:1px solid black; 
  } 
  td 
  { 
  text-align:right; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Vertical-align özelliği ile de alt,üst ve orta gibi dikey hizalama sağlayabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
   
  table,td,th 
  { 
  border:1px solid black; 
  } 
  td 
  { 
  height:50px; 
  vertical-align:bottom; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Table Padding

Tablodaki kenarlık ile içeriğin arasındaki boşluğu belirlemek için th ve td ögelerinde padding özelliğini kullanın.

<!DOCTYPE html> 
  <html> 
  <head> 
   
  <style type=”text/css”> 
   
  table,td,th 
  { 
  border:1px solid black; 
  } 
  td 
  { 
  padding:15px; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Tablo rengi
Aşağıdaki örnekte tablo kenarlık ve içeriklerinin rengini nasıl ayarlayacağınızı görebilirsiniz.

<!DOCTYPE html> 
  <html> 
   
  <head> 
   
  <style type=”text/css”> 
   
  table,td,th 
  { 
  border:1px solid black; 
  } 
  th 
  { 
  background-color:green; 
  color:white; 
  } 
  td 
  { 
  background-color:white; 
  color:green; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table> 
   
  <tr> 
   
  <th>isimisimisim</th> 
   
  <th>soyisimsoyisimsoyisim</th> 
   
  </tr> 
  <tr> 
   
  <td>dr</td> 
   
  <td>hrn</td> 
   
  </tr> 
   
  </table> 
   
  </body> 
   
  </html>

Süslü bir tablo örneği

<!DOCTYPE html> 
  <html> 
   
  <head> 
   
  <style type=”text/css”> 
   
  #örnek 
  { 
  font-family:”Trebuchet MS”,Arial,Helvetica,sans-serif; 
  width:100%; 
  border-collapse:collapse; 
  } 
  #örnek td, #örnek th 
  { 
  font-size:1em; 
  border:1px solid #98bf21; 
  } 
  #örnek th 
  { 
  font-size:1.1em; 
  text-align:left; 
  padding-top:5px; 
  background-color:#a7c942; 
  color:#ffffff; 
  } 
  #örnek tr.alt td 
  { 
  color:#000000; 
  background-color:#eaf2d3; 
  } 
  </style> 
   
  </head> 
   
  <body> 
   
  <table id=”örnek”> 
  <tr> 
  <th>Birinci sütun başlığı(th)</th> 
  <th>İkinci sütun başlığı(th)</th> 
  <th>Üçüncü sütun başlığı(th)</th> 
  <th>Dördüncü sütun başlığı(th)</th> 
  </tr><tr class=”alt”> 
  <td>satır 1 sütun 1</td> 
  <td>satır 1 sütun 2</td> 
  <td>satır 1 sütun 3</td> 
  <td>satır 1 sütun 4</td> 
  </tr><tr> 
  <td>satır 2 sütun 1</td> 
  <td>satır 2 sütun 2</td> 
  <td>satır 2 sütun 3</td> 
  <td>satır 2 sütun 4</td> 
  </tr><tr class=”alt”> 
  <td>satır 3 sütun 1</td> 
  <td>satır 3 sütun 2</td> 
  <td>satır 3 sütun 3</td> 
  <td>satır 3 sütun 4</td> 
  </tr><tr> 
  <td>satır 4 sütun 1</td> 
  <td>satır 4 sütun 2</td> 
  <td>satır 3 sütun 3</td> 
  <td>satır 4 sütun 4</td> 
  </tr></table> 
  </body> 
   
  </html>

Alıntıdır.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Kenarlık

CSS Kenarlık Özellikleri

CSS kenarlık özelliği bir öğenin Kenarlığın stilini ve rengini belirtmenize izin verir.

Kenarlık Stili

Border-style özelliği kenarlığın ne şekilde gösterileceğini belirtir.
Border-style özelliği ayarlanmadığı sürece kenarlık özelliklerinin hiçbiri etkili olmayacaktır.

border-style değerleri:

none: hiçbir kenarlık olmadığını belirtir
dotted: noktalı kenarlık
dashed: kesik çizgili kenarlık
solid: ek çizgili kenarlık
double: çift kenarlık her iki kenarlığın genişliği border-width değerinde verildiği gibidir.
groove: 3D oluklu kenarlık etki border-color değerine göre değişir.
ridge: 3D kabarık kenarlık etki border-color değerine göre değişir.
inset: 3D insert(?) kenarlık etki border-color değerine göre değişir.
outset: 3D outset(?) kenarlık etki border-color değerine göre değişir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.none {border-style:none;} 
  p.dotted {border-style:dotted;} 
  p.dashed {border-style:dashed;} 
  p.solid {border-style:solid;} 
  p.double {border-style:double;} 
  p.groove {border-style:groove;} 
  p.ridge {border-style:ridge;} 
  p.inset {border-style:inset;} 
  p.outset {border-style:outset;} 
  p.hidden {border-style:hidden;} 
  </style> 
  </head> 
  <body><p class=”none”>kenarlık yok</p> 
  <p class=”dotted”>noktalı kenarlık</p> 
  <p class=”dashed”>kesik çizgili kenarlık</p> 
  <p class=”solid”>tek çizgili kenarlık</p> 
  <p class=”double”>çift kenarlık</p> 
  <p class=”groove”>3D oluklu kenarlık</p> 
  <p class=”ridge”>3D kabarık kenarlık</p> 
  <p class=”inset”>inset kenarlık</p> 
  <p class=”outset”>outset kenarlık</p> 
  <p class=”hidden”>hidden kenarlık</p> 
  </body></html>

Kenarlık Genişliği

border-width özelliği kenarlığın genişliğini ayarlamak için kullanılır.
Genişlik üç ön tanımlı değer olan thin, medium, veya thick ten br kullanılarak ayarlanır.
Tek başına kullanıldığında border-width özelliği çalışmaz.Bu nedenle kenarlıkları ayarlamak için border-style özelliğini kullanın.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.bir 
  { 
  border-style:solid; 
  border-width:5px; 
  } 
  p.iki 
  { 
  border-style:solid; 
  border-width:medium; 
  } 
  p.üç 
  { 
  border-style:solid; 
  border-width:1px; 
  } 
  </style></head> 
  <body> 
  <p class=”bir”>kenarlık genişliği</p> 
  <p class=”iki”>kenarlık genişliği</p> 
  <p class=”üç”>kenarlık genişliği</p> 
  </body></html>

Kenarlık rengi

border-color özelliğini kullanarak kenarlık rengini ayarlayabilirsiniz.
Şeffaf bir kenarlıkta ayarlayabilirsiniz.
Tek başına kullanıldığında border-color özelliği çalışmaz.Bu nedenle kenarlık rengini ayarlamak için border-style özelliğini kullanın.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.bir 
  { 
  border-style:solid; 
  border-color:red; 
  } 
  p.iki 
  { 
  border-style:solid; 
  border-color:#98bf21; 
  } 
  </style> 
  </head><body> 
  <p class=”bir”>kırmızı kenarlık</p> 
  <p class=”iki”>yeşil kenarlık</p></body> 
  </html>

Kenarlık Individual sides (Bağımsız taraf)

Kenarlığın her tarafı için farklı bir özellik belirleyebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-top-style:dotted; 
  border-right-style:solid; 
  border-bottom-style:dotted; 
  border-left-style:solid; 
  } 
  </style> 
  </head><body> 
  <p>2 farklı kenarlık stili</p> 
  </body> 
  </html>

Yukarıdaki örnekteki kenarlığı tek bir özellik ile de oluşturabiliriz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:dotted solid; 
  } 
  </style> 
  </head><body> 
  <p>2 farklı kenarlık</p> 
  </body> 
  </html>

Border-style özelliği dört değer birden alabilir.

border-style:dotted solid double dashed;

üst kenarlık dotted biçiminde
sağ kenarlık solid biçiminde
alt kenarlık double biçiminde
sol kenarlık dashed biçiminde olur

border-style:dotted solid double;

üst kenarlık dotted biçiminde
sağ ve sol kenarlık solid biçiminde
alt kenarlık double biçiminde olur

border-style:dotted solid;

üst ve alt kenarlık dotted biçiminde
sağ ve sol kenarlık solid biçiminde olur

border-style:dotted;

bütün kenarlar dotted biçiminde olur

Border-style özelliğini border-width ve border color özellikleri içinde kullanabilirsiniz.

Kenarlık – Kestirme özelliği

Yukarıdaki örneklerden de görebileceğiniz gibi, kenarlıklar ile ilgili dikkate alınması gereken pek çok özellik vardır.
Kenarlığın özelliklerini tek bir kodda belirtebilirsiniz.Buna kestirme özellik denir.

border-width
border-style (required)
border-color

sırasıyla özellikleri belirtebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border:5px solid red; 
  } 
  </style> 
  </head><body> 
  <p>CSS kenarlık kestirme özelliği</p> 
  </body> 
  </html>

Örnek 1

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:solid; 
  border-top:thick double #ff0000; 
  } 
  </style> 
  </head><body> 
  <p>Sadece üst kenarlık özelliklerini belirleyen kestirme özellik.</p> 
  </body></html>

Örnek 2

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p {border-style:solid;} 
  p.none {border-bottom-style:none;} 
  p.dotted {border-bottom-style:dotted;} 
  p.dashed {border-bottom-style:dashed;} 
  p.solid {border-bottom-style:solid;} 
  p.double {border-bottom-style:double;} 
  p.groove {border-bottom-style:groove;} 
  p.ridge {border-bottom-style:ridge;} 
  p.inset {border-bottom-style:inset;} 
  p.outset {border-bottom-style:outset;} 
  </style> 
  </head><body> 
  <p class=”none”>alt kenarlık yok.</p> 
  <p class=”dotted”>dotted alt kenarlık.</p> 
  <p class=”dashed”>dashed alt kenarlık.</p> 
  <p class=”solid”>solid alt kenarlık.</p> 
  <p class=”double”>double alt kenarlık.</p> 
  <p class=”groove”>groove alt kenarlık.</p> 
  <p class=”ridge”>ridge alt kenarlık.</p> 
  <p class=”inset”>inset alt kenarlık.</p> 
  <p class=”outset”>outset alt kenarlık.</p> 
  </body> 
  </html>

örnek 3

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:solid; 
  border-left-width:15px; 
  } 
  </style> 
  </head><body> 
  <p><b>Not:</b>”border-left-width” özelliği tek başına kullanılmaz.”border-style” 
  özelliğinden sonra yazılmalıdır.</p> 
  </body> 
  </html>

örnek 4

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p.bir 
  { 
  border-style:solid; 
  border-color:#0000ff; 
  } 
  p.iki 
  { 
  border-style:solid; 
  border-color:#ff0000 #0000ff; 
  } 
  p.üç 
  { 
  border-style:solid; 
  border-color:#ff0000 #00ff00 #0000ff; 
  } 
  p.dört 
  { 
  border-style:solid; 
  border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); 
  } 
  </style> 
  </head><body> 
  <p class=”bir”>Tek renk kenarlık!</p> 
  <p class=”iki”>İki renkli kenarlık!</p> 
  <p class=”üç”>Üç renkli kenarlık!</p> 
  <p class=”dört”>Dört renkli kenarlık!</p></body> 
  </html>

örnek 5

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type=”text/css”> 
  p 
  { 
  border-style:solid; 
  border-right-color:#ff0000; 
  } 
  </style> 
  </head><body> 
  <p>Sağ kenarlığı reklendirme.</p> 
  </body> 
  </html>

Alıntıdır.

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 5 Temmuz 2012; 16:07:12 >
Bu mesaja 1 cevap geldi.

İ

ikiodayediduvar

13 yıl

Yüzbaşı

quote:

Orijinalden alıntı: Dr.Hrn

Bismillahirrahmanirrahim

CSS'ye başlıyorum. hadi hayırlısı

CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.
<!DOCTYPE html> 
   
  <html> 
   
  <head> 
   
  <style type="text/css"> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  h1 
   
  { 
   
  color:blue; 
   
  text-align:center; 
   
  } 
   
  p 
   
  { 
   
  font-family:"Times New Roman"; 
   
  font-size:30px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS örnekleri</h1> 
   
  <p>bu bir paragraftır<p> 
   
  </body> 
   
  </html>
Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

alıntı

Html bitti galiba, hayırlı olsun.

Css te başarılar.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: ikiodayediduvar
quote:

Orijinalden alıntı: Dr.Hrn

Bismillahirrahmanirrahim

CSS'ye başlıyorum. hadi hayırlısı

CSS ile tek seferde birden çok web sayfasının stil ve düzenini değiştirebilriz.
<!DOCTYPE html> 
   
  <html> 
   
  <head> 
   
  <style type="text/css"> 
   
  body 
   
  { 
   
  background-color:red; 
   
  } 
   
  h1 
   
  { 
   
  color:blue; 
   
  text-align:center; 
   
  } 
   
  p 
   
  { 
   
  font-family:"Times New Roman"; 
   
  font-size:30px; 
   
  } 
   
  </style> 
   
  </head> 
   
  <body> 
   
  <h1>CSS örnekleri</h1> 
   
  <p>bu bir paragraftır<p> 
   
  </body> 
   
  </html>
Bu örnekte sayfaların arka plan rengini h1 başlığının rengini ve paragraf için yazı tipi ve boyutunu nasıl ayarladığımızı görüyoruz .

sayfa içindeki tüm h1 başlıkların rengini ve tüm paragrafların yazı tipi ve boyutunu tek seferde head etiketi içinde ayarlamış olsuk.

alıntı
Html bitti galiba, hayırlı olsun. Css te başarılar.

Teşekkürler

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: Bir Kedi Gördüm Sanki

quote:

Orijinalden alıntı: Dr.Hrn

CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors

çeviri için bu bölümler kaldı CSS de

Ellerinize emeğinize sağlık. Konunun takipçisi olacağım.

Teşekkür ederim . Ben öğrenmek için çeviriyordum. Umarım birçok kişiye faydası olur.www.w3schools.com sitesinin çevirisini yapan bir ekip var onlar daha profesyonel şekilde çeviriye başladılar. İnşallah yakında daha hızlı çeviri yaparak asp php gibi bölümleri de çeviriler ve yayınlamaya başlarlarsa linkini size yollarım. CSS bittikten sonra Html ve CSS yi derleyip toplayacam.sonrasında yine bu forumda JAVASCRİPT ÖĞRENİYORUM diye başlık açıp ordan devam edecem . benim 9 ayda öğrendiğimi çok daha kısa sürede öğrenebilirsiniz. Başarılar dilerim.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Image Sprites

Çok sayıda resim içeren bir web sayfası yüklemek uzun zaman alabilir ve birden çok sunucu isteği oluşturur.

Image Sprites kullanarak sunucu istekleri sayısını azaltabilir ve bant genişliğinden tasarruf edebilirsiniz.

Üç ayrı görüntü kullanmak yerine bu görüntüyü kullanabilirsiniz.

CSS ile, resmin sadece ihtiyacımız olan bir parçasını kullanabiliriz.

Aşağıdaki örnek "img_navsprites.gif" adlı görüntüyü nasıl kullanabileceğimizi gösteriyor.Örneği blgisayarınızda denemk için yukarıdaki resmide kaydetmeniz gerekiyor.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  img.home 
  { 
  width:46px; 
  height:44px; 
  background:url(img_navsprites.gif) 0 0; 
  } 
  img.next 
  { 
  width:43px; 
  height:44px; 
  background:url(img_navsprites.gif) -91px 0; 
  } 
  </style> 
  </head> 
   
  <body> 
  <img class="home" src="img_trans.gif" width="1" height="1" /> 
  <br><br> 
  <img class="next" src="img_trans.gif" width="1" height="1" /> 
  </body> 
  </html>

Image Sprites-Navigasyon listesi oluşturma

Navigasyon listesi oluşturmak için ("img_navsprites.gif") adlı resmi kullanacağız.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  #navlist{position:relative;} 
  #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} 
  #navlist li, #navlist a{height:44px;display:block;} 
   
  #home{left:0px;width:46px;} 
  #home{background:url('img_navsprites.gif') 0 0;} 
   
  #prev{left:63px;width:43px;} 
  #prev{background:url('img_navsprites.gif') -47px 0;} 
   
  #next{left:129px;width:43px;} 
  #next{background:url('img_navsprites.gif') -91px 0;} 
  </style> 
  </head> 
   
  <body> 
  <ul id="navlist"> 
    <li id="home"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.w3schools.com/" data-href="http://www.w3schools.com/"></a></li> 
    <li id="prev"><a data-test="test" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="http://forum.donanimhaber.com/m_61893787/tm.htm" data-href="http://forum.donanimhaber.com/m_61893787/tm.htm"></a></li> 
    <li id="next"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"></a></li> 
  </ul> 
  </body> 
  </html>

Image Sprites - Hover Effect(vurgu)

Navigasyon lstesine hover efekti eklemek için aşağıdaki örneği inceleyebilirsiniz.

Bu örneği bilgisayarınızda denemek için

< Resime gitmek için tıklayın >

bu imajı kaydedin

<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
<li id="home"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.w3schools.com/" data-href="http://www.w3schools.com/"></a></li>
<li id="prev"><a data-test="test" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="http://forum.donanimhaber.com/m_61893787/tm.htm" data-href="http://forum.donanimhaber.com/m_61893787/tm.htm"></a></li>
<li id="next"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"></a></li>
</ul>
</body>
</html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 19 Aralık 2012; 8:41:58 >