CSS 3

Ders-1 CSS3 Sözdizimi ve Seçiciler (Syntax and Selectors)

Merhaba arkadaşlar. Bu yazımda size Css3 sözdizimi(syntax) kurallarını anlatacağım. Bir Html öğesine stil tanımlamak için Css kullanıyorduk bunu biliyorsunuzdur. Bu bölüm biraz uzun bunu önceden belirteyim 🙂 Css seçici kullanımı şu şekildedir.

ElementAdı{ özellik:değer }

İlk önce sizlere Css seçicilerinden bahsetmek istiyorum. Html sayfalarında nesneleri seçmek için birçok seçici bulunmaktadır. Bunları birer örnekle size açıklamak istiyorum.

Element Seçiciler (Eleman Selector)

Element seçici Html elementlerini seçmek için kullanılır. Ve Html’de kullandığımız tüm elementlere element seçici yardımıyla ulaşıp stil tanımlayabiliriz.

Çıktısı :

Kimlik (id) Seçicisi

Bu seçici türünde belli bir öğeyi seçmek için id özniteliği tanımlanmış bir element seçilir. İd özniteliği sayesinde bir Html elementine benzersiz bir özellik tanımlayabiliriz. Mesela bir elemente id özniteliği olarak teknosfer tanımlarsak sayfa içinde başka bir elemente teknosfer id’sini veremeyiz.Css ile id seçmek için # işaretini kullanırız. Bir örnekle de bunu açılayalım

Çıktısı :

Sınıf Seçiciler (Class Selector)

En çok kullanılan seçici türü class selector’dür. Bir class ismi html’de istenilen elemente verilir ve birden fazla element için aynı class ismini kullanabiliriz. Css’te Html ile class tanımlanmış bir elemente ulaşmak için “.” (nokta) işareti kullanılır. Şimdi bunu bir örnekle açıklayalım.

Yukarıda Css içine yazdığımız border özelliğini henüz anlatmadım .Onu bilmiyorum diye dert etmeyin 🙂 .Çıktısı :

Seçicileri Gruplama (Grouping Selectors)

Eğer birden fazla elemente veya değere aynı stil tanımlamaları yapacaksak onu gruplayarak yazmak hem daha kısa kod yazmamızı hem de makine tarafından daha hızlı okunmasına fayda sağlayacaktır.

Yukardaki örneği daha kısa yazmayı göstereceğim şimdi size :

Gördüğünüz gibi ne kadar kısa yazdık.

Torun Seçiciler (Descendant Selector)

Belirtilen bir elementin altındaki tüm elementleri seçmek için kullanılır. Ana element boşluk alt element şeklinde yazılır.

Çıktısı :

Çocuk Seçiciler (Child Selector)

Belirtilen bir elementin alt seviyesinde bulunan tüm elementleri seçmek için kullanılan seçici türüdür. Bir örnekle bunu açıklayacağım ve torun seçici ile arasındaki farkı da anlayacaksınız. İki seçici arasında “>” işareti kullanılır

Çıktısı :

Eğer torun seçici olsaydı 3. elemete de stil tanımlaması yapacaktı. Umarım farkı anlamışsınızdır 🙂

Komşu Seçici (adjacent sibling selector)

Kendinden hemen sonra gelen ilk elementi seçmek için kullanılır. Seçiciler arasında “+ ” işareti kullanılır.

Çıktısı :

Kardeş Seçiciler (General sibling selector)

Kendinden sonra gelen tüm elementleri seçmek için kullanılır. Seçiciler arası “~” işareti kullanılır.

Çıktısı :

1 Yorum

1 Yorum

  1. Ramazan Şerif

    25 Şubat 2019 en 20:04

    Çok faydalı emeğe saygı

Cevap bırakın

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

En üste