CSS nasıl çalışır ?
Bir tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ve stil bilgileri birleşir. Bu, iki adımda gerçekleşir:
- Tarayıcı markup (HTML gibi) dilini ve DOM (Document Object Model) içerisindeki CSS’i dönüştürür. DOM bilgisayar hafızasındaki belgeyi temsil eder. Belge içeriği ile stili kombine olur.
- Tarayıcı DOM içeriğini gösterir.
Bir markup dili belge yapısını oluşturmak için elementleri kullanır. Elementler < > arasında belirtilir. Bir çok elementin başlama ve bitiş etiketi vardır. Başlama etiketi için, işaretlerin arasına <elementinadı>, bitiş için </elementinadı> şeklinde kullanılır.Şu şekildedir;
<elementinismi>
Bu elementte kullanacağınız içerik bu ikisi arasında yer almalıdır.
</elementinismi>
Depending on the markup language, some elements have only a start tag, or a single tag where the ‘/’ comes after the element name. An element can also be a container and include other elements between its start tag and end tag. Just remember to always close the tags inside the container.
DOM ağaçsı bir yapıya sahiptir. Markup dili içerisindeki her element, öznitelik ve text, bu ağaçsı yapı içerisinde bir düğüm noktasıdır. Düğümler diğer DOM düğümleri ile ilişki içindedir. Düğümler arasına kalıtsallığa benzeyen bir durum vardır. Kimi element üsttedir (parent), kimi element ise alttadır (sibling). Bir aile ağacı gibi düşünülebilir.
DOM’u anlamak size CSS’te kolaylık sağlar, çünkü DOM, CSS’inizin ve belge içeriğinizin birleştiği yerdedir.
Örnek
Örnek belgenizde, Başlama <p> ve onun bitişi </p> kullanılmak üzerei bir alan (container) yaratır:
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>DOM’da, aşağıda, P’ye karşılık gelen düğüm bir ebeveyndir. Onun çocukları ise STRONG düğümleri ve text düğümleridir.STRONG düğümü ise, örnekte gördüğünüz kırmızı harflerin ebeveynidir. Kırmızı harfler kardeştir.Aşağıda bu yapı gösterilmiştir;
P
├─STRONG
│ └─”C”
├─”ascading”
├─STRONG
│ └─”S”
├─”tyle”
├─STRONG
│ └─”S”
└─”heets”
Bir Önceki – Sonraki Ders
