Yükleniyor...
CSS Özellikleri Tam Referans Rehberi
Bu kapsamlı CSS özellikleri referans rehberi, geliştiricilere tüm CSS özelliklerini hızlı ve doğru bir şekilde bulma imkânı sunmak için hazırlanmıştır. Kodlama sırasında başvuru kaynağı olarak kullanılabilir, farklı kategoriler altında düzenlenmiş tablolar sayesinde aradığınız özelliğe anında ulaşabilirsiniz. Bu rehberde yer alan kategoriler; Layout ve konumlandırma, Box Model, Border ve Outline, Arka Plan, Tipografi, Flexbox ve Grid özelliklerini kapsar. Her özellik için sözdizimi, açıklama, örnek kullanım ve tarayıcı desteği sunularak, hem modern hem de eski tarayıcılarda uyumlu kod yazmanız kolaylaştırılmıştır.
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | Elementin gösterim tipini kontrol eder | display: flex | Tüm tarayıcılar |
| position | position: value | Konumlandırma yöntemi | position: absolute | Tüm tarayıcılar |
| top | top: value | Dikey konum ofseti | top: 10px | Tüm tarayıcılar |
| right | right: value | Sağdan yatay konum | right: 20px | Tüm tarayıcılar |
| bottom | bottom: value | Alttan dikey konum | bottom: 10px | Tüm tarayıcılar |
| left | left: value | Soldan yatay konum | left: 20px | Tüm tarayıcılar |
| z-index | z-index: number | Stack sırası | z-index: 999 | Tüm tarayıcılar |
| float | float: value | Elemanı kaydırır | float: left | Tüm tarayıcılar |
| clear | clear: value | Yüzen elemanları temizler | clear: both | Tüm tarayıcılar |
| overflow | overflow: value | Taşan içeriği yönetir | overflow: hidden | Tüm tarayıcılar |
| overflow-x | overflow-x: value | Yatay taşma | overflow-x: scroll | Tüm tarayıcılar |
| overflow-y | overflow-y: value | Dikey taşma | overflow-y: auto | Tüm tarayıcılar |
| visibility | visibility: value | Görünürlük | visibility: hidden | Tüm tarayıcılar |
| clip | clip: rect() | İçeriği kırpar | clip: rect(0,50px,50px,0) | Tüm tarayıcılar |
| vertical-align | vertical-align: value | Dikey hizalama | vertical-align: middle | Tüm tarayıcılar |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | Element genişliği | width: 300px | Tüm tarayıcılar |
| height | height: value | Element yüksekliği | height: 200px | Tüm tarayıcılar |
| max-width | max-width: value | Maksimum genişlik | max-width: 100% | Tüm tarayıcılar |
| min-width | min-width: value | Minimum genişlik | min-width: 200px | Tüm tarayıcılar |
| max-height | max-height: value | Maksimum yükseklik | max-height: 500px | Tüm tarayıcılar |
| min-height | min-height: value | Minimum yükseklik | min-height: 100px | Tüm tarayıcılar |
| margin | margin: value | Dış boşluk | margin: 20px | Tüm tarayıcılar |
| margin-top | margin-top: value | Üst boşluk | margin-top: 10px | Tüm tarayıcılar |
| margin-right | margin-right: value | Sağ boşluk | margin-right: 15px | Tüm tarayıcılar |
| margin-bottom | margin-bottom: value | Alt boşluk | margin-bottom: 10px | Tüm tarayıcılar |
| margin-left | margin-left: value | Sol boşluk | margin-left: 15px | Tüm tarayıcılar |
| padding | padding: value | İç boşluk | padding: 15px | Tüm tarayıcılar |
| padding-top | padding-top: value | Üst iç boşluk | padding-top: 10px | Tüm tarayıcılar |
| padding-right | padding-right: value | Sağ iç boşluk | padding-right: 20px | Tüm tarayıcılar |
| padding-bottom | padding-bottom: value | Alt iç boşluk | padding-bottom: 10px | Tüm tarayıcılar |
| padding-left | padding-left: value | Sol iç boşluk | padding-left: 20px | Tüm tarayıcılar |
| box-sizing | box-sizing: value | Box model hesaplama | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | Tam kenarlık | border: 2px solid #000 | Tüm tarayıcılar |
| border-width | border-width: value | Kenarlık kalınlığı | border-width: 3px | Tüm tarayıcılar |
| border-style | border-style: value | Kenarlık tipi | border-style: dashed | Tüm tarayıcılar |
| border-color | border-color: value | Kenarlık rengi | border-color: red | Tüm tarayıcılar |
| border-radius | border-radius: value | Köşe yuvarlama | border-radius: 10px | IE9+ |
| outline | outline: width style color | Dış hat | outline: 2px solid red | Tüm tarayıcılar |
| outline-offset | outline-offset: value | Dış hat mesafesi | outline-offset: 5px | Tüm tarayıcılar |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | Tam arka plan | background: #fff url() no-repeat center | Tüm tarayıcılar |
| background-color | background-color: value | Arka plan rengi | background-color: #ff0000 | Tüm tarayıcılar |
| background-image | background-image: url() | Arka plan resmi | background-image: url('bg.jpg') | Tüm tarayıcılar |
| background-repeat | background-repeat: value | Tekrar | background-repeat: no-repeat | Tüm tarayıcılar |
| background-position | background-position: value | Pozisyon | background-position: center top | Tüm tarayıcılar |
| background-size | background-size: value | Boyutlandırma | background-size: cover | IE9+ |
| background-attachment | background-attachment: value | Kaydırma | background-attachment: fixed | Tüm tarayıcılar |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | Tam font | font: bold 16px/1.5 Arial | Tüm tarayıcılar |
| font-family | font-family: name | Yazı tipi | font-family: 'Arial', sans-serif | Tüm tarayıcılar |
| font-size | font-size: value | Yazı boyutu | font-size: 18px | Tüm tarayıcılar |
| font-weight | font-weight: value | Kalınlık | font-weight: bold | Tüm tarayıcılar |
| line-height | line-height: value | Satır yüksekliği | line-height: 1.6 | Tüm tarayıcılar |
| text-align | text-align: value | Yatay hizalama | text-align: center | Tüm tarayıcılar |
| text-decoration | text-decoration: value | Yazı dekoru | text-decoration: underline | Tüm tarayıcılar |
| text-transform | text-transform: value | Metin biçimi | text-transform: uppercase | Tüm tarayıcılar |
| text-overflow | text-overflow: value | Taşma kontrolü | text-overflow: ellipsis | IE6+ |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | Flexbox etkinleştirir | display: flex | IE10+ |
| flex-direction | flex-direction: value | Ana eksen yönü | flex-direction: column | IE10+ |
| justify-content | justify-content: value | Ana eksen hizalama | justify-content: space-between | IE10+ |
| align-items | align-items: value | Çapraz eksen hizalama | align-items: center | IE10+ |
| flex | flex: grow shrink basis | Eleman esnekliği | flex: 1 | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | Grid etkinleştirir | display: grid | IE10+ (-ms-) |
| grid-template-columns | grid-template-columns: values | Sütun boyutları | grid-template-columns: 1fr 2fr | IE10+ (-ms-) |
| grid-template-rows | grid-template-rows: values | Satır boyutları | grid-template-rows: 100px auto | IE10+ (-ms-) |
| grid-gap | grid-gap: row column | Öğe arası boşluk | grid-gap: 20px 10px | IE10+ (-ms-) |
| justify-items | justify-items: value | Eleman yatay hizalama | justify-items: center | IE10+ (-ms-) |
| align-items | align-items: value | Eleman dikey hizalama | align-items: center | IE10+ (-ms-) |
Quick Examples
css
CSS Code
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* Typography Example */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* Animation Example */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}İyi uygulama ve ipuçları: Font-family bildirimlerinde her zaman yedek yazı tipleri belirtin. Daha iyi duyarlılık için em, rem veya % gibi göreceli birimler kullanın. !important kullanımını minimumda tutun. Özellikleri farklı tarayıcılarda test edin ve modern özelliklerde tarayıcı uyumluluğunu kontrol edin. Kısayol özellikleri kullanarak dosya boyutunu azaltın. Karmaşık animasyonlar ve filtrelerin performans etkisini göz önünde bulundurun. Kodun sürdürülebilirliği için CSS değişkenleri kullanın. Denetleyicilerle CSS sözdizimini doğrulayın. Deneysel özellikler için vendor prefix eklemeyi unutmayın. İlgili özellikleri gruplandırarak kod organizasyonunu iyileştirin.
🧠 Bilginizi Test Edin
Başlamaya Hazır
Reference Knowledge Check
CSS özellikleri ve kullanımlarını test edin.
3
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