Web Site Görünümünü Class Kullanarak Özelleştirme

CSS Class Kullanımı

Web site görünümü özelleştirirken en çok kullanılan ve profesyonel tasarımcılar tarafından tercih edilen yöntem class yapısını kullanarak kod bloğuna erişmektir. En çok kullanılan Görünüm kütüphanelerinden olan Bootsrap ya da Foundation yapılarına da dikkat ederseniz  bu yapılarda da görünümü özelleştirmek için class’ların kullanıldığını görebilirsiniz. Classları kullanmak aynı zamanda yaptığınız özel görünümleri kütüphane halinde toplayarak birçok projede tekrar tekrar kullanmanıza yardımcı olur. Ayrıca class yapılarındaki bir çok class tanımlamasının aynı anda kullanılabilirliği avantajından dolayı, mümkün olduğunca tüm görünümleri ayrı ayrı parçalara bölmekte fayda var. Örneğin kalın görünümlü bir kod bloğu için bold-text diye bir tanımlama yapılabilir. Class yapılarını iyi öğrenmek aynı zamanda CSS konusunda kullanacağınız kütüphaneleri daha etkili kullanabilmek için de çok önemlidir. 

Örnek olabilmesi açısından bu makalemizde site başlık ismini düzenleyelim. Aşağıdaki gibi bir kod bloğunuzun olduğunu düşünün.

<h1 class="bold-text">
    Information Universe Of Alizade ZADE
</h1>

CSS dosyası içinde veya style etiketleri içinde bu bold-text erişmek için .bold-text yapısını kullanmamız lazım. Yani CSS içinde class ismi önüne ‘.’ Karakteri gelir. Bold-text yapısına uygun olarak yazımızı CSS içinde kalın yapalım.

<style>
    .bold-text{
        font-weight:bold;
    }
</style>

Görüldüğü gibi bold-text classına erişmek için class isimlendirmesi önüne ‘.’ Karakteri ekleyerek görünümümü özelleştirmiş olduk. Başlıkla ilgili diğer ayarları da eklemek istersek görünümle ilgili akılda kalışı bir isim kullanarak bu class ismini de site başlığına ekleyebiliriz. Örnek olabilmesi açısından aşağıdaki özelleştirmeleri yaptım. Bu işlemden sonra kodlarımız aşağıdaki gibi olacak.

<style>
    .bold-text{
        font-weight:bold;
    }
    .green-text{
        color:green;
    }
</style>
<h1 class="bold-text green-text">
    Information Universe Of Alizade ZADE
</h1>

Özetle görünüm özelleştirmeleri yaparken class yapılarını kullanabilmek çok önemlidir. Bunun için CSS dosyası içinde veya style etiketleri arasına class isminin önüne ‘.’ İşaretini ekleyerek görünümleri özelleştirebiliriz. Class yapısını kullanmak aynı zamanda CSS kütüphaneleri ile çalışmak veya kendi CSS kütüphanenizi oluşturacaksanız da çok önemlidir. Ayrıca profesyonel tasarımcılar da genelde görünüm özelleştirme için class yapısını kullanmayı tercih ederler.

Umarım yazım faydalı olmuştur. Bu konu ile alakalı sorularınız varsa lütfen sormaktan çekinmeyin…