1148

Komple Uygulamalı Web Geliştirme Eğitimi

IDs & Classes

Css ile html etiketlerine hangi yollarla ulaşabiliriz? Css ile Id ve Class kullanımı nasıldır?

Html etiketlerine css kodu yazabilmek için ilk önce ilgili etiketi seçmemiz gerekir. 

Css ile html etiketlerine 3 farklı yöntemle ulaşabiliriz.

  • Etiket ismi
  • Etiket Id
  • Class

Css ile Html Etiketlerine Etiket İsmini Kullanarak Nasıl Ulaşabiliriz ?

Bir etikete ulaşmak için etiket ismini kullandığımızda sayfadaki aynı isimdeki tüm etiketlere ulaşmış oluruz. 

Örneğin ;

p {
   /* Tüm <p> etiketleri için css kodları */
}

div  {
   /* Tüm <div> etiketleri */
}

Yukarıda örneklerde sayfa içindeki tüm <p> ve tüm <div> etiketlerine ulaşmış oluruz. Ancak her zaman yazdığımız css kodunun aynı isimdeki tüm etiketlere uygulanmasını istemeyiz bu durumda kullanabileceğimiz id ve class özellikleri vardır.

Css ile Html Etiketlerine Id Attribute Özelliğini Kullanarak Nasıl Ulaşabiliriz ?

Eğer aynı etiket ismine sahip birden fazla etiket içinden sadece bir tanesine ulaşmak istediğimizde id attribute' unu kullanabiliriz. Örneğin seo tavsiyelerine uyarak sayfada sadece bir tane <h1> etiketi oluşturmamız gerektiğini biliyoruz.

** Html sayfasındaki her bir etikete bir id verebiliriz ancak aynı id değerini birden fazla etiket için kullanamayız.

** Her hangi bir etikete id değerine göre ulaşmak için # işaretini kullanmalıyız.

<h1 id="header"> 
    Komple Uygulamalı Web Geliştirme Eğitimi 
</h1>

id ile <h1> etiketi seçmek için #header dememiz gerekir.

#header {
   font-size: 32px;
   font-weight:bold;
   color:green; 
}

Css ile Html Etiketlerine Class Özelliğini Kullanarak Nasıl Ulaşabiliriz ?

Eğer belli css kodlarını birden fazla etikete vermek istediğimizde bu durumda css kodlarını bir sınıf içinde gruplarız ve bu sınıf ismini istediğimiz etikete verebiliriz dolayısıyla bu sınıfın içindeki css kodları bu sınıfa sahip olan tüm etiketlere uygulanmış olur.

** Sınıf yani class oluşturmak için "." (nokta) kullanmamız gerekir.

** Class ismini istediğimiz kadat etikete verebiliriz. id gibi bir tane sınırlaması yoktur.

Örneğin; sayfada 3 tane <li> etiketimiz var ve biz sadece ikisinin arka plan rengini yeşil yapmak istiyoruz.

.active{
   background-color : green;
}

active sınıfını hangi etikete verirsek verelim o etiket yeşil arka plana sahip olur. <li> , <p> ,<div> fark etmez.

<ul>
   <li class="active"> item 1 </li>
   <li> item 2 </li>
   <li class="active"> item 3 </li>
</ul>

<div class="active">
     arka plan yeşil olur.
</div>

** Bir etiket için birden fazla sınıf ismi verebiliriz. Örneğin <li> etiketi için hem active hem red sınıfını kullanabiliriz. Dolayısıyla <li> etiketimiz hem kırmızı font rengine hemde yeşil arka plan zemin rengine sahip olur.

.active{
    background-color : green;
}

.red{
    color : red;
}

<ul>
    <li class="active red"> item 1 </li>
    <li> item 2 </li>
    <li class="active"> item 3 </li>
</ul>

Gördüğümüz bazı css kodlarımız ;

width : 200px  : => genişlik 

height : 200px : => yükseklik

** Eğer bir etikete genişlik ve yükseklik verebilmemiz için o etiketin block ya da inline-block etiket olması gerekir. Inline etiketlere genişlik ve yükseklik özelliği verilemez. Örneğin <a> ya da <span> etiketi.

Dolayısıyla bir <a> etiketi varsayılan olarak inline etiket olduğundan dolayı bu etiketi ya inline-block yada block etikete çevirmemiz gerekiyor ki genişlik ve yükseklik verebilelim. Bunun için ;

a{
   display : block; 
}

**satırı olduğu gibi kaplayan bir block etiket olur aynen div ya da p etiketi gibi

ya da 

a{
   display : inline-block;
}

**satır içinde diğer elemanla yan yana gelebilir. Satırı olduğu gibi kaplamaz ancak genişlik ve yükseklik verilebilir