Project Zeta – CSS3 4 HTML Hiyerarşisi & CSS3 Seçicileri


0

Merhaba.

CSS3 Eğitimlerimizin 4. sü ile beraberiz.

Bugün sizlere CSS3 Seçicilerinden bahsedeceğim. Bundan bahsederken birazda HTML de var olan hiyerarşiye de biraz değinmiş olacağım.

Descandant Selectors ( Torun Seçicileri)

Biliyorsunuz HTML de etiketler içinde etiketler yazabildiğimiz bir yapı var. Bu da bir tür hiyerarşinin oluşmasını sağlamıştır. 

Örneğimizle işe bakarsak anlaması kolaylaşacak. 

Bir H1 etiketiyle başlık oluşturup buna em etikeyi ile italic özelliği verelim.

Burada farkına varmanız gereken en önemli şey torun seçici olarak yazdığınız CSS hangi etiket hiyerarşisine göre yazılmışsa sadece oraya etki edecektir.

İki tane h1 etiketi ile yazılmış içerik var ama CSS sadece h1 içinde em etiketi olan içeriğe etki etti. 

Şu kod için kısaca şöyle bir açıklama yapabiliriz. Atası h1 olan tüm em etiketleri için var olan özellikler uygulansın demektir.

Daha güçlü bir örneğine bakalım.

Daha güçlü bir örneğimizle devam edelim şimdi. Normalde HTML ile yapmanın çok olasılıklı olmadığı bir durumu ele alacağız. Bir tablo oluşturacağız Bir tane alanın arka planı sarı bir tanesi kırmızı olacak ve içerisinde link verdiğimiz bir içerik olacak. Bu içerik renkleri de farklı farklı olacak.

Yapalım.

Child Selectors (Çocuk Seçicileri)

Bazen öyle durumlar olur ki tanımladığımız bir torun element başka bir ataya sahip olabilir. Biz onun değil sadece o torun elemente ait özellikleri değiştirirsek biraz daha derine inip özelleştirilmiş bir seçici kullanmamız gerekecektir. O da çocuk elemen seçicimizdir.

Hemen örnekle görelim. 

Gördüğümüz gibi h1 direkt olarak sadece ilk strong elementinin ebeveyni olduğu için stil sadece ilk satıra etkidi. Alt satırdaki strong elementinin ebeveyni em olduğu için em>strong tanımlamasıyla stil özellikleri yazılmalıydı.

Bitişik Seçiciler

Bitişik Kardeş Seçicileri birbiri ardına gelen aynı seviyedeki elementlerden sonra gelenine stil tanımlamak için kullanılır. Tam olarak “Bir Ufak Kardeş Seçicisi” olmalıdır. Bir örnek verelim bir başlığımız var ve sonrasında ard arda paragraflar geliyor. Biz başlık ile hemen ardından gelen paragrafın arasına mesafe koymak için bu seçiciyi kullanabiliriz.

Bitişik kardeş seçiciler için 

h1+h1{

}

Genel Seçiciler

Bir HTML dosyası içinde bir özelliği tüm elementlere uygulamak isteyebiliriz. Bunun içinde bir genel element seçici oluşturulmuş. * işaretiyle gösterilir.

Bugünkü yazımda bu kadardı. Element seçicileri tanımış olduk. Bir sonraki yazımda görüşmek üzere.


Like it? Share with your friends!

0
muratbilginer

0 Comments

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