Daha önceki yazımda css yapısına kısaca değinmiştik.Okumamış arkadaşlar için CSS YAPISI ve SAYFA İÇİ KULLANIMI okuyabilir.Kaldığımız yerden devam edelim.Seçiciler ana ve ek seçiciler olmak üzere 2 tanedir.İlk olarak ana seçicilerimizden sınıf(class) ve id seçicimizi anlatacağız.
Ana Seçiciler
Sınıf (Class) Seçiciler
Bu seçimimiz en çok kullanacağımız seçicimizden.Tanımlamasında nokta(.) kullanılmaktadır.Biz tanımlayacağımız sınıf ise başına nokta koymamız yeterlidir.Css html içindeki sınıflardan tanımladığımız bulup gereken özellikleri ona kazandıracaktır.Tanımlayacağımız sınıflar büyük ve küçük harfe duyarlıdır bunu da unutmamalıyız.Aynı zamanda html içinde birden fazla sınıf kullanabiliriz.İngilizce dilinde olmayan karakterler kullanılmamalıdır.
Daha önce kullandığımız örnek sayfa yapımızı kullanacağız.Bir paragrafta yazımı olsun.Paragraf rengimiz kırmızı ve farklı bir css ile yazıyı kalın yapalım.Daha sonra bir kendimize 200 piksel genişliğinde kutu tasarımı yapalım.Kutu rengimiz mavi olsun.Piksel(px) bilmiyorsanız CSS Birimleri konusunu okumanızı tavsiye ederim.Kodlarımız;
<html>
<head>
<title> Blog.MustafaSevim.Net.TR Örneği</title>
<style>
p.paragraf{
color: red;
}
.kalınlaS{
font-weight: bold;
}
.kutu{
background: blue;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<p class="paragraf kalınlaS">Burası p elementi kırmızı ve kalın.</p>
</br>
<div class="kutu"></div>
</body>
</html>Öncelikle paragraf adında bir class tanımladık direk paragrafa ait olduğunu gösterek.Aslında bunun böyle olması şart değil sınıf tanımladığımız için hepsinin kendine özgü oldukları için iki tanımlama da doğrudur.Color daha önceden dersten hatırlarsanız yazı rengini gösterdiğini font-weight ise yazı genişliği bold kalın olması gerektiğini göstermektedir.Kutudaki width değeri genişliği height ise yüksekliği göstermektedir.Ekran görüntüsü;
İd Seçiciler
Sınıf seçicilerden farklıdır.Bir tane id atanabilir bir elemente.İd tanımlama yaparken id tanımlamak istediğimiz css kodumuzun kare(#) eklemeyeliz.Örnek vermek gerekirse iki tane paragraf tanımlayalım biri kırmızı ve diğer mavi olsun.Csss kodlarımız;
#mavi{
color: blue;
}
#kirmizi{
color: blue;
}html kodlarımız şöyle olmalıdır.
<p id="#mavi"></p> <p id="#kirmizi"></p>
Ana seçicilerimiz bu kadar gelelim.Ek seçiciler.
Ek(Attribute) Seçiciler
1.Basit Özellik Seçiciler
Basit seçici kullanmayı resim elementinden bir örnek verelim.Sayfamızda birden fazla resim var fakat biz sadece alt etiketi olan resimi etkilemek istiyoruz.Resmimizin ışığını yarıya indirelim.Öncelikle css kodlarımız;
img[alt]{
opacity: 0.5;
filter: alpha(opacity=50); /* Eski Tarayıcılar İçin */
}html kodlarımız;
<img src="css.png" alt="CSS" /> <img src="css.png" />
2.Özellik Değeri Seçicisi
Bir elementin özellik değerini göre seçimi yapar.Yani input olsa text olan farklı değerde olan biz sadece text olan değerli olan etkileşim yapmak istersek bunu kullanacağız.Css kodlarımız;
input[type="text"]{
background: #f5f5f5;
color: #000;
}html kodlarımız;
<p>Kullanıcı adınız : <input type="text" name="kadi" /></p> <p>Şifreniz: <input type="password" name="sifre" /></p
ekran görüntümüz;
3.Kısmi Özellik Değeri Seçicisi
Bu biraz olasılık bir durumdur.Yani ortalama bu değer varsa yada elementin içindeki özellikte ki birden fazla değer vardır.Örnek verelim css kodlarımız;
a[title~="Mustafa"] {
text-decoration:overline;
}html kodlarımız.
<a href="https://mustafasevim.net.tr" title="Mustafa abc">Mustafa SEVİM </a> <a href="https://blog.mustafasevim.net.tr" title="MS Blog seç">MS </a> <a href="https://www.google.com" title="Google ">gooogle </a>
burada title elementinde mustafa olanın üstü çizili olacaktır.
4.Dikkate Değer Özellik Seçicisi
Değerimize tire ek bir şeyler eklenmiş bile olsa onları değerle bir tutarak css özelliklerini yansıtacaktır.Üsteki örneğimiz kullanalım css kodlarımız;
a[title|="Mustafa"] {
text-decoration:overline;
}html kodlarımız;
<a href="https://mustafasevim.net.tr" title="Mustafa">Mustafa SEVİM </a> <a href="https://blog.mustafasevim.net.tr" title="Mustafa-Blog">MS BLOG </a> <a href="https://www.google.com" title="Google ">gooogle </a>
İlk iki linkimizin üstü çizik olacaktır.Ek seçicilerimiz bu kadardı.Başka derslerde görüşmek üzere sorularınızı yorum bölümünden sorabilirsiniz.