- Yazı Stilleri:
- Yazı tipi, rengi, boyutu ve hizalamasını belirlemek için kullanılır.
- Örnek:
.baslik { font-family: Georgia; color: navy; margin: 20px; }
- Arka Plan:
- Arka plan rengi veya resmi ayarlamak için kullanılır.
- Örnek:
background-color: lightblue; background-image: url('resim.jpg');
- Kenarlık (Border):
- Çerçeve oluşturur. Kalınlık, renk ve stil ayarlanabilir.
- Örnek:
border: 3px dashed green; border-radius: 10px;
- Boşluklar:
- Margin (Dış Boşluk): Elemanlar arası mesafe.
Örnek: margin: 20px;
- Padding (İç Boşluk): İçerik ile kenarlık arası mesafe.
Örnek: padding: 15px;
2. HTML Yapısı
- Div Kullanımı:
- Sayfa bölümlerini gruplamak için temel yapı taşıdır.
- Örnek:
<div class="baslik"> <h1>Başlık</h1> </div>
- Flexbox Düzeni:
- Elemanları düzenlemek ve hizalamak için kullanılır.
- Örnek:
display: flex; gap: 10px;
- Menü ve İçerik Bölümü:
- Sayfa tasarımı için dikey ve yatay düzen oluşturulur.
- Örnek:
<div class="menu">Menü</div> <div class="icerik">İçerik</div>
3. Önemli Kavramlar
- Float: Elemanları sağa/sola hizalamak.
- Overflow: İçerik taşma durumlarını kontrol etmek.
- Responsive Tasarım: Sayfa öğelerini ekran boyutlarına uygun hale getirme.
<html >
<head>
<title>Kutu Düzeni</title>
<style>
/* Genel sayfa ayarları */
body {
font-family: Arial, sans-serif; /* Yazı tipi olarak Arial seçildi */
margin: 20px; /* Sayfanın kenarlarından 20px boşluk bırakıldı */
}
/* Kutuların kapsayıcısı */
.kapsayici {
display: flex; /* Kapsayıcıda kutuları yatayda sıralar */
flex-wrap: wrap; /* Ekran genişliği yetmezse kutuları alt satıra geçirir */
gap: 10px; /* Kutular arasında 10px boşluk bırakır */
margin-bottom: 20px; /* Kutular ile altındaki içerik arasında boşluk bırakır */
}
/* Tek bir kutu için stil */
.kutu {
border: 1px solid black; /* Her kutunun siyah çerçevesi */
padding: 10px; /* Kutunun içeriği ile kenarı arasında boşluk bırakır */
text-align: center; /* Kutunun içindeki metni ortalar */
width: 80px; /* Her kutunun genişliği 80px */
height: 40px; /* Her kutunun yüksekliği 40px */
box-sizing: border-box; /* Kenar boşluklarını kutu boyutuna dahil eder */
}
/* Daha sonra gelen içerik için stil */
.sonraki-icerik {
margin-top: 10px; /* Kutular ile içerik arasında boşluk bırakır */
}
</style>
</head>
<body>
<!-- Kutuların bulunduğu ana kapsayıcı -->
<div class="kapsayici">
<div class="kutu">Kutu 1</div> <!-- Birinci kutu -->
<div class="kutu">Kutu 2</div> <!-- İkinci kutu -->
<div class="kutu">Kutu 3</div> <!-- Üçüncü kutu -->
<div class="kutu">Kutu 4</div> <!-- Dördüncü kutu -->
<div class="kutu">Kutu 5</div> <!-- Beşinci kutu -->
<div class="kutu">Kutu 6</div> <!-- Altıncı kutu -->
</div>
<!-- Kutuların altında yer alan içerik -->
<div class="sonraki-icerik">Daha sonra gelen içerik</div>
</body>
</html>