CSS Notları ve İpuçları

İçindekiler

1. Seçiciler
2. Kutu Modeli
3. Tipografi
4. Renkler ve Arkaplanlar
5. Düzen
6. Flexbox
7. Grid
8. Geçişler ve Animasyonlar
9. Duyarlı Tasarım
10. Çeşitli

Seçiciler

Temel Seçiciler

* { } /* Evrensel Seçici */
h1 { } /* Tür Seçici */
.class { } /* Sınıf Seçici */
#id { } /* ID Seçici */
[attribute] { } /* Özellik Seçici */

Birleştiriciler

div p { } /* Soy Seçici */
div > p { } /* Çocuk Seçici */
div + p { } /* Bitişik Kardeş Seçici */
div ~ p { } /* Genel Kardeş Seçici */

Sözde-sınıflar

a:hover { } /* Üzerine Gelme */
input:focus { } /* Odaklanma */
li:first-child { } /* İlk Çocuk */
li:last-child { } /* Son Çocuk */
li:nth-child(2n) { } /* Çift Çocuklar */

Sözde-elementler

p::first-line { } /* İlk Satır */
p::first-letter { } /* İlk Harf */
p::before { content: ""; } /* Öncesi Elementi */
p::after { content: ""; } /* Sonrası Elementi */

Kutu Modeli

Kutu Boyutlandırma

* {
    box-sizing: border-box;
}

Margin ve Padding

.element {
    margin: 10px; /* Tüm kenarlar */
    margin: 10px 20px; /* Üst/Alt Sol/Sağ */
    margin: 10px 20px 30px 40px; /* Üst Sağ Alt Sol */
    padding: 10px; /* Margin ile aynı desenler */
}

Kenarlık

.element {
    border: 1px solid black;
    border-radius: 5px;
    border-top: 2px dashed red;
}

Tipografi

Font Özellikleri

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.5;
}

Metin Özellikleri

p {
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 2px;
    word-spacing: 4px;
}

Renkler ve Arkaplanlar

Renkler

.element {
    color: red;
    color: #00ff00;
    color: rgb(0, 0, 255);
    color: rgba(0, 0, 255, 0.5);
    color: hsl(120, 100%, 50%);
    color: hsla(120, 100%, 50%, 0.5);
}

Arkaplanlar

.element {
    background-color: yellow;
    background-image: url('resim.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Düzen

Görüntüleme

.element {
    display: block;
    display: inline;
    display: inline-block;
    display: none;
}

Konumlandırma

.element {
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
}

Yüzdürme

.element {
    float: left;
    float: right;
    clear: both;
}

Flexbox

Flex Kapsayıcı

.container {
    display: flex;
    flex-direction: row | column;
    justify-content: flex-start | center | flex-end | space-between | space-around;
    align-items: stretch | flex-start | center | flex-end;
    flex-wrap: nowrap | wrap;
}

Flex Öğeler

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    flex: 1; /* grow, shrink ve basis için kısayol */
    align-self: auto | flex-start | center | flex-end | stretch;
}

Grid

Grid Kapsayıcı

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px;
    justify-items: start | center | end;
    align-items: start | center | end;
}

Grid Öğeler

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    justify-self: start | center | end;
    align-self: start | center | end;
}

Geçişler ve Animasyonlar

Geçişler

.element {
    transition: özellik süre zamanlama-fonksiyonu gecikme;
    transition: all 0.3s ease;
}

Animasyonlar

@keyframes kaydir {
    0% { left: 0; }
    100% { left: 100px; }
}

.element {
    animation: kaydir 2s ease infinite;
}

Duyarlı Tasarım

Medya Sorguları

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

Esnek Görseller

img {
    max-width: 100%;
    height: auto;
}

Görüntü Alanı Meta Etiketi

<meta name="viewport" content="width=device-width, initial-scale=1">

Çeşitli

Değişkenler (Özel Özellikler)

:root {
    --ana-renk: #3498db;
}

.element {
    color: var(--ana-renk);
}

Opaklık ve Görünürlük

.element {
    opacity: 0.5;
    visibility: hidden;
}

Dönüştürme

.element {
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

Filtre

.element {
    filter: blur(5px) brightness(200%) grayscale(80%);
}