Merhaba..
CSS kodları yazılırken , hangi özelliğin nereyi, hangi eleman(lar)ı etkileyeceğini SEÇİCİLER belirler. GENEL ve HARİCİ CSS yöntemlerinde kullanılırlar.
CSS TEMEL SEÇİCİLER
CSS'te temelde 4 seçici kullanılır. Ayrıca farklı seçicilere aynı özellikleri verebilmek için gruplanarak ta kullanılabilirler..
- ETİKET Seçici
- CLASS (.Sınıf) Seçici
- ID (#Kimlik) Seçici
- GENEL Seçici
- GRUP Seçiciler
ETİKET SEÇİCİ
Doğrudan HTML etiketlerine CSS özellikleri eklemek istediğimizde kullanılır. Etiket seçici sadece kendisi ve içindekileri için özellik alabilir.
h2 {
font-size:25px;
background-color:#222;
}
<body>
<h2> ETİKET SEÇİCİLER </h2>
</body>
Ekran Görüntüsü
Yukarıda H2 etiketine 25px yazı boyutu ve arka plan rengi tanımlanmış. Bu durumda sayfadaki H2 etiketlerinin ve varsa içindekilerin yazı boyutu 25px olacaktır.
Etiket seçicilerde yazılarla ilgili verilen RENK, BOYUT, TİP, YAZI HİZALAMA ve SATIR YÜKSEKLİĞİ gibi özellikler , bu etiketin içinde başka etiketler var ise, istisnalar hariç , onlar içinde geçerli olacaktır. Örneğin <A> etiketi kendine özgü renk aldığı için , içinde olduğu etikete verilen renk özelliğinden etkilenmez...
CLASS (SINIF) SEÇİCİ
- CSS özelliklerini etiket isminden bağımsız class'larla verebiliyoruz. Stil paketi gibi düşünebilirsiniz..
- Class seçicilere aldığı özelliklere uygun bir isim verdikten sonra başına mutlaka nokta ( . ) işareti konulur (örneğin .kirmizi).
- Sayfa içerisinde uygulanmak istenen yerde ise class="" parametresi ile class'ın adı yazılır.
- Classları sayfada istediğimiz kadar kullanabilir , aynı anda farklı elemanlara uygulayabliriz..
.kirmizi { color : #933; }
.mavi { color : darkblue; }
<body>
<div class="mavi"> Mavi Başlık </div>
<p class="kirmizi"> Kırmızı Yazı </p>
<span class="mavi"> Mavi Yazı </span>
</body>
Yukarıda mavi class'ı hem DIV hemde SPAN etiketlerine uygulanmış. Dolaysıyla her iki etiket içindeki yazı mavi olurken , P etiketi içindeki yazı kırmızı olur.
Ekran Görüntüsü
Kırmızı Yazı
Mavi Yazı
NEDEN CLASS KULLANMALIYIZ?
Sayfada bir çok elemana aynı class'ı verdiğimizde, sadece class'ın css özelliğinde değişikllk yaparak , tüm elemanların bu değişiklği almasını sağlayabilriz. Örneğin sayfada 10 tane butona .btn class'ı eklediğimizi düşünelim. .btn class'ının rengini CSS bölümünde değiştirdiğimizde , 10 butonun rengi aynı anda değişecektir. Ayrıca harici css ile bağlantı sağlanarak aynı class farklı sayfalarda da kullanılabilir...
CLASS İSİMLERİ BELİRLENİRKEN ÇİZGİ YADA ALT ÇİZGİ KULLANILABİLİR ANCAK TÜRKÇE KARAKTER KULLANILAMAZ!
ETİKETE AİT CLASS SEÇİCİ
Herhangi bir class'a sahip bir etikete , diğerlerini etkilememesi gerektiği durumlarda etiket.class tanımı ile CSS özellikleri atayabiliriz.
h3.red { color : #933; }
<h3> H3 BAŞLIĞI </h3>
<h3 class="red"> H3 BAŞLIĞI </h3>
Yukarıda sadece "red" class'ı olan H3 etiketine (;HTMLdeki 2. H3 etiketi) css özelliği verilmiş olur. Sayfadaki diğer H2 etiketleri bu tanımdan etkilenmeyecektir.
ID (KİMLİK) SEÇİCİ
- Daha önce HTML formlarda değindiğim ID , bildiğiniz üzere ingilizcede kimlik anlamına gelen IDENTITY kelimesinin kısaltmasııdır..
- CSS ile sayfadaki ID'li elemanlara özellilkler verebilriiz.
- Ancak ID betimlemelerinin, sayfada tek olması gerektiğinden , eklediğimiz CSS özellikleri sadece o ID'ye sahip olan elemanı etkileyecektir...
- ID seçicilerin başına mutlaka diez ( # ) işareti konulur. (örneğin #ad). Sayfa içerisinde uygulanmak istenen yerde ise id="" parametresi ile belirtilmiş olmalıdır.
#wrapper {
width:70%;
background-color:#933;
height:100px
}
<body>
<div id="wrapper"> #wrapper </div>
</body>
Yukarıda wrapper isimli id''ye sahip elemana CSS özelliği verilmiş. Bu durumda sayfada bu id'ye sahip eleman belirtilen stil özlliklerini alacaktır..
ID İSİMLERİ BELİRLENİRKEN DE CLASS İSİMLERİNDE OLDUĞU GİBİ ÇİZGİ YADA ALT ÇİZGİ KULLANILABİLİR ANCAK TÜRKÇE KARAKTER KULLANILAMAZ!
ETİKETE AİT ID SEÇİCİ
Herhangi bir id'ye sahip bir etikete , diğerlerini etkilememesi gerektiği durumlarda etiket#id tanımı ile CSS özellikleri atanabilir..
h3.red { color : #933; }
Yukarıda sadece "red" class'ı olan H2 etiketine css özelliği verilmiş olur. Sayfadaki diğer H2 etiketleri bu tanımdan etkilenmeyecektir.
GENEL SEÇİCİ
Bir CSS özelliğin sayfada tüm elemanlara uygulanmasını istediğimizde genel seçiciyi kullanabiliriz. Genel seçici YILDIZ (*) işareti ile belirtilir.
* {
margin:0;
padding:0;
}
GRUP SEÇİCİ
Aslında kendi başına bir seçici değildir. Farklı seçicilere aynı CSS özelliklerini verebilmek için kullanılır. Bunun içn seçiciler arasına v,rgül konulur..
h1 , P , .box {
color:#f00;
}
Yukarıda ki CSS tanımına göre sayfadaki hem h1 etiketleri , hem p etiketleri hemde .box class'ı eklenmiş elemanlar belirtilen özelliği alacaklardır : yazı renkleri kırmızı olur... Tüm seçiciler için ugulanabilir.
Görüşmek üzere...
