CSS3 Temel ve İleri Düzey Rehberi

1. CSS3 Nedir?

CSS3 (Cascading Style Sheets Level 3), HTML veya XML belgelerinin sunumunu (görünümünü) tanımlamak için kullanılan bir stil dilidir. CSS2'den farklı olarak CSS3 "modüler" bir yapıya sahiptir.

CSS Nasıl Eklenir?

• Inline (Satır İçi): <h1 style="color:blue;">
• Internal (Dahili): <style> etiketleri arası.
• External (Harici): <link rel="stylesheet" href="style.css">

2. Seçiciler (Selectors)

Seçiciler, stil vermek istediğiniz HTML öğelerini hedeflemenizi sağlar.

/* Etiket Seçici */
p { font-size: 16px; }

/* Class (Sınıf) Seçici */
.ozel-metin { color: green; }

/* ID Seçici */
#ana-baslik { font-weight: bold; }

/* Torun (Descendant) Seçici */
div p { margin: 10px; }

/* Çocuk (Child) Seçici */
ul > li { list-style: none; }

/* N-inci Çocuk (Pseudo-class) */
li:nth-child(odd) { background: #eee; }
li:hover { color: red; }
        

CSS3 ile gelen gelişmiş seçiciler sayesinde JavaScript kullanmadan karmaşık seçimler yapabilirsiniz. Örneğin: input:required, p:empty veya [attribute^="value"].

3. CSS Kutu Modeli (Box Model)

Her HTML öğesi aslında bir kutudur. Bu kutu şu katmanlardan oluşur:

• Content: Metin ve resimlerin bulunduğu alan.
• Padding: İç boşluk (İçerik ile kenarlık arası).
• Border: Kenarlık.
• Margin: Dış boşluk (Kutunun diğer kutularla mesafesi).

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 15px;
    box-sizing: border-box; /* Önemli! Genişliğe padding ve border'ı dahil eder. */
}
        

4. Renkler ve Arkaplanlar

CSS3 renk tanımlama konusunda büyük esneklik sağlar.

• RGB/RGBA: rgba(255, 0, 0, 0.5) (Yarı saydam kırmızı).
• HSL/HSLA: Ton, Doygunluk, Işıklık.
• Gradients (Geçişler):

  background: linear-gradient(to right, #3498db, #2ecc71);

Gölge Efektleri

Kutu ve yazı gölgeleri tasarıma derinlik katar:

box-shadow: 10px 10px 5px grey;
text-shadow: 2px 2px 4px #000000;
        

5. Flexbox (Esnek Kutu Düzeni)

Flexbox, tek boyutlu (satır veya sütun) yerleşimler için mükemmeldir.

.flex-container {
    display: flex;
    justify-content: space-around; /* Yatay hizalama */
    align-items: center;           /* Dikey hizalama */
    flex-wrap: wrap;               /* Sığmazsa alt satıra geç */
}
        

6. CSS Grid Layout

Grid, iki boyutlu (satır VE sütun) yerleşimler için kullanılan en güçlü sistemdir.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3 sütun */
    gap: 20px; /* Hücreler arası boşluk */
}
        

7. Animasyon ve Geçişler

JavaScript kullanmadan hareketli öğeler oluşturun.

Transitions (Geçişler)

Bir durumdan diğerine yumuşak geçiş sağlar:

button {
    transition: background-color 0.5s ease;
}
button:hover {
    background-color: darkblue;
}
        

Keyframes (Animasyonlar)

@keyframes ornek {
    from { left: 0px; }
    to { left: 200px; }
}

.element {
    animation-name: ornek;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
        

8. Responsive (Duyarlı) Tasarım

Media Queries kullanarak web sitenizi tüm cihazlara uyumlu hale getirin.

/* Masaüstü standart ayarlar */
.sidebar { width: 30%; float: left; }

/* Tablet ve Telefonlar için (768px altı) */
@media screen and (max-width: 768px) {
    .sidebar {
        width: 100%;
        float: none;
    }
}
        

9. CSS Değişkenleri (Variables)

Modern CSS'te değerleri bir kez tanımlayıp her yerde kullanabilirsiniz.

:root {
  --ana-renk: #ff5733;
}

h1 {
  color: var(--ana-renk);
}
        

10. Profesyonel İpuçları

450 satırlık bir bilgi birikimini özetlemek gerekirse;

1. DRY (Don't Repeat Yourself): Kendinizi tekrar etmeyin, ortak sınıflar kullanın.
2. Mobile First: Tasarıma önce en küçük ekranlardan başlayın.
3. BEM Metodolojisi: .block__element--modifier yapısı ile isimlendirme yapın.
4. Normalize.css: Tarayıcılar arası varsayılan farklılıkları gidermek için kullanın.
5. Calc() Fonksiyonu: Matematiksel işlemler yapın: width: calc(100% - 50px);