CSS Bağlantılar

Sitenizdeki bağlantıları CSS kullanarak şekillendirmek için bazı özel eklerden faydalanılır. Bir bağlantı dört farklı şekilde stillendirilebilir. Bunlar:
 

• a:link - Normal link görünüşü
• a:visited - Ziyaret edilmiş siteye giden link görünümü
• a:hover - Fare ile üzerine gelindiğindeki görünüş
• a:active - Tıklanılan andaki görüntüsü

Yukarıdaki tüm süreçler için biçimlendirme yapmamız mümkün:
 

   a:link {color:#FF0000;}      /* ziyaret edilmemiş */
   a:visited {color:#00FF00;}  /* ziyaret edilmiş */
   a:hover {color:#FF00FF;}  /* fare üzerindeyken */
   a:active {color:#0000FF;}  /* aktifken */

  
Yukarıdaki bağlantı biçimlerini sıralarken uymamız gereken bir sıra vardır. Bu sıraya uyulmazsa bağlantı görünümleri doğru çalışmayabilir.

• a:hover her zaman a:link ve a:visited den SONRA gelmeli.
• a:active her zaman a:hover dan SONRA gelmeli.

CSS Listeleme

Listelerde kullandığımız madde imlerini biçimlendirirken CSS'den faydalanabiliriz.

CSS üç bakımdan işimize yarar:
 

• Sıralı listelerdeki numaraların görünüşünü değiştirebiliriz.
• Maddelenmiş listelerdeki imlerin şekillerini değiştirebiliriz.
• Madde imi yerine belirlediğimiz bir resim kullanabiliriz.

Listelerde biçimlendirme yaparken sıklıkla kullanılan komutlar:
 

• list-style-type
• list-style-image
• list-style-position
• list-style (Birleştirilmiş)

 

list-style-type: Listeleme Şekli Tipi

Bir listenin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işaretleri kare (square) olacaktır:
 

   ul { list-style-type: square; }

   
Aşağıdaki şekilde görünecektir:

HTML Görünümü Listeleme Şekilleri
 

• Maddelenmiş Liste
• Numaralanmış Liste

UL (maddeli) ve OL (numaralı) listelerde farklı farklı stiller kullanılabilir. Örneğin numaralı listemizdeki numaraların roma rakamı olmasını istiyorsak:
 

   ol.a { list-style-type: upper-roman; }
   

Alfabedeki küçük harflerin listelenmesini istiyorsak:
 

   ol.b { list-style-type: lower-alpha; }
   

İçi boş daireleri madde imi yapmak istiyorsak:
 

   ul.c { list-style-type: circle; }
   

Görüldüğü gibi birçok şekli var. Kullanabileceklerinizin tamamı:

OL (numaralı liste) için: armenian, decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, none (boş bırak), upper-alpha, upper-latin, upper-roman.

UL (maddeli liste) için: circle (içi boş yuvarlak), disc (yuvarlak), square (kare), none (boş bırakır - göstermez).

 

list-style-image: Madde İşareti Yerine Resim Kullanmak

Küçük bir resim belirterek onun madde imi yerine kullanılmasını sağlayabiliriz.
 

   ul { list-style-image: url('madde.gif'); }
   

Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.

 

list-style-position: Madde İmi Nerede Olacak?

Madde iminin maddenin içinde mi dışında mı olacağını belirtir. inside içinde, outside dışında olacak demektir.
 

   ul { list-style-position: inside; }
   

Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.

 

list-style: Kısa Yoldan Kullanım

Yukarıda belirtilen tüm özellikleri tek bir kod ile de kullanabiliriz. Aşağıdaki örneğe bakalım:
 

   ul { list-style: square url("madde.gif"); }
   

Örneğe bakılırsa madde imimiz kare biçimli olacak ve üzerine madde.gif işlenecektir. Yani önce list-style-type belirttik sonra list-style-image belirttik.

CSS Tablolar

CSS Aşağıdaki gibi tablolarınızda farklı renk ve tasarımlar kullanmanıza olanak sağlar:

                                                                     

Tablolarla ilgili bilmeniz gereken komutlar:

• border
• border-collapse
• width ve height

NOT: Tablolarda nesneler hücrelerde yer alır. HTML'de hücreler TD elementi ile belirtilir. Dolayısıyla aşağıda anlatılan kodların çoğu TD elementine yöneliktir.

 

border: Kenarlık

İlgili sayfada bilgi aldıktan sonra tarayıcınızın GERİ butonu ile tekrar bu sayfaya gelerek derse devam edebilirsiniz.

 

border-collapse: Kenarlıkları Kaldır

Tablo özelliği olarak bunu belirtirsek tablonun varsayılan kenarlıkları görülmeyecektir.
 

      table.tablom { border-collapse: collapse; }
   

width/height: Tablo Genişliği ve Yüksekliği

Tablo ve tablo hücreleri için genişlik (width) ve yükseklik (height) belirtmemizi sağlar.
 

      td.hucre1 { width: 100px; height: 200px; }
      td.hucre2 { width: 400px; height: 100px; }
   

Yukarıdaki örnekte hucre1 adlı hücre 100 piksel genişlik ve 200 piksel yüksekliğe sahipken, hucre2 400 piksel genişlik ve 100 piksel yüksekliğe sahiptir.
 

Diğer Tablo Şekillendirme Komutları

text-align: Tablo içindeki yazıların hizasını belirlersiniz.

padding: Tablo içinden belirtilen değerde boşluk verdirir.

background-color: Arkaplan rengini belirtir.

color: Yazı rengini belirtir