Bağlama ve iskelet

CSS dosyasını HTML'e bağlar ve temel iskeleti kurarsın.

Bağlama ve iskelet

Stil sayfanı HTML'e bağlamak için <link rel="stylesheet" href="stil.css"> ögesini HTML'in <head> bölümüne koyarsın. Bu, dış stil sayfası (external CSS) yöntemidir; HTML yapısı ile biçimlendirme birbirinden ayrı kalır.

Bu derste aynı zamanda ilk CSS bölümünü yazacaksın: body tür seçicisi. Tür seçicisi, öge adıyla eşleşir; body seçicisi sayfanın tüm gövdesini yakalar. Tarayıcının varsayılan kenar boşluğunu sıfırlamak için margin: 0 değerini vermek yaygın bir başlangıçtır.

Tür seçici ve bildirim bloğu

Bir CSS bölümü iki bölümden oluşur: seçici ve bildirim bloğu. body bir tür seçicidir; HTML etiketinin adıyla eşleşir. Bildirim bloğu süslü parantezler { } içindedir ve her satır özellik: değer; çiftinden oluşur.

Örnek: body { margin: 0; }. Burada margin özellik, 0 ise değerdir. Noktalı virgül her bildirimi kapatır; bunu unutmamak önemlidir.

Neden margin: 0?

Tarayıcılar body ögesine varsayılan olarak küçük bir kenar boşluğu ekler; bu yüzden içerik tarayıcı kenarına yapışmaz. Ama modern tasarımda genellikle bu varsayılanı sıfırlamak istersin; kenar boşluklarını kendi bölümlerinla yönetmek daha denetimlidir.

body { margin: 0; } yazmak bu varsayılanı kaldırır. Bundan sonra içeriği kendi padding ve margin değerlerinle istediğin gibi boşluklandırabilirsin.

Uygulama Body bölümünü ekle

Önceki dersin başlık yorumunu içeren dosyayı al. Altına bir body tür seçici bölümü ekle ve içine margin: 0 bildirimi yaz. Bildirimin sonunda noktalı virgül olsun.

Örnek çözümü göster

/* Kişisel Site stil sayfası */

body {
  margin: 0;
}

Kendini test et

Dış stil sayfasını bağlayan <link> ögesi HTML'in neresine konur?
```
<link rel="stylesheet" href="stil.css">
```
- <body> sonunda, kapanıştan hemen önce
- <head> bölümü içinde
- <html> etiketinden önce, en üstte
- Her <p> paragrafının içinde
Cevabı göster

<head> bölümü içinde — Doğru. <link> ögesi <head> içinde olur; biçimlendirme sayfa yüklenirken hazır olur.
Body tür seçicisini tamamla
```
____ {
  margin: 0;
}
```
Cevabı göster
```
body {
  margin: 0;
}
```
CSS terimlerini anlamlarıyla eşleştir

seçici

stillendirilecek öge
bildirim

özellik: değer çifti
özellik

ayarın adı (margin)
değer

ayarın içeriği (0)

Sıradaki ders: Renk ve yazı tipi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler