Yükleniyor...

Evrensel Seçici

Evrensel Seçici (*) CSS’teki en temel ve aynı zamanda en güçlü seçicilerden biridir. Bu seçici, sayfadaki tüm HTML elemanlarını aynı anda hedef alır. Önemi, bir web projesinde tutarlı ve temiz bir başlangıç noktası sağlamasıdır. Tıpkı bir ev inşa ederken önce tüm odaların duvarlarını düzeltmek gibi, Evrensel Seçici de stil vermeye başlamadan önce sayfanın tüm elemanlarını hizalar ve düzenler.
Kişisel web siteleri, bloglar, e-ticaret siteleri ve haber portalları gibi projelerde Evrensel Seçici; varsayılan tarayıcı boşluklarını sıfırlamak, tipografi için ortak bir temel oluşturmak ve kutulama modelini (box model) yönetmek için kullanılır. Örneğin, bir blog yazısında paragrafların tarayıcıya göre değişen boşluklarını sıfırlayarak tasarımı kontrol altına alabilirsiniz. Bir e-ticaret sitesinde ise tüm ürün kartlarının aynı hizadan başlamasını sağlar.
Bu eğitimde şunları öğreneceksiniz:

  • Evrensel Seçici’nin doğru ve verimli kullanımı
  • Hangi durumlarda global stil sıfırlaması için ideal olduğu
  • Performans ve bakım açısından dikkat edilmesi gereken noktalar
    Tıpkı bir mektup yazmadan önce kağıdı hizalamak veya bir odayı dekore etmeden önce temizlemek gibi, Evrensel Seçici de sayfanızı daha düzenli ve öngörülebilir hale getirir.

Temel Örnek

css
CSS Code 
/* Reset default browser styles using Universal Selector */

* {
margin: 0;              /* Remove default margin */
padding: 0;             /* Remove default padding */
box-sizing: border-box; /* Include border and padding in element size */
}

Bu örnekte Evrensel Seçici’nin temel kullanımını görüyoruz. Şimdi her satırı inceleyelim:

  1. *: Evrensel Seçici, sayfadaki tüm HTML elemanlarını hedefler. html, body, div, p, ul ve img gibi tüm etiketleri etkiler. Bu, tasarımın her köşesini tutarlı hale getirmek için güçlü bir başlangıçtır.
  2. margin: 0;: Tarayıcılar, başlık (h1) ve paragraf (p) gibi elemanlara varsayılan boşluklar uygular. Bu satır ile bu boşluklar sıfırlanır. Özellikle haber sitelerinde veya blog sayfalarında metin bloklarının yan yana düzgün görünmesini sağlar.
  3. padding: 0;: Benzer şekilde, liste (ul, ol) gibi öğelerde bulunan varsayılan iç boşluklar kaldırılır. Bu durum, navigasyon menüleri veya e-ticaret ürün listeleri tasarlarken önemlidir.
  4. box-sizing: border-box;: Gelişmiş bir CSS özelliği olup, padding ve border’ı elemanın toplam boyutuna dahil eder. Böylece, responsive (duyarlı) tasarımda taşmalar ve hizalama sorunları azalır.
    Yeni başlayanlar genelde “Tüm elemanlara stil vermek performansı etkiler mi?” diye sorar. Eğer Evrensel Seçici yalnızca reset ve temel stil için kullanılırsa performans sorunu oluşturmaz. Ancak ağır gölgeler, animasyonlar veya filtreler eklerseniz sayfanız yavaşlayabilir.

Pratik Örnek

css
CSS Code 
/* Practical use in a personal website or blog */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif; /* Global font for consistency */
}

body {
background-color: #f5f5f5;
}

.card {
background-color: white;
margin: 20px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

En İyi Uygulamalar ve Yaygın Hatalar
En İyi Uygulamalar:

  1. Başlangıçta global reset: Evrensel Seçici’yi CSS dosyanızın en başında kullanarak tüm elemanlar için temiz bir temel oluşturun.
  2. Mobile-first yaklaşımı: Evrensel Seçici ile başlangıç yaptığınızda, mobil tasarım için boşlukları ve hizalamayı kontrol etmek daha kolaydır.
  3. Performans optimizasyonu: Sadece reset ve temel font gibi hafif stiller uygulayın.

  4. Bakımı kolay kod: Evrensel Seçici’yi, sınıf ve ID seçicilerle birlikte kullanın; tüm stili buna yüklemeyin.
    Yaygın Hatalar:

  5. Ağır efektler eklemek (gölge, animasyon, blur) tüm sayfayı yavaşlatır.

  6. !important aşırı kullanımı: Spesifiklik sorunları yaratır ve bakım zorlaşır.
  7. Responsive tasarımı ihmal etmek: Reset yapmak duyarlı tasarım anlamına gelmez; medya sorguları gereklidir.
  8. Sadece Evrensel Seçiciye güvenmek: Daha spesifik seçicilerle kombinasyon şarttır.
    Hata ayıklama ipucu:
    Tarayıcı geliştirici araçlarında Evrensel Seçici bloğunu geçici olarak kapatın; sorunların buradan kaynaklanıp kaynaklanmadığını kolayca anlarsınız.

📊 Hızlı Referans

Property/Method Description Example
* Tüm HTML elemanlarını seçer * { margin:0; }
margin Varsayılan dış boşluğu kaldırır * { margin:0; }
padding Varsayılan iç boşluğu kaldırır * { padding:0; }
box-sizing Padding ve border’ı toplam boyuta dahil eder * { box-sizing:border-box; }
font-family Global font tanımlar * { font-family:"Open Sans",sans-serif; }

Özet ve Sonraki Adımlar
Bu derste, Evrensel Seçici (*) kullanarak bir web projesinde nasıl temiz ve tutarlı bir başlangıç noktası oluşturacağınızı öğrendiniz. Tıpkı bir odayı dekore etmeden önce temizlemek veya bir mektup yazmadan önce kağıdı hizalamak gibi, Evrensel Seçici tüm sayfanızı sonraki stillere hazırlıyor.
Ana çıkarımlar:

  • Evrensel Seçici, tarayıcı varsayılanlarını sıfırlamak ve tutarlı bir temel oluşturmak için idealdir.
  • Performansı korumak için ağır efektlerden kaçının.

  • Responsive tasarım için medya sorgularıyla destekleyin.
    Sonraki adımlar:

  • Etiket, sınıf ve ID seçicilerini detaylı inceleyin.

  • Media query kullanarak mobile-first stratejiyi geliştirin.
  • Pratik olarak bir blog veya e-ticaret sayfası tasarlayın ve Evrensel Seçici ile temel stilinizi hazırlayın.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 10 / 15
Css Ders