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:

 

Bu paragraf sağa hizalanır.

Bu paragraf ortaya hizalanır.

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.

 

Deneme yazısı

Deneme yazısı

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}

DİKKAT

Çoklu sınıf kullanılmış

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

mjeste 20/07/2018

Merhaba, peki elimdeki metinin css değerlerini PHP'de get methodu ile değiştirebilir miyim ?

yönetici 20/07/2018

Değiştirebilirsin get ile aldığın stili
$x =$_GET['style'];
HTML inline style olarak yaz.
<p style="color:<?php echo x ?>"></p>

Selim 01/10/2018

Mrb, sorum şöyle: hover kullanarak resim1 in üzerine geldiğimizde resim2 nin visibilitysini hidden yapabilir miyiz? Resim1i selector yapıp örnek images#resim1 { #resim2 { visibility:hidden }} desek olmaz mı ya da #resim2.visibility:hidden; desek?

yönetici 01/10/2018

Selim, kısıtlı bir şekilde uygulanabilir özellikle etiketler aynı seviyede olacak, Bitişik kardeş seçicisi ile olur.
<img src="manzara" class="res1" alt="">
<img src="manzara1" class="res2" alt="">
CSS: class isimleri mutlaka ver.
.res1:hover~.res2{
		visibility:hidden	
	   }
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1653

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.