Anasayfa / CSS / CSS Seçiciler

CSS Seçiciler

Merhaba. Bu yazımda. Css seçiciler konusunu ayrıntılı olarak ele alacağım.

Css de anlattığımız kadarıyla, kullandığımız <style> elementi ile her element için ayrı ayrı stiller tanımlıyorduk. Mesela <p> etiketi için bir stil belirliyorduk ve her <p> etiketi için bu stiller kullanılıyordu. Fakat bazı <p> elementleri için farklı stilleri kullanmak istiyorsak ne yapacağız?

Bunun için seçiciler kullanılmaktadır.2 tür seçici vardır;

1) Id Selector

2) Class Selector

Id selector kullanımında her id,bir sayfada sadece bir kez kullanıldığı için biz daha pratik olması amacıyla Class Selector kavramını anlatacağız.Böylece class’larımızı bir sayfada istediğimiz kadar kullanabileceğiz

CLASS SELECTOR KULLANIMI

Class selector kullanımı şu şekildedir.<head> etiketinin olduğu kısımda classlarımızı tanımlarız,her birine birer isim veririz ve içine, vereceğimiz stillerimizi yazarız

–>Class seçicisi,başına nokta (.) koyularak tanımlanır.Class seçicisine bir örnek vererek , örnek üzerinden açıklayalım;

Burada .deneme1 ve .deneme adlı 2 adet class tanımladık.Bunların başına nokta koyulduğunu unutmayalım…!

Bu sınıflarımız içine {  }  parantezleri arasına istediğimiz stilleri yazdık.Bu classlarımızı <head> etiketinde <style> etiketi arasına yazdığımızı ve <style> etiketini kapatmayı unutmayalım…!

–> Bu hazırladığımız classları hangi element üzerinde kullanmak istiyorsak o elementin <class> özelliğine yazıyoruz.Bu verdiğimiz örnekte biz h4 ve h2 elementleri üzerinde classlarımızı kullandık

Bu satırda class=” ”   ile hangi classımızı kullanacaksak parantezler içine onu yazıyoruz.Biz bunun için deneme1 classını kullandık.Şimdi yukardaki kodumuzun tarayıcıda çıktısını görelim;

css seçiçiler
Selector konusunda daha geniş bir örnek yapalım.Farklı classlar kullanalım ve bunları farklı etiketler için uygulayalım;

Sayfamızın Çıktısını Görelim

css seçiçiler

Burada 2 tane class (sınıf) tanımladık.Rastgele stiller uyguladık.Örneğin arkaplan rengi,çerçeve stili,çerçeve kalınlığı,font büyüklüğü gibi özellikler verdik.Artık bu özelliklerimizi istediğimiz yerde istediğimiz etikete uygulayabiliriz.  Uygulamak istediğimiz etikette   class = ”  “   yapısıyla bu parantez içine ,kullanacağımız sınıfı ekleyerek uygulayabiliriz.

Mehmet Kirazlı

İstanbul Eyüp'te ikamet ediyorum. Giresun Alucra'lıyım. Bilgisayar Mühendisliği bölümünden 2013 yılında mezun oldum. "Yeni Başlayanlar için Java 8" kitabının yazarıyım. Şu anda özel bir firmada Mobil Yazılım Geliştirme Uzmanı olarak çalışıyorum.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.