How CSS works

Go to Previous Section:
Why use CSS?This third section of the CSS Getting Started tutorial explains how CSS works in your browser and the purpose of the Document Object Model (DOM). You'll also learn how to analyze your sample document.

Bilgi: 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"

Çalışma: DOM'u incelemek

DOM denetçisi

DOM'u incelemek için, özel bir yazılıma ihtiyacınız var. Mozilla'nın DOM Inspector (DOMi) eklentisini kullanabilirsiniz. Eklenti ufak bir kurulum gerektirir. Aşağıda detaylıdır;

Örnek belgenizi Mozilla tarayıcısını kullanarak açın.
Tarayıcınızın menü kısmından, Araçlar > DOM Denetçisi, ya da Araçlar > Web Geliştirme > DOM Denetçisi.

Daha fazla detay

Mozilla'nızda DOMi yoksa eklentiler sitesinden yükleyin ve bu öğreticiye geri dönün.

DOMi yüklemek istemiyorsanız veya Mozilla'dan farklı bir tarayıcı kullanıyorsanız..............
In DOMi, expand your document's nodes by clicking on their arrows.
Note: Spacing in your HTML file may cause DOMi to show some empty text nodes, which you can ignore.

Part of the result might look like this, depending on which nodes you have expanded:
```
│ ▼╴P
│ │ │ ▼╴STRONG
│ │ └#text
│ ├╴#text
│ ►╴STRONG
│ │
```
When you select any node, you can use DOMi's right-hand pane to find out more about it. For example, when you select a text node, DOMi shows you the text in the right-hand pane.

When you select an element node, DOMi analyzes it and provides a huge amount of information in its right-hand pane. Style information is just part of the information it provides.

Challenge

In DOMi, click on a STRONG node.

Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution

See a solution for the challenge.

Using Web X-Ray Goggles

Web X-Ray Goggles shows less information than DOM Inspector, but is simpler to install and use.

Go to the home page for Web X-Ray Goggles.
Drag the bookmarklet link in that page to your browser toolbar.
Open your sample HTML document.
Activate Web X-Ray Goggles by clicking the bookmarklet on the toolbar.
Move your mouse pointer around over your document to see the elements in the document.

Sonra?

Go to Next Section:
Cascading & InheritanceIf you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The next page explains more about these interactions.