CSS Stilleri 2

CSS Stilleri 2

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

Henüz Yorum Yapılmamış, İlk Yorumu Siz Yapın

Yorum Yollayın