---
title: 'Biçem Dosyasının Bağlanması'
source: 'https://academia.sh/tr/kurslar/css-temelleri/bicem-dosyasinin-baglanmasi'
course: 'CSS ile Görsel Sunum'
language: tr
updated: '2026-08-17T18:09:17+00:00'
license: 'CC BY-SA 4.0'
---
# Biçem Dosyasının Bağlanması
Bir biçem kümesinin belgeye satır içi, iç ve dış olmak üzere üç yolla bağlanması; bu üç yolun istek sayısı, yeniden kullanım ve çakışma çözümü bakımından farkları.
Önceki ders bir kuralın seçici ve bildirim bloğundan oluştuğunu kurdu ve istasyon
sayfasının ilk üç kuralını yazdı. Kurallar bir yerde durmalıdır ve durdukları yer, hem
bakım maliyetini hem de sayfanın ilk çiziminin ne zaman başlayacağını belirler.
Bu ders üç bağlama yolunu tanımlar, aralarındaki farkları ölçülebilir bir örnekle
gösterir ve Web'in Temelleri ve HTML kursundaki kaynak yükleme sırası dersinde kurulan
engelleme davranışını biçem tarafından yeniden ele alır.
## Üç Yol
**Satır içi biçem (inline style)** ögenin `style` özniteliğine yazılır. Seçici yoktur:
bildirimler doğrudan o tek ögeye bağlanır.
```html
Kuzey Yamaç Ölçüm İstasyonu
```
**İç biçem (internal style sheet)** belgenin baş bölümündeki bir `style` ögesinin içine
yazılır. Kurallar tam biçimlidir; seçiciler yalnızca o belgeye bakar.
```html
Kuzey Yamaç Ölçüm İstasyonu
```
**Dış biçem (external style sheet)** ayrı bir `.css` dosyasıdır ve belgeye `link` ögesiyle
bağlanır. `rel="stylesheet"` bağlantının türünü bildirir; `href` kaynağın adresini verir.
```html
```
Dördüncü bir yol daha vardır: bir biçem dosyasının içinden `@import url("…")` yazarak
başka bir dosya çağırmak. Bu yazım işler ama bir sıralılık getirir: içeri alınan dosyanın
adresi, onu çağıran dosya indirilip ayrıştırılmadan bilinemez. Bu yüzden `@import`
zinciri, aynı sayıda `link` ögesinden daha geç tamamlanır.
## Dış Biçem Ayrı Bir Kaynaktır
Dış biçem dosyasının belgeden ayrı bir kaynak olduğu ölçülebilir. Aşağıdaki sunucu iki
adresi ayrı ayrı sunar ve aldığı her isteği kütüğe yazar.
```js
// bicem-sunucu.mjs — iki kaynagi ayri ayri sunar ve istekleri kutuge yazar
import { createServer } from "node:http";
const belge = `
Kuzey Yamac Olcum Istasyonu
Kuzey Yamac Olcum Istasyonu
`;
const bicem = `body { font-family: system-ui; line-height: 1.5 }
h1 { color: #143a52 }
`;
const sunucu = createServer((istek, yanit) => {
console.log(`istek: ${istek.method} ${istek.url}`);
if (istek.url === "/istasyon.css") {
yanit.writeHead(200, { "content-type": "text/css; charset=utf-8" });
yanit.end(bicem);
} else {
yanit.writeHead(200, { "content-type": "text/html; charset=utf-8" });
yanit.end(belge);
}
});
sunucu.listen(8123, "127.0.0.1", () => {
console.log("dinliyor: 127.0.0.1:8123");
});
```
Sunucu arka planda çalıştırılıp iki adres ayrı ayrı istenir:
```sh
node bicem-sunucu.mjs > sunucu.log 2>&1 &
sleep 1
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" http://127.0.0.1:8123/
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" http://127.0.0.1:8123/istasyon.css
cat sunucu.log
```
```
200 text/html; charset=utf-8
200 text/css; charset=utf-8
dinliyor: 127.0.0.1:8123
istek: GET /
istek: GET /istasyon.css
```
Kütükteki iki satır, dış biçem dosyasının belgeyle birlikte gelmediğini gösterir: ikinci
bir istek yapılır. Bunun üç sonucu vardır.
Birincisi, dosya **yeniden kullanılabilir**. On sayfa aynı `istasyon.css` dosyasına
bağlanırsa dosya bir kez indirilir; sonraki sayfalarda önbellekten okunur. İnternet Nasıl
Çalışır kursunda tanımlanan koşullu istek ve yaşam süresi kavramları burada işler.
İkincisi, dosya **belgeden bağımsız değişebilir**. Belgenin baytları değişmeden biçem
güncellenebilir; tersi de doğrudur.
Üçüncüsü, ikinci istek bir **maliyettir**. Belge ayrıştırılırken bulunan `link` ögesi yeni
bir bağlantı gerektirebilir ve bu, ilk çizimin başlamasını geciktirir.
## Çizim, Biçem Çözülmeden Başlamaz
Web'in Temelleri ve HTML kursundaki kaynak yükleme sırası dersinde betiklerin
ayrıştırmayı engellemesi anlatılmıştı. Biçem dosyası ayrıştırmayı engellemez — belge
ağacı kurulmaya devam eder — ama **çizimi** engeller.
Gerekçe, engellememenin sonucuna bakılınca görülür. Biçem çözülmeden çizim yapılsaydı,
sayfa önce varsayılan biçemle çizilir, dosya geldiğinde yeniden çizilirdi. Kullanıcı iki
farklı sayfa görürdü. Bu yüzden tanımlı davranış, biçem çözülene kadar beklemektir.
Bu kural üç pratik sonuç doğurur:
- Biçem dosyası belgenin **baş bölümünde** bağlanır. Gövdenin sonuna konursa çizim yine
bekler, ama bekleme daha geç başlar; toplam süre uzar.
- Dosya **küçük tutulur**; bir sayfada kullanılmayan kurallar o sayfanın çizimini geciktirir.
- Bir bağlantı yalnızca belirli bir ortamda gerekiyorsa `media` özniteliğiyle koşullanır.
Koşulu sağlamayan bir bağlantının dosyası yine indirilir, ancak çizimi engellemez:
```html
```
İkinci dosya yazdırma çıktısı için yazılmış kuralları taşır; ekran çiziminin başlamasını
beklemez.
## Üç Yolun Karşılaştırması
| Ölçüt | Satır içi | İç | Dış |
|---|---|---|---|
| Seçici yazılabilir mi | Hayır | Evet | Evet |
| Birden çok belgede kullanım | Hayır | Hayır | Evet |
| Ayrı istek | Hayır | Hayır | Evet |
| Önbelleğe alınabilir | Belgeyle birlikte | Belgeyle birlikte | Bağımsız |
| Çakışmada önceliği | En yüksek | Kaynak sırasına göre | Kaynak sırasına göre |
| Sözde sınıf yazılabilir mi | Hayır | Evet | Evet |
Tablodaki iki satır ayrıca açıklama ister.
**Satır içi biçemde seçici yoktur**, dolayısıyla sözde sınıf da yazılamaz. Bir ögenin üzerine
gelindiğinde ya da odaklandığında değişecek bir bildirim `style` özniteliğine yazılamaz;
bunun için bir kural gerekir.
**Satır içi biçemin önceliği en yüksektir.** Bir sonraki bölümlerde göreceğimiz özgüllük
hesabı satır içi bildirimleri kapsamaz; onlar hesabın dışında, daha üstte durur. Bu, satır
içi bir bildirimi bir kuralla bastırmayı olağan yollarla imkânsız kılar. Sonuç şudur: satır
içi biçem, bakımı en pahalı yoldur ve yalnızca değeri belge üretilirken hesaplanan
durumlarda gerekçelendirilebilir.
## Göreli Adresler Dosyanın Kendisine Göre Çözülür
Dış biçem dosyasının ayrı bir kaynak olmasının sık gözden kaçan bir sonucu vardır: o
dosyanın içindeki göreli adresler, belgeye göre değil **biçem dosyasının kendi adresine**
göre çözülür.
Belge `/urunler/istasyon.html` adresinde, biçem dosyası `/bicem/istasyon.css` adresinde
olsun. Biçem dosyasında `background-image: url("desen.png")` yazılırsa istenecek adres
`/bicem/desen.png` olur — `/urunler/desen.png` değil. Aynı yazım belgenin `style`
özniteliğinde geçseydi belgeye göre çözülür ve `/urunler/desen.png` istenirdi.
Ayrım, bir biçem dosyasını yeniden kullanılabilir kılan şeyin ta kendisidir: dosya, kendi
komşusundaki varlıklara sabit bir yoldan başvurur ve hangi belgeden çağrıldığından
etkilenmez. Görsel dosyalarını biçem dosyasının yanında tutmak bu yüzden bir düzen
tercihinden fazlasıdır.
## İstasyon Sayfasının Bağlanması
Kursun ekseninde tek bir dış dosya kullanılır. Belgenin baş bölümü şu hâle gelir:
```html
Kuzey Yamaç Ölçüm İstasyonu
```
`istasyon.css` dosyası önceki dersteki üç kuralla başlar ve kurs boyunca büyür. Belgeye
tek bir noktadan bağlanması, sonraki derslerde bir kuralı değiştirmenin belgeye
dokunmadan yapılabilmesi anlamına gelir — yapı ve sunum ayrımının dosya düzeyindeki
karşılığı budur.
## Özet
- Bir biçem kümesi belgeye üç yolla bağlanır: ögenin `style` özniteliği (satır içi), baş
bölümündeki `style` ögesi (iç) ve `link` ögesiyle çağrılan ayrı dosya (dış).
- Dış biçem dosyası ayrı bir HTTP isteğidir; bağımsız önbelleğe alınabilir ve birden çok
belgede yeniden kullanılabilir, ama bir istek maliyeti getirir.
- Biçem dosyası ayrıştırmayı engellemez, çizimi engeller; bu, sayfanın iki kez farklı
görünmesini önlemek için tanımlanmış bir davranıştır.
- `media` özniteliğiyle koşullanan bir bağlantının dosyası indirilir ama koşul sağlanmıyorsa
çizimi engellemez.
- Satır içi biçemde seçici yoktur, dolayısıyla durum biçemi yazılamaz; ayrıca önceliği
özgüllük hesabının üstünde olduğu için bastırılması güçtür.
## Sonraki Adım
Kurallar artık belgeye ulaşıyor, ama hangi ögelere ulaştıkları henüz tek bir örnekle
sınırlı. `h1` yazmak bütün birinci düzey başlıkları seçer; peki yalnızca ölçüm
çizelgesindeki eksik değerleri seçmek gerekirse? Sonraki ders seçicinin dört temel türünü
tanımlar — tür, sınıf, kimlik ve evrensel seçici — ve her birinin belge ağacında hangi
kümeyi döndürdüğünü çalıştırılabilir bir eşleyiciyle ölçer.