CSS Başlangıç: class selector kullanımı

Bu bölümde CSS biçimlendirme kodlarından class seçicisi kullanımını inceleyeceğiz, önceki örneğimizde id seçici kullanımını incelemiştik. 

class seçicisi tanımlamak için <style> etiketi içinde aşağıdaki şekilde, ismi yanına nokta koyarak tanımlıyoruz.

.mavi  {
    color:white;
    background:blue;
}


Burada mavi class seçicisi tanımladık, içindeki kodlarda zemin rengini mavi, yazı rengini beyaz olarak tanımladık. Aşağıdaki şekilde html etiketleri içinde kullanabiliyoruz.

 <h1 class="mavi"> Bu bölümde mavi class yazdık</h1>

Burada h1 etiketi için kullanımını inceledik. Örneğin <p> paragraf etiketi için ise aşağıdaki şekilde kullanıyoruz. 

<p class="mavi"> Paragraf biçimlendirmesi </p>

Şimdi aşağıdaki kodları yazarak sonucu görelim.



<html>
<head>
<title>CSS Örnek4</title>
<meta charset="utf-8"/>
<style>
    .mavi{ color:white; background:blue;}
    .yesil{ color:white; background:green;}
    .kirmizi{ color:white; background:red;}
</style>
</head>
 
<body>
     <h1 class="mavi"> Bu bölümde mavi class yazdık</h1>
     <h1 class="yesil"> Bu bölümde yeşil class yazdık</h1>
     <h1 class="kirmizi"> Bu bölümde kırmızı class yazdık</h1>
</body>
</html>


Mutlu kodlamalar,
Oğuzhan TAŞ
Ekim, 2016
 
Bookmark and Share
Dil Değiştir(Change Language)