CSS SEÇİCİLER (SINIF SEÇİCİLER)

Seçiciler adı üzerinde HTML etiketlerini seçmeye yarar. Misal verirsek <p> etiketini seç şu belirttiğim {color:blue;} özellikleri uygula demiş oluyoruz.

Seçiciler sınıf seçici (Class selector) ve tekil seçici (id selector) olmak üzere ikiye ayrılır.

SINIF SEÇİCİLER (CLASS SELECTOR)

Class selectoru ile belirli html etiketi için farklı sitiller tanımlanabilir.

 p.sag {text-align: right} 

 p.orta {text-align: center} 

 

P.Sag stili uygulanırsa paragraf sağa

p.orta stili uygulanırsa parağraf ortaya hizalanır

CLASS SELECTOR KULLANIMI:

 <p class="sag"> Bu paragraf sağa hizalanır.</p> 

 <p class="orta"> Bu paragraf ortaya hizalanır.</p>
 
 

CLASS SELECTOR’ÜN TÜM HTML KOMUTLARINDA KULLANIMI

Bu durumda özellikle bir html etiketi belirtilmez. Noktadan sonra class selector adı verilir , Özellik ve değer belirtilir.

.stil{font-size:12px;

       background-color:#ffff66;

       color:blue;		
     } 

 

Bu tanımlamayı yaptıktan sonra istediğimiz tüm html etiketlerine uygulanabilir.

 <p class="stil">Deneme yazısı</p>

 <span class="stil">Deneme yazısı</span>

Yukarıda görüldüğü gibi stil clasını hangi HTML etiketine yerleştirirsek o etiket belirtdiğimiz css özelliklerini alacak.

BİRDEN FAZLA CLASS SELECTOR KULLANIMI

Çoklu sınıflar, birden fazla sınıfı bir HTML elemanına uygulamak için kullanılır

.onemli{font-weight:bold}

.uyari{font-style:italic}

.onemli.uyari{background-color:silver}

<p class="onemli">DİKKAT</p>

<p class="onemli uyari">Çoklu sınıf kullanılmış</p>

Dikkat ettiyseniz iki classı bir html etiketine uygularken araya boşluk koyarak yazdık.

$x =$_GET['style'];

<p style="color:<?php echo x ?>"></p>

<img src="manzara" class="res1" alt=""> 

<img src="manzara1" class="res2" alt="">

.res1:hover~.res2{
		  visibility:hidden	
	         }