Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
CSS > ne zaman CLASS, ne zaman ID?
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir (1 Mobil) - 1 Masaüstü, 
1 Mobil
1 Mobil
Giriş
Mesaj
-
-
Class: bu bir genellemedir, bircok yansimasi vardir. Ornek vericek olursak bir siniftaki bircok insan
ID: ozeldir, belirlir bolgeye uygulamak icindir. Ornek olarak siniftaki belli bir insan.
Hic bir sey anlamadigini varsarayaktan
bi ornek vericem
css codu yaziyorsun
<p> icin hem tum siteye hemde belli p`lere uygulamak icin kod yaziyorsun diyelim
CSS CODE KISMI
.myclass
{
fontsize: 12px;
}
<p class="myclass">kjdfhsafhasjh</p>
---
p#myID
{
fontsize: 12px;
}
<p ID="myID">kjdfhsafhasjh</p>
Class`a belli bir tag atamadik .myclass (bu code standart oldu her turlu uygulanabilecek tag`da bullanbilirsin). ID de ise uniqie code sistemi var code sadece yazdigin tag icin gecerli. Ayrica ID tag`i kullandigin sayfa icin gecerli.
Aradaki fark ID selectoru sadece birkez cagiralabilir, Class ise istendigi kadar
Yani Ayni ID selectorunu hem p tagina hemde div tagina sonra bide table icindeki yazilara uygulayamassin (sadece bir tag), ama class herseye uygulanir en onemli nokta budur.
EK:
Simdi yeni falan basladiysan bu adam ne diyo diyeceksin tag falan.
Tag`a ornekler
p, h1, div, table .... <> `de kullanarak yazdigin bu seylerin genel adi tagdir.
< Bu mesaj bu kişi tarafından değiştirildi Moribito -- 13 Ekim 2008; 15:01:01 >
-
anladım, sağolasın. -
Basit bir dille anlatılmak istenirse;
id yi CSS dökümanı içerisinde bir kez tanımlayabilir ve tasarım yani body içerisinde bir kez kullanabilirsin. Class ı ise yine CSS dökümanında bir kez tanımlayabilirsin; ancak body içerisinde defalarca kullanabilirsin.
Arkadaş yukarıda taglardan bahsetmiş. Taglar için genel tanımlamalar yapılır yani zaten taglar CSS dökümanında Class olarak tanımlanır.
p {
font-size: 10px
}
<p> </p> içerisinde kalan yazıların 10px olduğunu anlatır. Yani tüm <p> ile açılan ve </p> kapanan yerlerde kullanılır.
p .metin1 {
font-size: 10px
}
<p class="metin1"> </p> içerisinde kalan yazıların 10px olduğunu anlatır. Yani tüm <p class="metin1"> ile açılan ve </p> kapanan yerlerde kullanılır. Yine istediğiniz kadar bu kodu tekrarlayabilirsiniz.
p #metin1 {
font-size: 10px
}
<p id="metin1"> </p> kalan yazıların 10px olduğunu anlatır. Sadece <p id="metin1"> ile açılan ve </p> kapanan yerde kullanılır. Site içerisinde { yada include ettiğiniz css dökümanı içerisinde ] sadece 1 kez kullanabilirsiniz.
Class lar ve id ler için tag kullanmadan da tanımlama yapabilirsiniz
.metin1 {
font-size: 10px
}
#metin1 {
font-size: 10px
}
Yukarıdaki örnekteki kodlamayı; yukarıda arkadaşın belirttiği şekillerde de kullanabilirsiniz.
<div class="metin1"> ; <table class="metin1"> <span class="metin"> gibi;
ancak modern kodlamalarda "a" "h1" "h2" gibi kodlamlarda genel olarak sayfa içerisinde class yada id atanmaz. Bunun yerine yukarıda ilk verdiğim kodlamaya benzer;
h1 a, h1 a:visited {
text-decoration:none;
color:#eee;
}
h1 a:hover {
text-decoration:underline;
color:#999;
}
gibi yazılabilir.
-
Mesajlarınız için teşekkürler ama anlayamadığım tek bir nokta var.
Mesela;
/.css dosyası/
#test1 {
color: green;
}
#test2 {
color: green;
}
---------------
Yukarıda id olarak #test1 ve #test2 atadım. ID kullanacaksan hem <p id="test1"> hem de <div id="test1"> kullanamazsın demişsiniz, peki sayfada bir kaç kez <p id="test1"> i kullanabilir miyim? Aynı tag çünkü. Yoksa burada bile "bir kere" kullanmak zorunda mıyım? eğer ikinci <p> tagını kullanacaksam <p id="test2"> yazmak mı zorundayım? (test1 ve test2 id leri aynı özelliği taşımasına rağmen) -
quote:
Orjinalden alıntı: thumbs
Mesajlarınız için teşekkürler ama anlayamadığım tek bir nokta var.
Mesela;
/.css dosyası/
#test1 {
color: green;
}
#test2 {
color: green;
}
---------------
Yukarıda id olarak #test1 ve #test2 atadım. ID kullanacaksan hem <p id="test1"> hem de <div id="test1"> kullanamazsın demişsiniz, peki sayfada bir kaç kez <p id="test1"> i kullanabilir miyim? Aynı tag çünkü. Yoksa burada bile "bir kere" kullanmak zorunda mıyım? eğer ikinci <p> tagını kullanacaksam <p id="test2"> yazmak mı zorundayım? (test1 ve test2 id leri aynı özelliği taşımasına rağmen)
İlk önce css dosyasını inceleyelim.
test1 ve test2 renkleri zaten yeşil; dolayısı ile test1 ve test2 id lerinin yerine test i class olarak kuyllanalım.
.test {
color:green;
}
Şimdi id kullanırken hem p hem div de kullanamazsın değil. Mesela id yi dökümanda 1 sefer kullandık;
<p id="test1"> ............. </p>
böylece dökümanda bir kez daha test1 id kullanamayız. İster <p> ile ister <div> ile bunun önemi yok. Id de önem arz eden etiket tir. Yani test1 burada etiket oluyor ise; ne bir kez daha css içerisinde nede döküman içerisinde tekrarlanmaz.
Bunun yerine şunu yapabiliriz.
Örnek 1
.test1 {
color:green;
}
<div>
<p class="test1"> ........... </p>
<p class="test1"> ........................................ </p>
<p class="test1"> .... </p>
</div>
yada;
Örnek 2
.test1 {
color:green;
}
#sol {
float:left;
width:%33;
}
#orta {
float:left;
width:%33;
}
#sag {
float:right;
width:%33;
}
<body>
<div class="test1" id="sol">
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
</div>
<div class="test1" id="orta">
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
</div>
<div class="test1" id="sag">
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
</div>
</body>
Şimdi burada örnek 1 de paragraflar birden fazla oılduğu için bunlara her biri için tek tek id verip tek tek css özellikleri yazacağımıza tek bir class kullanarak işi bitirdik. Zaten CSS nin güzelliği de burada. Yani diyelim onlarca sayfa var. ve yazı stilini thoma dan verdana ya çevireceğiz. Font-family deki tek bir kod değişikliği istediğimizi basitçe yapmamızı sağlayacaktır.
Şimdi 2. örneğe göz atalım.
Bu örnektekini bir sayfa şablonu olarak düşünün; buradaki sayfa diyelim ki örnekte yaptığımız gibi 3 parçadan oluşuyor. biz bu 3 parça div in yerlerini id ler ile belirledik. Ama iç tanımlamları da yani paragraftakileri ise tekrarladığı için class la tanımladık.
İleri düzey css yazarken yada kendi açımdan belirtmek gerekirse ben önce kağıda şablonu çiziyorum. Böylece nerelere nasıl müdahale etmem gerekiyor diye elimde veri oluyor. Sonrasında ise sablonu kodluyorum.
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
