Bir önceki yazımızda “class” etiketiyle daha öncedeb CSS kodumuzda oluşturduğumuz sınıfları gerektiğinde nasıl çağırabileceğimizi öğrenmiştik.
Bu yazımızda da ID leri ve class etiketinden farkını göreceğiz.
ID’ler JavaScript fonksiyonlarının benzersiz bir nesneyi ekranda tanımlayabilmelerini sağladıklarından dolayı DHTML yani dinamik HTML’in temal yapı taşlarıdır diyebiliriz. Yani sınıflardan farklı olarak ID’lerin normalde bir sayfada tek bir öğeyi bir nesne olarak tanımlamak için sadece bir kere kullanılması gerekmektedir. Bu nesne daha sonra JavaScript ile düzenlenebilir. ID ve sınıflar arasındaki fark CSS konumlandırma hakkında daha fazla şey öğrendikten sonra ve ID’leri CSS katmanları yaratmak için kullanmaya başladıktan sonra daha anlaşılır gelecektir.
Şimdi dilerseniz bir örnekle ID’lerin nasıl kullanıldıklarına bakalım.
Daha önceki örneklerde bir CSS dosyası yaratmayı ve bunu ne gibi yollarla çağırabileceğimizi öğrendiğimiz için bu kısmı direk geçiyorum
Bir HTML öğesi veya sınıfı CSS kodumuza nasıl ekleyeceğimizi biliyoruz. Şimdi de ID’leri nasıl ekleyeceğimize bakalım.
#denemeid {
color: #003366;
font-size: 24px;
font-family: Georgia, "Times New Roman", Times, serif;
}
Görüldüğü gibi ID eklemek daha önce nasıl ekleneceğini gördğümüz sınıf eklemeye çok benziyor. Aralarındaki tek fark eklediğimiz ID’ye isim verirken başına diyez (#) işaretini koyuyoruz. Her ID diyez işaretiyle başlamalı yoksa kodunuz çalışmaz. ID’ye vereceğiniz isimi dilediğiniz gibi seçebilirsiniz yalnız kelimeler arasında boşluk olmamalı. Bununla birlikte vereceğiniz isim kesinlikle JavaScript için ayırılmış bir sözcük ya da söz dizimi de olamaz.
Şimdi CSS kodumuza bir ID tanımlaması ekledik. Sıra geldi bunu nasıl çağıracağımıza. ID’leri çağırmak sınıfları çağırmaya çok benzer. Hatırlayacağınız gibi bir öğeyi hazırladığımız sınıfın kurallarına göre görüntülemek için şöyle çağırıyorduk.
<p class="BASLIK2">www.hayaletinyeri.com</p>
ID’leri de aşağıdaki gibi çağırıyoruz.
<p id="denemeid">www.hayaletinyeri.com</p>
Görüldüğü gibi yöntemler birbirine çok yakın birinde class deyip sınıfın adını yazarken diğerinde id deyip ID adını yazıyoruz.
Sayfamızda istediğimiz öğeyi yukarıdaki örnekte görüldüğü gibi istediğimiz ID ile ilişkilendirerek çağırabiliriz. Kendiniz daha karmaşık denemeler yaparak değişik sonuçlar elde edebilirsiniz.
ID’ler bize öğeleri nesne yapma ve bu nesneleri JavaScriptle birlikte kullanma imkanı verir. ID’lerin bize sayfalarımızda nasıl inanılmaz bir esneklik sağladığını ilerleyen derslerde anlayacaksınız.