Web Programlama – 2 (HTML/CSS)

Tekrardan Merhabalar,

CSS Uygun Stilleri ve bu Stilleri Nasıl Uygulanacağını Belirlemek İçin HTML Dökümanının Yapısını Kullanır.Öncelikle HTML Hiyerarşisini Öğrenmemeiz Gerekiyor;

  • HTML Hiyerarşisi

Seçici(Selector) ve Döküman arasındaki ilişkiyi anlayabilmemiz için, dökümanların nasıl planlandığını tekrar gözden geçirmemiz gerekir. Aşağıdaki basit HTML dökümanı üzerine biraz düşünelim:

<html>
<head>
<title> CSS HTML Hiyerarşisi </title>
</head>
<body>
<h1>CSS<em>HTML Hiyerarşisi </em></h1>
Sitemize hoş geldiniz <em>Merhaba</em>biz <strong>sizler için <a href="konu.html"> bazı <em>önemli</em> konular </a></strong>! hazırladık
<ul>
    <li>Konu Başlıkları :
        <ul>
        <li><strong>Asıl</strong> Giriş</li>
        <li>Önsöz</li>
        <li><em>ilk</em> bölüm:
            <ol>
            <li>Elma</li>
            <li>Armut</li>
            <li>Karpuz</li>
            </ol>
        </li>
        </ul>
    </li>
  <li>...vd.</li>
</ul>
<p>Ayrıntılılı bilgi çin <a href="mailto:bilgi@omersoft.com"> mesaj gönder </a></p>
</body>
</html>

CSS’in güçlü olmasının en büyük nedeni HTML elementleri arasındaki ilişkiden yararlanmasıdır. HTML dökümanları gizli bir hiyararşi ile oluşturulur. Bu hiyerarşi içinde tüm HTML elementleri kendilerine uygun bir yer bulur. Bu ilişkiyi biz soy ağacına benzetebiliriz.

hiyerarsi

 

 

 

 

 

Yukarıdaki HTML yapısını bir soy ağacı gibi düşünüp değerlendirirsek: Bir elementin ebeveyn(anne-baba) olduğunu anlamak için o elementin altında başka element olup olmadığına bakmalıyız, eğer varsa o element ebeveyndir. Yukarıdaki şekilde p elementine dikkat edelim. p bir ebveyndir çünkü altındaem ve strong elementleri bulunmaktadır. strong da bir ebeveyndir ki onun altında a elementi vardır. Bir elementin çocuk element olduğunu anlamak için de üstünde bir elementin olup olmadığına bakarız. Yani yukarıdaki olayın tersi. Buna göre strong elementi p elementinin bir çocuğudur. Daha karmaşık yapılarda ata(ancestor) ve torun(descendant) ilişkisi vardır. Aradaki fark eğer bir element diğer elementin tam olarak bir seviye üstünde ise o ata diğeridetorun durumundadır. Yukarıdaki şekili incelersek ilk ul elementinin iki adet liçocuk elementi bulunmaktadır ve bu iki li elementinin altındaki tüm elementler ilk ul elementinin torun elementleridir.

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s