Zeki Can - WordPress
CSS ID Kullanımı
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.
Etiketler : Css, CSS de ID Nasıl Kullanılır, CSS de id ve class Kullanımları, Css id Kullanımı, CSS ile stil ayarlama, id ve class arasındaki farklar
