MENU

Ders 3: Sınıf Seçicisi (class), Tekil Seçiciler (ID) ve HTML Hiyerarşisi

Anasayfa » CSS / CSS3 » Ders 3: Sınıf Seçicisi (class), Tekil Seçiciler (ID) ve HTML Hiyerarşisi
Ders 3: Sınıf Seçicisi (class), Tekil Seçiciler (ID) ve HTML Hiyerarşisi

Merhaba arkadaşlar gece gece yeni bir video çektim inşallah faydalı olur :) Bugünkü dersimde ID ve Class‘lardan bahsettim. HTML Hiyerarşisi konusunda yazımın en altında bahsedeceğim detaylı olarak onuda öğrenmiş olcaksınız.

CSS’te Seçiciler; Sınıfı seçiciler yani class’lar birde Tekil seçicilerimiz var onlarda ID’lerimiz oluyor. Sınıf seçicileri yanında birde Çoklu seçici kullanabiliyoruz videodaki örneklerimede alttaki yazımdaki örneklerimide inceleyebilirsiniz.

Sınıf Seçicisi

Sınıf seçicisi dediğimiz class’larımızdır arkadaşlar. (class=””) paranter içinde örnek olarak yazdım. HTML etiketlerin içine class olarak atayıp özel stiller tanımlamamı sağlar. Aşağıdaki div’ime ben class=”deneme” yazdım.

Örnek;

<div class="deneme">
rooteto ders
</div>

CSS kullanımı;

Deneme class’ını 2 şekilde kullanabilirim;

Mantık: Div’in içindeki .deneme class’ı

div.deneme{color:red;}

Mantık: Tüm .deneme class’ı

.deneme{color:red;}

Çoklu Seçiciler

Çoklu seçicileri class’larımızda kullanıyoruz. Class’lar hem tekrarlanabiliyor hemde çoklu olarak yazılabiliyor demiştik videoda’da. Örnekleyerek gösterirsek;

<div class="birinci ikinci">
 <h1 class="baslik ikinci">rooteto ders</h1>
 <h1 class="baslik ikinci">rooteto ders</h1>
</div>

CSS kullanımı;

.birinci{color:blue;}
.ikinci{font-weight:bold;}
.baslik{color:yellow;}

Burdaki mantıkta şu şekilde .birinci class’ıma mavi renk verdim.

  • .birinci: Div’in içindekilere blue mavi verdim
  • .ikinci: 3’üde kalın olsun.
  • baslik: Sadece .baslik geçenler sarı olsun dedim.

Tekil Seçiciler

Tekil seçicilerimiz videoda’da söylediğim gibi sadece 1 defa kullanıyoruz. Class’ları birden fazla tekrar edebiliriz ancak ID’leri tekrarlayamayız. HTML sayfanızda çalışır ama kural bu değildir çalışıyo diye yapmayın mantığı öğrenip yaparsanız tarayıcılarla uyumlu site yapmayıda kavrayabilirsiniz.

Tekil seçicilerimiz dedik tekil seçiciler ID’lerimizdir. Onlarda şu şekilde kullanılır örnek;

<div id="logo">
 <h1>Site başlığı</h1>
  <p>Açıklama kısmı</p>
</div>

CSS kullanımı;

Mantık: ID’ler “#” işareti kullanılarak yazılır.

#logo{width:200px;height:200px;}

HTML Hiyerarşisi

HTML Hiyerarşisini anlamanız için bir resim buldum. Resimdeki standartlara göre sayfa kodlamanız gerekiyor. Resimde görüyorsunuz heading etiketleri hiç bir zaman divlerin üstüne çıkmıyor. Divler baba diğerleri evlatlar em, b, strong, a bunlarda minik uşak :)

HTML Hiyerarşisi

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.