Beşiktaş Haber Portalı

Bir önceki yazımda pseudo sınıflarından bahsetmiştim. Şimdi ise elementlerden bahsedeceğim. Yani sahte element sınıfları oluşturacağız diyebiliriz. Yazılışları pseudo sınıflarıyla aynıdır:

1

secici-adi: pseudo-elementi {özellik:değer;}

Hemen pseudo-elementlerinde bahsetmeye başlayalım:

First-line Pseudo-elementi

“First-line” pseudo elementi bir metnin ilk satırı için özel bir stil eklemek için kullanılır. Yani bir metnin sadece ilk satırının rengini değiştirebilir, kalın yapabilir, fontunu değiştirebilirsiniz. Kullanımı şu şekildedir:

1
2
3
4
5

p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}

CSS’de bulunan Pseudo (Sözde, Sahte) sınıflarla seçicilerinize özellikler ekleyebilirsiniz. Bunlar belli koşullarda uygulanacak özelliklerdir. Xhtml ile ulaşamadığımız koşullara ulaşabilmemizi sağlar. Belki şu anda ne demek istediğimi anlamadınız ama açıkladıkça emin olun kolay bir yöntem olduğunu fark edeceksiniz. Öncelikle Pseudo sınıflarının nasıl yazıldığını gösterelim:

1

secici-adi: pseudo-sinifi {özellik:değer;}

Gördüğünüz gibi her zamanki gibi bir sınıf adımız yani secici adımız var. Bu ister id olsun isterse de class olsun. Daha sonra iki nokta işaretini kullanıyor ve bir boşluk bıraktıktan sonra pseudo sınıf adını yazıyoruz ve süslü parantezlerimizin arasına da özellik ve özellik değerlerini belirtiyoruz.

Bağlantılar (Linkler) İçin Pseudo Sınıfları

Pseudo sınıflarını bağlantılarda kullanarak onlara istediğimiz şekilleri verebiliriz. Bağlantılarda kullanabildiğimiz pseudo sınıfları ise şunlardır : hover, visited, active, link. Belki bunları siz de kullanıyordunuz ama bunların adının pseudo sınıfları olduğunu bilmiyordunuz. Şimdi örnek kodlarımızı da gösterelim:

1
2
3
4

a: link (color: # FF0000) /* ziyaret edilmemiş link */ 
a: visited (color: # 00FF00) /* ziyaret link */ 
a: hover (color: # FF00FF) /* fare ile üzerine gelinen link */ 
a: active (color: # 0000FF) /* seçilen link */

Daha önceki yazılarımda CSS’nin ne olduğunu, neye yaradığını açıklamıştım. Şimdi ise css dosya yapısı nasıl olur, genel kodlama mantığı nasıldır onu anlatacağım. Ama bu yazıya geçmeden önce id ve class farkı konulu yazımı okumanızı öneririm, çünkü bu yazıyı o bilgilerden haberdar olarak okumanız daha iyi olacaktır. Şimdi başlayalım.

Css kodlama sınıflar içerisinde yapılır. Yani sitedeki resimler grubu, paragraflar grubu, başlıklar grubu buna örnek olarak verilebilir. Sınıf adlarında kesinlikle Türkçe karakter, boşluk kullanmayın. Css kodlama için de ilk olarak grubumuzu belirlemeliyiz. İlk sınıf örneğimiz sitedeki tüm resimler olsun. Resimler grubunun etiketi Html’deki etiketidir yani img. Kodlamaya da bu etiket ile başlarız:

1
2

img{
}