Id Ve Class Arasındaki Fark

April 29, 2018 Berkay Gülyaz 0 Comments

Hepinize merhaba arkadaşlar. Bugün ufak bir kafa karışıklığı olan, ikisinin farkının ne olduğunu belki de anlayamayanlar için bu yazıyı yazıyorum. Başlıktan da görmüş olduğunuz üzere bugünkü konumuz ıd ve class.

İlk önce kullanım amaçlarından bahsedeyim. Id ve class, bizim seçicilerimizdir. Bu seçiciler bizim için taglere Css’te özellik verirken büyük kolaylık sağlar. E tamam da şimdi bu ikisi de aynı işlem için kullanılıyorsa ne farkı var? Hemen açıklayayım farkı. Id özeldir, class ise özel değildir. Yani daha basit anlatmak gerekirse, bir okulun kendine özel bir adı vardır ve bu ad başka hiçbir okulda olamaz.Yani okul Id’dir. Fakat bu okulun içerisindeki şubeler başka okullarda olabilir. Mesela her ilkokulda 8/A , 8/B vardır. Okulun içerisindeki şubeler ise Class’tır. Bu classları daha sonra farklı divlerin içerisinde de kullanabilirsiniz.

Örnek vermek gerekirse;
Header

<div id="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">BOW</a>
            </div>
            <ul class="navigation">
                <li><a href="index.html">ANA SAYFA</a></li>
                <li><a href="about.html">BİZ KİMİZ?</a></li>
                <li><a href="services.html">HİZMETLERİMİZ</a></li>
                <li><a href="works.html">İŞLERİMİZ</a></li>
                <li><a href="contact.html">İLETİŞİM</a></li>
            </ul><!--navigation-->
        </div><!--container-->
    </div><!--header-->

Footer

<div id="footer">
        <div class="container">
            <ul class="footer-menu">
                <li><a href="index.html">ANA SAYFA</a></li>
                <li><a href="about.html">BİZ KİMİZ?</a></li>
                <li><a href="services.html">HİZMETLERİMİZ</a></li>
                <li><a href="works.html">İŞLERİMİZ</a></li>
                <li><a href="contact.html">İLETİŞİM</a></li>
            </ul>
            <div class="logo-ftr">
                    <a href="index.html">BOW</a>
            </div>
        </div>
    </div><!--footer-->

Örnekte de gördüğünüz gibi hepsini kapsayan div’e id verdim. İçerisindekilere ise class verdim ve iki farklı kapsayıcı içerisinde “container” adında class var.

Hepinize iyi çalışmalar 🙂

Leave a Reply:

Your email address will not be published. Required fields are marked *