CSS´de Id ve Class Kullanımları , webacemi.com

CSS´de Id ve Class Kullanımları
Etiketler: id kullanımı, class kullanımı,

Makalemize başlamadan önce bir iki konuya değinmek istiyorum. Bildiğiniz gibi sitemiz şimdilik Asp, Mysql, Css, Xhtml, Seo Uygulamaları, Programlama olmak üzere 6 farklı kategoride makale bulundurmaktadır. Bu sebeple bazı bölümlerimizde makaleler çok detay konulara girilmeden işlenecektir. Bunun nedeni sitemizin tek bir konu üzerinde yoğunlaşmamış olmasıdır. Bu bölümlerden birisi de CSS bölümüdür. Bu bölüm için konuşacak olursak; öğrendiğiniz bilgiler ile sitenizin stil şablonunu oluşturabilir, CSS ile tablosuz tasarımlar yapabilirsiniz. CSS de kendi içerisinde fazla ayrıntıya sahiptir. Bütün inceliklerini öğrenmek isterseniz size Fatih Hayrioğlu`nun web sitesini önerebilirim.

Bu kadar kafa şişirme ve reklamdan sonra artık aslolan konumuza Id ve class kullanımına geçebilriz smiley

. Çoğu webmaster`ın CSS tanımlamalarını yanlış kullanımları sonucunda sayfalarında bazı tasarım hataları meydana gelmektedir. Sorunlar, özellikle her tarayıcının yorumlama farklılıklarından kaynaklanmaktadır. Bu sebeple makalemiz Id ve class kullanımları üzerine olacak.Öncelikle Id ve class ın ne olduğunu öğrenelim.

Id : Ingilizce Identity ( kimlik ) kelimesinin kısaltmasından oluşmaktadır. Bulunduğu sayfada aynı adı taşıyan sadece bir Id tanımlaması olabilir. CSS belgemizde Id tanımlaması yapmak için "#" işaretini kullanırız.

Class : Sınıf anlamına gelir ve CSS belgemizde tanımladığımız class değerini istediğimiz sayıda kullanabiliriz. CSS belgemizde class tanımlaması yapmak için "." (nokta) işaretini kullanırız.

Id mi Kullanmalıyım Class mı ?

Bu soruyu sorduğunuzu duyar gibiyim smiley

.Yukarıda da bahsettiğim gibi aynı isimdeki Id tanımlaması yalnızca bir defaya mahsus kullanılmalıdır. Nasıl ki her insanın sadece bir tane tckimlik numarası vardır ve aynısı dünya üzerinde başka hiç kimsede yoktur Id de bunun gibidir. Bulunduğu sayfada yalnızca bir alan bu değeri alabilir. Fakat class birden çok alan için kullanılabilir. Id tanımlamalarımızı genelde sabit bölmelerimiz için kullanabiliriz. Örneğin sayfalarımızda üst bölüm, alt bölüm, sol sağ ve orta bölümler birer kez tanımlanır. Bu bölümler için Id değeri tanımlamak doğru bir kullanım olacaktır. Yine aynı sayfamızda 5 adet aynı stil özelliklerine sahip bir link olduğunu düşünelim. Hepsi için ayrı ayrı Id değeri tanımlayıp aynı özellikleri vermek yerine class tanımlamasıyla hepsine aynı stili uygulayabilir kodumuzu daha minimuma indirebiliriz. Umarım fark anlaşılmıştır smiley

Makalemizi Id ve class’ın ortak kullanıldığı bir örnek ile bitirelim.

Kod Bloğu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Cascading Style Sheets</title>

 <style type="text/css">

 body{ font: 17px Arial, Helvetica, sans-serif; }

 #ust{ background-color : gray; border-bottom : 5px solid #fff; padding : 10px;}

 #orta{ background-color : lightblue; border-bottom : 5px solid #fff;padding : 10px;}

 #alt{ background-color : lightgray;padding : 10px;}

 .link, .link:visited { color : blue; }

 .link:hover, .link:visited:hover { color : black; text-decoration : none; }

 </style>

 </head>

 <body>

	<div id="ust">Sayfamızın üst bölümü.</div>

	<div id="orta">

 <a href="#" title="webacemi" class="link">webacemi.com</a><br />

 <a href="#" title="nakarat" class="link">nakarat.org</a><br />

 <a href="#" title="google" class="link">google.com</a><br />

 </div>

	<div id="alt">Sayfamızın alt bölümü.</div>

 </body>

</html>

Örneğimizde üst, orta ve alt bölümleri Id ile tanımladık ve birer defa kullandık. Linklerimiz de ise aynı özellikler olduğu için class ile kullanım yaptık. Makalemiz biraz karışık oldu fakat anladığınızı umuyorum smiley

Sonraki makalemizde görüşmek üzere bol yazılımlı günler..