Css Seçiciler

Bu yazımda Css’in en önemli konularından seçiciler konusunu öğreneceğiz. Çünkü html etiketleri üzerinde Css kodlarını uygulayabilmek için öncelikle o etiketi seçmemiz gerekiyor. Şu şekilde Html etiketlerimiz olsun.

Gördüğünüz gibi bazı etiketlere id, bazılarına class değerleri verdim. Şimdi de sırasıyla tüm seçicileri uygulayarak öğrenelim.

 1  Etiketlerin adına göre seçim yapabiliriz.

Örneğin tüm p etiketlerinin rengini kırmızı yapalım.

css-dersleri-seciciler-1

 2  Etiketlerin id’sine göre seçim yapabiliriz. Bunu html sayfasındaki tek bir etikete stil vermek istediğimiz durumlarda kullanıyoruz. Burda dikkat etmemiz gereken konu html sayfasındaki her bir etikete bir id verebiliriz ve aynı id değerini birden fazla etiket için kullanamayız. id değerine ulaşmak için “#” işaretini kullanırız.

Örneğin id’si prf1 olan etiketin rengini kırmızı yapalım.

css-dersleri-seciciler-2

 3  Etiketlerin class’ına göre seçim yapabiliriz. Bunu html sayfasındaki bir veya birden fazla etikete aynı anda stil vermek istediğimiz durumlarda kullanabiliriz. Bir sayfada aynı class değerinden birden fazla olabilir.class değerine ulaşmak için “.” (Nokta) işaretini kullanırız.

Örneğin class’ı paraf1 olan etiketlerin rengini kırmızı yapalım.

css-dersleri-seciciler-3

 4:5  Burda dikkat etmeniz gereken yer, etiket ile class veya id arasında boşluk yok. Bitişik yazılırlar.

css-dersleri-seciciler-4

 6:7  Burda dikkat etmeniz gereken yer, etiket ile class veya id arasında boşluk var. Ayrı yazılırlar.

css-dersleri-seciciler-5

 8  Burda dikkat etmeniz gereken yer, id’si box1 olan etiketin tüm çocuk ve torun p etiketlerini seçiyoruz.

css-dersleri-seciciler-6

 9  Burda dikkat etmeniz gereken yer, id’si box1 olan etiketin çocuk etiketlerinden p etiketlerini seçiyoruz. Yani torun p etiketleri şeçilmez.

css-dersleri-seciciler-7

 10  Burda dikkat etmeniz gereken yer, id’si box1 olan etiketten sonra gelen kardeş etikete bakıyoruz. Yani öncesindeki kardeş p etiketini seçmez. Birde sonrasında birden fazla kardeş p etiketi varsa bile sadece ilk kardeş p etiketi seçilir.

css-dersleri-seciciler-8

 11  Burda dikkat etmeniz gereken yer, id’si box1 olan etiketten sonra gelen kardeş etiketlere bakıyoruz. Yani öncesindeki kardeş p etiketlerini seçmez.

css-dersleri-seciciler-9

 12  Gruplayarak stil vermek istediğimizde, aralarına virgül koyarak yazabiliriz.

css-dersleri-seciciler-10

 13  Herhangi bir kriter belirlemeden tüm etiketleri seçmek için * işareti kullanılır.

css-dersleri-seciciler-11

 Dikkat  Bundan sonraki kısımlarda farklı html kodları üzerinden devam ediyoruz.

 14:15  Burda dikkat etmeniz gereken yer, içerik kısmını content özelliği ile veriyoruz ve eklenen içerikler p etiketinin sınırları içerisine ekleniyor.

Örneğin sonuna ekleme yapılırken, p etiketi bittikten sonra yeni satıra ekleme yapılmaz. p etiketi bitmeden, içeriğinin sonuna ekleme yapılır.

css-dersleri-seciciler-12-1

css-dersleri-seciciler-12-2

 16:17  Etiketlerin disabled attribute’unun varsayılan değerleri enabled’dır.

css-dersleri-seciciler-13

 18   

css-dersleri-seciciler-14

 19:20  

css-dersleri-seciciler-15

 21:24  

css-dersleri-seciciler-16

css-dersleri-seciciler-16-1

css-dersleri-seciciler-16-2

 25  

css-dersleri-seciciler-17

 26  

css-dersleri-seciciler-18

 27:28  

css-dersleri-seciciler-19

 29:30  

css-dersleri-seciciler-20

 31 

 32  

css-dersleri-seciciler-22

 33:39  Attribute seçiciler için şu html kodlarını kullanalım.

Css kodlarımızda şu şekilde

css-dersleri-seciciler-23

 40:46  

 47:50  

 51  

Son olarak şunu da belirtelim. Yazdığımız css kodları uygulanırken bazı öncelik durumları vardır.

Css kodlarının uygulanmasındaki öncelik şu şekildedir;

      ► id seçicisi

      ► class seçicisi

      ► etiket seçicisi

Yani bir etikete önce class değerine göre css kodu yazdığımızı varsayalım. Sonra da etiketine göre seçip css kodu yazalım. Normalde etikete göre seçip yazdığımız kodların etkin olmasını bekleriz ama öyle olmayacaktır. Çünkü class seçicisi, etiket seçicisini bastıracaktır.

Kodlar ve ekran görüntüsü şu şekilde;

css-seciciler

Bu konunun daha iyi anlaşılabilmesi için bol bol pratik yapmalısınız. Bir Html sayfası oluşturup, seçiciler yardımıyla Css kodlarını uygulayarak değişimleri gözlemlerseniz çok daha hızlı ve kalıcı bir şekilde öğrenmiş olursunuz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply