Css kodlamalasında objeler 3 özelliğe göre stillendirilebilir.
Element
ID
Class
Element: HTML kodlamasında kullandığınız elemanlardır ve tag ismiyle kodlanır.
ID: İngilizce Identifier yani kimliklendirici anlamına gelir. Bir sınıfta aynı numaraya sahip iki öğrenci olamayacağı gibi bir sayfada iki aynı kimlikli element bulunamaz ve CSS kodlamasında diyez başka bir deyişle kare öneki ile tanımlanırlar.
Class: Elementin hangi sınıfta olduğunu tanımlarız ve birden fazla element aynı sınıfın içinde olabilir. Farklı elementler de aynı sınıfa ait olabilirler. Sayfa içinde aynı sınıfa ait birden fazla eleman bulunabilir. CSS kodlamasında sınıflar nokta işareti ile öneklendirilerek tanımlanırlar
Yukarıdaki kodu eğer html sayfanızın head tagları arasına yapıştırırsanız, sayfada kullanacağınız bütün linklerin yani anchor elementlerinin altçizgilerinin kalktığınız göreceksiniz. Çünkü yukarıda text-decoration:none olarak tanımlanmıştır.
menü ID'sini taşıyan bir element yazdığınızda ise otomatik olarak font boyutu 14px olacaktır. ancak sayfa içerisinde menu elementi tekrar etmemelidir.
Bunlara ek olarak class özelliği kirmizi olarak tanımlanmış bütün elementlerde font rengi kırmızı olarak görüntülenecektir.
Element, class ve ID özelliklerinin doğru ve etkin kullanımı ile css dosyalarınızın ve html dosyalarınızın boyutlarını küçültebilir, sitenizin daha hızlı çalışmasını sağlayabilirsiniz.
Element
ID
Class
Element: HTML kodlamasında kullandığınız elemanlardır ve tag ismiyle kodlanır.
ID: İngilizce Identifier yani kimliklendirici anlamına gelir. Bir sınıfta aynı numaraya sahip iki öğrenci olamayacağı gibi bir sayfada iki aynı kimlikli element bulunamaz ve CSS kodlamasında diyez başka bir deyişle kare öneki ile tanımlanırlar.
Class: Elementin hangi sınıfta olduğunu tanımlarız ve birden fazla element aynı sınıfın içinde olabilir. Farklı elementler de aynı sınıfa ait olabilirler. Sayfa içinde aynı sınıfa ait birden fazla eleman bulunabilir. CSS kodlamasında sınıflar nokta işareti ile öneklendirilerek tanımlanırlar
Kod:
<style type="text/css">
a{text-decoration:none}
#menu{font-size:14px}
.kirmizi{color:#f00}
</style>Yukarıdaki kodu eğer html sayfanızın head tagları arasına yapıştırırsanız, sayfada kullanacağınız bütün linklerin yani anchor elementlerinin altçizgilerinin kalktığınız göreceksiniz. Çünkü yukarıda text-decoration:none olarak tanımlanmıştır.
menü ID'sini taşıyan bir element yazdığınızda ise otomatik olarak font boyutu 14px olacaktır. ancak sayfa içerisinde menu elementi tekrar etmemelidir.
Bunlara ek olarak class özelliği kirmizi olarak tanımlanmış bütün elementlerde font rengi kırmızı olarak görüntülenecektir.
Element, class ve ID özelliklerinin doğru ve etkin kullanımı ile css dosyalarınızın ve html dosyalarınızın boyutlarını küçültebilir, sitenizin daha hızlı çalışmasını sağlayabilirsiniz.