Css Dersleri – Ders 3 Sınıf Seçicisi (Class Selector)


Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

[css]p.sagadaya {
text-align: right
}

p.ortala {
text-align: center
} [/css]

Bu Seçicileri sayfamızda uygulamak için;

[php]<p class=”sagadaya”>Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
<p class=”ortala”>Yukarıdaki bilgiyi dikkatlice okumalısınız</p>[/php]

Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir

HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;

[css].ortala {
text-align: center
}[/css]

Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

[php] <span class=”ortala”> Burada birşeyler yazar </span>
<p class=”ortala”>Burada da başka bişeyler yazar</p> [/php]

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

[php]<p class=”onemli uyari”>Ülkemizde meydana gelen trafik kazalarının yaklaşık % 90’ı insanların hataları sonucu eydana gelmektedir.</p> [/php]

Yukarıdaki örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut.

Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir.

Bunun için kullanıcığımız kod;

[css].onemli {
font-weight: bold;
}
.uyari {
font-style: italic;
}
.onemli.uyari {
background: silver;
}[/css]

Önemli metinler için kalın, uyari için italiktik atmalar yapıyoruz.

Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken

CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.

Id Seçecileri

Id Seçicileri Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken

Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

[css]#mavi{
background:blue;
}

#kirmizi{
background:red;
}[/css]

HTML KODUMUZ;

[php] <p id=”mavi”>Bu yazının arkafon rengi mavi</p>
<p id=”kirmizi”>Bu yazının arkafon rengi kırmızı</p> [/php]

wordle-css

 

Bilişim Sesi

Bilişim Sesi internet sitesini yönetir veya yönettiğini sanır.

Bir Cevap Yazın