Zeki Can - WordPress

  CSS

CSS ID Kullanımı

  CSS    22 Mayıs 2017
Yorum Yok

Css dosyamızda html elementleri için stiller belirleyebildiğimiz gibi kendi oluşturduğumuz elementlerede stiller belirleyebiliriz. Bu elementlere class özelliğini kullanarak stiller belirlemeyi öğrenmiştik. Css Class Kullanımı konumuzu buradan tekrar gözden geçirebilirsiniz.

Elementlere id özelliğini kullanarak stiller belirleyeceğiz. Class özelliğinide kullanıp stiller belirlemiştik.

CSS Nedir? Adlı Yazımı da  okumanızı öneririm.

Peki Class özelliği ile ID özelliği arasındaki farklar neler?

  • ID özelliği sadece tek bir elementte kullanılabilir.
  • Class özelliği birden fazla elementte kullanılabilir.
  • Stil dosyamızda CLASS‘da . (nokta) kullanılır, ancak id özelliğine göre stilleme yapacaksak # (diyez) kullanırız.
  • Aynı id değeri iki elemente verilemez.

Bir örnekle id özelliğiniz inceleyelim.

<div id="stilim">Websitemize Hoş Geldiniz!</div>

Üstteki div elementi içinde yer alan id=”stilim”, o div elementi için CSS özellikleri belirtmemizi sağlıyor. Bu şekilde div elementlerimize o div’e ait özellikler ekleyebiliriz. Yukarıdaki div için verdiğimiz stilim id’si için CSS dosyamızda inceleyelim.

#stilim {
      font: 12pt Verdana;
      color: green;
   }

Burada dikkatinizi diyez kısmına çekmek istiyorum. Class kullansaydık nokta ile belirleyecektik yani şöyle olacaktı.

.stilim {
      font: 12pt Verdana;
      color: red;
   }

Nokta kullandığımızda class, diyez kullandığımızda id özelliğini kullanırız.

<div id="sidebarbaslik">Sidebar Kısmımız</div>

Üstteki örnekte ID değeri “sidebarbaslik” olan bir DIV elementi görüyoruz. CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız.

 #sidebarbaslik {
      font: 12pt Verdana;
      color: red;
   }

Sadece tek bir elemente özel stil tasarlayabiliriz id özelliği ile. Çünkü başka bir elementte yine id değeri “sidebarbaslik” belirtilerek kullanılamaz. id değeri bir elemente verilebilir. O yüzde id özelliğini kullanırken daha çok bir kere kullanılacak yerler tercih edilmelidir.

Kısabir not olarakta şunu belirteyim hiçbir ID değeri rakamla başlamaz. ID, HTML dosyasında o elementi bulmamızı sağladığından dolayı aynı ismi veremeyiz. Aynı ismi vermemizin diğer yaratacağı sorun ise Java Script’te bu elementi id özelliğine göre kullanamamak olacaktır. Bunun yanında bazı tarayıcılar birden fazla aynı id kullanılan HTML dosyalarında stilleri görmezden gelebilir. Bu da sitemizde kaymalara ve bozulmalara sebep olabilir.

84 okunma

Etiketler : , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

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

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

  Arama Yap

  Arşivler