Css Seçiciler

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;

Ö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;

html kodlarımız şöyle olmalıdır.

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;

html kodlarımız;

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;

html kodlarımız;

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;

html kodlarımız.

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;

html kodlarımız;

İ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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Free Web Hosting