CSS ile çoklu class kullanımı

Bu çalışmamızda CSS ile çoklu class kullanımı yaparak kodlarımızı daha modüler, daha kısa ve daha düzenli yapmayı öğreneceğiz.

Aşağıdaki gibi bir kutu isimli class tanımlıyoruz.

.kutu{
      width:300px;
      height:300px;
      float:left;
}

Sonra kırmızı isimli bir class tanımlayıp içine arka zemini kırmızı hale getiren kodumuzu yazıyoruz.
 
   .kirmizi{ background:red;}
 
Sonra mavi ve yeşil isimli iki class daha tanımlıyoruz. kutu ve renk isimleri verdiğimiz class'ları beraber kullanarak kutunun kırmızı, yeşil ve mavi olmasını sağlayabiliriz. Bu işlem için aşağıdaki kod satırını yazabiliriz.

<div class="kutu kirmizi">
</div>




Kodların tamamı aşağıdadır.

<html>
<head>
<title>CSS Ornek2</title>
 
<style>

.kutu{
      width:300px;
      height:300px;
      float:left;
}
 
   .kirmizi{ background:red;}
   .yesil{background: green;}
   .mavi {background: blue;}
 
   .kutu:hover{background: black;}

</style>

</head>
<body>
<div class="kutu kirmizi">
</div>
 
<div class="kutu mavi">
</div>
 
<div class="kutu yesil">
</div>
 
</body>
</html>
 
İlerleyen derslerde Web Tasarım yeteneklerimizi CSS ile daha da geliştirecek, web sitelerimizi makyajlayarak daha profesyonel hale getirebileceğiz.

Mutlu kodlamalar,
Oğuzhan TAŞ
Ocak, 2017
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale