CSS
Meydan okuma - Başlangıç projesi
Tüm başlangıç konularını birleştiren kişisel bir ana sayfa biçimlendirirsin.
Tüm başlangıç konularını birleştir
Kişisel bir ana sayfa, başlangıç seviyesinin tüm konularını bir arada kullanır. font-family ve color tipografiyi; background-color sayfa tonunu; width, padding ve margin kutu modelini; border-radius ve box-shadow kart görünümünü kurar.
Üst bilgi position: relative ile bir çerçeve, içindeki rozet position: absolute ile köşeye yerleşir. Her bölüm tek bir konuyu öğretir; burada hepsini tek sayfada birleştirip başlangıç finalini tamamlarsın.
Uygulama Ana sayfa iskeletini kur
Bir body seçicisi ekle. margin özelliğini 0, font-family özelliğini sans-serif, color özelliğini #1a1a2e, background özelliğini #f8f9fa yap. Sonra bir .site-header sınıf seçicisi ekle: padding özelliği 2rem, text-align özelliği center, background özelliği #1a1a2e, color özelliği #fff olsun.
Örnek çözümü göster
/* kişisel ana sayfa iskeleti */
body {
margin: 0;
font-family: sans-serif;
color: #1a1a2e;
background: #f8f9fa;
}
.site-header {
padding: 2rem;
text-align: center;
background: #1a1a2e;
color: #fff;
}
Bileşenleri birleştir
İskelet kurulduktan sonra profil kartı ve alt bilgi eklenir. Profil kartı max-width ile genişliği sınırlandırır, margin: 2rem auto ile ortalanır. background: #fff ve box-shadow kartı arka plandan ayırır; border-radius köşeleri yatıştırır.
Alt bilgi text-align: center ile sade bir imza gibi durur. Tek bir sayfada tipografi, kutu, renk ve düzen birlikte çalışınca başlangıç finali tamamlanır.
Uygulama Profil kartı ve alt bilgi ekle
Bir .profile-card sınıf seçicisi ekle. max-width özelliğini 600px, margin özelliğini 2rem auto, padding özelliğini 1.5rem, background özelliğini #fff, border-radius özelliğini 12px, box-shadow özelliğini 0 2px 8px rgba(0, 0, 0, 0.08) yap. Sonra .site-footer sınıf seçicisi ekle: padding özelliği 1rem, text-align özelliği center, color özelliği #6c757d olsun.
Örnek çözümü göster
/* profil kartı ve alt bilgi */
.profile-card {
max-width: 600px;
margin: 2rem auto;
padding: 1.5rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.site-footer {
padding: 1rem;
text-align: center;
color: #6c757d;
}
Kendini test et
-
Kart köşelerini yuvarlak yapmak için hangi özellik kullanılır?
/* ? */
.card {
/* ... */
}
- border-width
- box-shadow
- border-radius
- padding
Cevabı göster
border-radius — Doğru. border-radius köşelerin yuvarlaklık derecesini ayarlar.
-
Üst bilgi için padding değerini tamamla
.site-header {
padding: ____;
text-align: center;
background: #1a1a2e;
color: #fff;
}
Cevabı göster
.site-header {
padding: 2rem;
text-align: center;
background: #1a1a2e;
color: #fff;
}
-
Özelliği kullanımıyla eşleştir
- font-family
- Yazı tipi ailesi seçimi
- box-sizing
- Genişliğe nelerin dahil olduğu
- background-image
- Arka plan görseli
- position
- Yerleşim bağlamı
Sıradaki ders: Başlangıç bölüm sınavı
