CSS' te Seçiciler(Selectors) ve Kullanım Şekilleri

Css(Cascading Style Sheets), web sayfasının biçimlendirilmesine yarayan bir teknoloji ve html gibi bir işaretleme dilidir. Web teknolojilerinde sayfa stillerinin sayfaya yüklediği yükü büyük ölçüde azaltmıştır. Buna bağlı olarak sayfanın kod karmaşası da ortadan kalkmıştır.

Css için, sayfa biçimlendirme işlemine bir dinamiklik katmıştır dersek yanlış olmaz diye düşünüyorum. Çünkü css’ ten önceki durumda onlarca satırda yapılan değişiklikler bugün css ile yapılacak bir kaç satır kod değişikliği ile yapılabilmektedir. Bu da bir kaç satır kod ile sayfanın görünümünün tamamen değişmesi anlamına gelir.

Selectors ve kullanım şekillerine geçmeden önce css ve html kullanım mantığı hakkında kısa bir bilgi vermek istiyorum. Css, bir html sayfasına üç şekilde uygulanabilir:

  • Yerel
  • Genel
  • Harici

Ben harici css üzerinden gitmek istiyorum. Çünkü en etkin biçimde kullanılan css türü Harici Css‘ dir. Harici css, css uzantılı bir dosyadır. Yani bu dosyanın referansını, stilini inşa etmek istediğiniz html dosyasına ekleyip html dosyası içinde stil kodları yazmadan sayfanızın biçimlendirme işlemini gerçekleştirebilirsiniz. Bir css dosyasının referansı, html dosyasına head etiketleri arasında aşağıdaki gibi eklenir:

[cc lang=’html’]


serefakyuz.com





[/cc]

Css dosyası içinden html dosyasında yazılan etiketlere ulaşmanın 2 yolu vardır. Bu yolların her birine Seçici(Selector) denir. Bu seçicilerden ilki;


Class Seçicisi(Selector)

html dosyası içinde yazmış olduğunuz etiketlerin özelliklerinden biri class özelliğidir. Bu class özelliği ile css içinden html tagının özelliklerine ulaşmak ve yeni özellikler eklemek mümkündür. Bu erişiminde tabi ki bir kuralı vardır. Css dosyası içinden class ile html tagına erişmek için class isminin önüne nokta(.) işareti konur. Örneklemek gerekirse; varsayalım bir html dosyasının içeriği aşağıdaki gibi:

[cc lang=’html’]


serefakyuz.com

Siteye, adrese tıklayarak ulaşabilirsiniz: www.serefakyuz.com



[/cc]

Görüldüğü üzere div etiketinin class özelliğine “classAdi” ismi verilmiş. Head kısmında yolu belirtilen style.css dosyasından bu div tagının özelliklerine ulaşabilmek için, oluşturulacak css dosyasının içeriği aşağıdaki gibi olmalıdır:

[cc lang=’css’]
@charset “utf-8”;
/* CSS Document */

/*
Aşağıda, etiketin class adı ve önüne koyulan . ile
etiketin özelliklerini aşağıdaki blokta belirledik
*/

.classAdi
{
margin: 2px;
padding: 3px;
font-size:15px;
font-style:italic;
font-family:Comic Sans MS;
font-weight: bold;
}

/*
— .classAdi a — ifadesi,
classAdi isimli class içindeki tüm
taglarının özelliklerini belirler
*/

.classAdi a
{
font-size:20px;
font-family:Comic Sans MS;
}

/*Html dosyasında stili belirlenecek diğer etiketler
yukardaki yapı kullanılarak bu alana eklenir*/

[/cc]

İkinci seçici ise:

Id Seçicisi

Yukarda class seçicisi için yaptığımız örneklerin aynısı Id Seçicisi için de yapılabilir. Şöyle ki classlar için kullanılan . işareti yerine id’ lerde # işareti kullanılır. Aynı örnekleri Id Seçicisi için yaparsak:

[cc lang=’html’]


serefakyuz.com



[/cc]

Görüldüğü üzere div etiketinin id özelliğine “idAdi” ismi verilmiş. Head kısmında yolu belirtilen style.css dosyasından bu div tagının özelliklerine ulaşabilmek için, oluşturulacak css dosyasının içeriği aşağıdaki gibi olmalıdır:

[cc lang=’css’]
@charset “utf-8”;
/* CSS Document */

/*etiketin id adı ve önüne koyulan # işareti ile
etiketin özelliklerini aşağıdaki blokta belirledik*/

#idAdi
{
margin: 2px;
padding: 3px;
font-size:15px;
font-style:italic;
font-family:Comic Sans MS;
font-weight: bold;
}

/*
— #classAdi a — ifadesi,
idAdi isimli id ye sahip div içindeki
tüm taglarının özelliklerini belirler
*/

#idAdi a
{
font-size:20px;
font-family:Comic Sans MS;
}

/*Html dosyasında stili belirlenecek diğer etiketler
yukardaki yapı kullanılarak bu alana eklenir*/

[/cc]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir