CSS Nedir? En Kapsamlı CSS Kodları Rehberi (Tablolu)

CSS (Cascading Style Sheets), web sitelerinin tasarımını ve görünümünü kontrol etmek için kullanılan bir stil dilidir. Bu yazıda CSS’te en çok kullanılan tüm temel kodları, anlamları ve örnekleriyle birlikte tablo halinde bulacaksın.

1. CSS Selectors (Seçiciler)

Selector	Açıklama	Örnek
`*`	Tüm elemanları seçer	`* { margin: 0; }`
`div`	Belirli HTML etiketi	`div { color: red; }`
`.class`	Class seçici	`.box { padding: 10px; }`
`#id`	ID seçici	`#header { height: 60px; }`
`element, element`	Çoklu seçim	`h1, h2 { color: blue; }`
`element element`	İç içe seçim	`div p { color: green; }`
`element > element`	Direkt çocuk	`ul > li { list-style: none; }`

2. Metin (Text) CSS Kodları

Property	Açıklama	Örnek
`color`	Yazı rengi	`color: red;`
`font-size`	Yazı boyutu	`font-size: 16px;`
`font-family`	Yazı tipi	`font-family: Arial;`
`font-weight`	Kalınlık	`font-weight: bold;`
`text-align`	Hizalama	`text-align: center;`
`text-decoration`	Alt çizgi vb.	`text-decoration: underline;`
`line-height`	Satır aralığı	`line-height: 1.5;`
`letter-spacing`	Harf aralığı	`letter-spacing: 2px;`

3. Box Model (Kutu Modeli)

Property	Açıklama	Örnek
`width`	Genişlik	`width: 300px;`
`height`	Yükseklik	`height: 200px;`
`padding`	İç boşluk	`padding: 20px;`
`margin`	Dış boşluk	`margin: 10px;`
`border`	Kenarlık	`border: 1px solid black;`
`box-sizing`	Kutu hesabı	`box-sizing: border-box;`

4. Arka Plan (Background) CSS Kodları

Property	Açıklama	Örnek
`background-color`	Arka plan rengi	`background-color: #fff;`
`background-image`	Arka plan görseli	`background-image: url(img.jpg);`
`background-size`	Görsel boyutu	`background-size: cover;`
`background-position`	Konum	`background-position: center;`
`background-repeat`	Tekrar	`background-repeat: no-repeat;`

5. Flexbox CSS Kodları

Property	Açıklama	Örnek
`display`	Flex başlatır	`display: flex;`
`flex-direction`	Yön	`flex-direction: row;`
`justify-content`	Yatay hizalama	`justify-content: center;`
`align-items`	Dikey hizalama	`align-items: center;`
`gap`	Eleman aralığı	`gap: 10px;`

6. Position (Konumlandırma)

Property	Açıklama	Örnek
`position`	Konum türü	`position: relative;`
`top`	Üstten	`top: 10px;`
`left`	Soldan	`left: 20px;`
`z-index`	Katman sırası	`z-index: 10;`

7. Pseudo Class & Elements

Kod	Açıklama	Örnek
`:hover`	Üzerine gelince	`a:hover { color: red; }`
`:active`	Tıklanınca	`button:active { }`
`:focus`	Odaklanınca	`input:focus { }`
`::before`	Öncesi	`p::before { }`
`::after`	Sonrası	`div::after { }`

8. Responsive (Media Query)

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

9. CSS Grid Kodları

Property	Açıklama	Örnek
`display`	Grid başlatır	`display: grid;`
`grid-template-columns`	Sütun yapısı	`grid-template-columns: 1fr 1fr;`
`grid-template-rows`	Satır yapısı	`grid-template-rows: auto;`
`gap`	Boşluk	`gap: 20px;`
`grid-column`	Sütun konumu	`grid-column: 1 / 3;`
`grid-row`	Satır konumu	`grid-row: 1 / 2;`

10. Transform CSS Kodları

Property	Açıklama	Örnek
`transform`	Dönüştürme	`transform: rotate(45deg);`
`translate`	Taşıma	`transform: translateX(20px);`
`scale`	Ölçekleme	`transform: scale(1.2);`
`skew`	Eğme	`transform: skew(10deg);`

11. Transition (Geçiş Efektleri)

Property	Açıklama	Örnek
`transition`	Genel geçiş	`transition: all 0.3s;`
`transition-property`	Özellik	`transition-property: color;`
`transition-duration`	Süre	`transition-duration: 0.5s;`
`transition-timing-function`	Eğri	`ease, linear`

12. Animation (Animasyonlar)

Property	Açıklama	Örnek
`@keyframes`	Animasyon tanımı	`@keyframes move {}`
`animation-name`	Ad	`animation-name: move;`
`animation-duration`	Süre	`2s`
`animation-iteration-count`	Tekrar	`infinite`
`animation-delay`	Gecikme	`1s`

13. Overflow & Visibility

Property	Açıklama	Örnek
`overflow`	Taşma kontrolü	`overflow: hidden;`
`overflow-x`	Yatay	`overflow-x: auto;`
`overflow-y`	Dikey	`overflow-y: scroll;`
`visibility`	Görünürlük	`visibility: hidden;`
`opacity`	Saydamlık	`opacity: 0.5;`

14. Liste & Tablo CSS Kodları

Liste

Property	Açıklama	Örnek
`list-style`	Liste tipi	`list-style: none;`
`list-style-type`	İşaret	`circle, square`
`list-style-position`	Konum	`inside`

Tablo

Property	Açıklama	Örnek
`border-collapse`	Kenarlık	`collapse`
`border-spacing`	Boşluk	`10px`
`caption-side`	Başlık	`top`

15. Cursor & Kullanıcı Etkileşimi

Property	Açıklama	Örnek
`cursor`	İmleç	`cursor: pointer;`
`user-select`	Metin seçimi	`user-select: none;`
`pointer-events`	Etkileşim	`pointer-events: none;`

16. CSS Variables (Değişkenler)

Kod	Açıklama	Örnek
`--degisken`	Değişken tanımı	`--main-color: red;`
`var()`	Kullanım	`color: var(--main-color);`

:root {
  --primary: #3498db;
}

17. CSS Functions (Fonksiyonlar)

Fonksiyon	Açıklama	Örnek
`calc()`	Hesaplama	`width: calc(100% - 50px);`
`clamp()`	Min-max	`font-size: clamp(14px, 2vw, 20px);`
`min()`	Minimum	`width: min(500px, 100%);`
`max()`	Maksimum	`height: max(300px, 50vh);`

18. Object & Image CSS Kodları

Property	Açıklama	Örnek
`object-fit`	Görsel uyumu	`cover, contain`
`object-position`	Konum	`center`
`aspect-ratio`	Oran	`16 / 9`

19. Modern CSS (Yeni Nesil)

Property	Açıklama	Örnek
`aspect-ratio`	En-boy oranı	`1 / 1`
`scroll-behavior`	Kaydırma	`smooth`
`backdrop-filter`	Arka plan blur	`blur(10px)`
`mix-blend-mode`	Karışım	`multiply`

Harika! O zaman Modern CSS (Yeni Nesil) başlığından devam ederek, eksik kalan ileri ve özel CSS özelliklerini tablo halinde ekliyorum. Böylece rehber tam kapsayıcı ve güncel hale gelecek.

20. CSS Filter (Filtreler)

Property / Fonksiyon	Açıklama	Örnek
`filter`	Görsel efekt uygular	`filter: blur(5px);`
`blur()`	Bulanıklaştırma	`filter: blur(3px);`
`brightness()`	Parlaklık	`filter: brightness(150%);`
`contrast()`	Kontrast	`filter: contrast(120%);`
`grayscale()`	Gri tonlama	`filter: grayscale(50%);`
`sepia()`	Sepya efekti	`filter: sepia(60%);`
`saturate()`	Doygunluk	`filter: saturate(200%);`
`hue-rotate()`	Renk tonu	`filter: hue-rotate(90deg);`
`invert()`	Negatif renk	`filter: invert(100%);`

21. CSS Clip / Mask / Shape

Property / Fonksiyon	Açıklama	Örnek
`clip-path`	Elemanı özel şekle kırpar	`clip-path: circle(50% at 50% 50%);`
`polygon()`	Çokgen şekil	`clip-path: polygon(50% 0%, 0% 100%, 100% 100%);`
`inset()`	Dört kenarı kırp	`clip-path: inset(10px 20px 10px 20px);`
`circle()`	Daire	`clip-path: circle(40% at 50% 50%);`
`ellipse()`	Elips	`clip-path: ellipse(50% 30% at 50% 50%);`
`mask-image`	Maske ile görünürlük	`mask-image: url(mask.png);`

22. Multi-Column Layout (Sütun Düzeni)

Property	Açıklama	Örnek
`column-count`	Sütun sayısı	`column-count: 3;`
`column-gap`	Sütun arası boşluk	`column-gap: 20px;`
`column-rule`	Sütun arası çizgi	`column-rule: 1px solid black;`
`column-width`	Sütun genişliği	`column-width: 150px;`

23. Perspective / 3D Transform

Property / Fonksiyon	Açıklama	Örnek
`perspective`	3D derinlik	`perspective: 1000px;`
`perspective-origin`	Derinlik kaynağı	`perspective-origin: 50% 50%;`
`transform: rotateX()`	X ekseninde döndürme	`transform: rotateX(45deg);`
`transform: rotateY()`	Y ekseninde döndürme	`transform: rotateY(30deg);`
`transform: rotateZ()`	Z ekseninde döndürme	`transform: rotateZ(60deg);`
`transform-style: preserve-3d`	3D çocuk elemanlar	`transform-style: preserve-3d;`

26. CSS Content & Quotes

Property / Pseudo	Açıklama	Örnek
`content`	Pseudo-element içerik	`p::before { content: "⚡"; }`
`quotes`	Alıntı stili	`quotes: "“" "”" "‘" "’";`
`counter-reset`	Sayaç başlat	`counter-reset: section;`
`counter-increment`	Sayaç artır	`counter-increment: section;`
`counter()`	Sayaç kullanımı	`content: counter(section);`

27. CSS Functions Detaylı

Fonksiyon	Açıklama	Örnek
`rgb()`	RGB renk	`color: rgb(255,0,0);`
`rgba()`	RGB + Alpha	`color: rgba(0,0,0,0.5);`
`hsl()`	Hue Saturation Light	`color: hsl(120, 50%, 50%);`
`hsla()`	HSL + Alpha	`color: hsla(240, 100%, 50%, 0.7);`
`linear-gradient()`	Doğrusal geçiş	`background: linear-gradient(to right, red, yellow);`
`radial-gradient()`	Dairesel geçiş	`background: radial-gradient(circle, red, yellow);`
`conic-gradient()`	Konik geçiş	`background: conic-gradient(red, yellow, green);`