Css Yapısı ve Sayfa İçi Kullanma

Daha önceki yazımızda sayfamıza nasıl ekleyeceğimizi anlatmıştık.Unutanlar ve okumayanlar için Css ile Çalışma okumalarını tavsiye ederiz.Şimdi css yapısı ve kullanımını daha uzun anlatacağız.Öncelikle bizim kalıcı olan elementlerimiz var.Yani html(xhtml) sayfamızın özel isimlendirdiği genel olarak atanmış kavramlar var.Normalde bunlar html her sayfada yaptığı standart sıralama olan  <body> tagları dahil  içinde bulunur.Bunlar

  • body
  • Başlık(head) tagları(h1,h2,h3,h4,h5,h6, ….)
  • listeleme(ol,ul,li)
  • linkleme(a)
  • Paragraf(p)
  • Metin(pre)
  • Yazı (span)
  • Buton(Button)
  • resim(img)
  • Alıntı Kutusu(blockquote)
  • Kısaltma(abbr)
  • Adres(address)
  • İş tanımı (cite)
  • Genel tanımlama(div)

Unuttuğum olabilir genel olarak en çok kullanılanlar bunlardır.Bunların kullanımları böyle olması gerekir;

bunu css yazdığımız alana eklediğimizde sayfamızın içindeki bütün span kodlarını yazı rengi kırmızı olacaktır.Peki html sayfası içinde birbiri içindeki elementleri nasıl seçeceğimiz yada ona nasıl etkileyeceğimiz sorusu cevabı alttaki başlıktadır.

Css Elementlerinde Alt Elementleri Etkileme

Aslında alt elementleri etkilemeden kastımız iç içe elementler olduğunda nasıl ona özgü css kodlarını yazmaktır.Örnek bir gruplama gerektiren html kodlarımız olsun;

Şimdi burada gördüğümüz gibi iki tane p elementi yazılmış biri div elementi içinde diğeri dışarıda gördüğünüz gibi şimdi içteki yazı rengini kırmızı yapalım.İki yolu var ve iki yolda doğru kullanılabilir.

html içinde css kullanırsak elimizde sayfa örneğimiz ve çıktısı;

Aklınıza şöyle şu iki soru gelebilir iç içe kaç tane en fazla olabilir?  bir kısıtlama var mı ?

Bir kısıtlama yoktur.Siz ne kadar yazarsanız o kadar olur.Fakat temiz kodlama ve iş yükünü fazla olacağı nedeniyle 5 ten fazla olmaması önerilir.İş yükünden bahsetmişken bazen iki farklı elemente aynı özelliği vermemiz gerekir fakat ikisine ayrı css kodlarını yazmaktansa bizi gruplama yöntemi kurtarır.

CSS Elementleri Gruplama

Bir önceki başlığımızdaki örneği kullanalım.Orada sadece div elementi içindeki p elementini yazı rengini kırmızı yapmıştık.Şimdi aynı örneği kullanarak  p elementini ve dışardaki span elementinin rengini mavi yapalım.

Kodumuzu bu hale getirdik şimdi p, span elementin içindeki gruplama da kullanarak metni mavi yapacak css kodunu yazalım.

Gördüğünüz  gibi elementler arasına virgül kullanarak gruplama yapabiliyoruz.Şimdi css ile html kodlarını birleştirip çıktısına bakalım;

Gruplamada bir sınır yoktur.Yani istediğiniz kadar element gruplayabilirsiniz. Bu konunda sonuna geldik hala öğrenmeye aç arkadaşlarımız için CSS Seçiciler inceleyebilir.Konularla ilgili sorularını 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