CSS Kopya Kâğıdı
Aranabilir, yazdırılabilir bir CSS başvurusu — selectors, box modeli, flexbox, grid, tipografi, transitions ve modern özellikler. Ücretsiz.
Seçiciler
13.class
Sınıfa sahip tüm öğeleri seç
#id
id'ye sahip öğeyi seç
a, b
Grup: a ve b'yi seç
a b
Alt öğe: a içindeki b
a > b
a'nın doğrudan alt öğesi b
a + b
a'dan hemen sonraki bitişik kardeş
a ~ b
a'dan sonraki genel kardeş b
[type="text"]
Öznitelik seçici
:hover :focus
Durum için pseudo-class'lar
:nth-child(2n)
Her çift alt öğe
::before ::after
Pseudo-element'ler (üretilen içerik)
:not(.x)
Olumsuzlama: .x dışında her şey
:is(h1, h2, h3)
Listedeki herhangi bir seçiciyle eşleşir
Kutu modeli
7box-sizing: border-box;
Padding ve border'ı genişliğe dahil et
margin: 0 auto;
Bir bloğu yatay ortala
padding: 1rem 2rem;
Dikey 1rem, yatay 2rem
border: 1px solid #ccc;
Genişlik, stil, renk
border-radius: 8px;
Yuvarlatılmış köşeler
outline: 2px dashed red;
Outline (düzeni etkilemez)
overflow: hidden;
Taşan içeriği kırp
Flexbox
8display: flex;
Bir flex kapsayıcı oluştur
flex-direction: row | column;
Ana eksen yönü
justify-content: space-between;
Ana eksen boyunca hizala
align-items: center;
Çapraz eksen boyunca hizala
flex-wrap: wrap;
Öğelerin kaymasına izin ver
gap: 1rem;
Öğeler arası boşluk
flex: 1;
Alanı doldurmak için büyü (1 1 0)
align-self: flex-end;
Bir öğe için çapraz ekseni geçersiz kıl
Grid
8display: grid;
Bir grid kapsayıcı oluştur
grid-template-columns: 1fr 1fr 1fr;
Üç eşit sütun
repeat(3, 1fr)
Tekrarlanan track'ler için kısaltma
minmax(200px, 1fr)
Bir min ve max arasında track
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Duyarlı otomatik sütunlar
gap: 1rem;
Satır ve sütun boşluğu
grid-column: 1 / 3;
1'den 3'e çizgi boyunca uzan
place-items: center;
Öğeleri her iki eksende ortala
Tipografi
8font-family: system-ui, sans-serif;
Font yığını
font-size: 1.125rem;
Göreli font boyutu
font-weight: 600;
Kalın ağırlık
line-height: 1.6;
Satır aralığı
letter-spacing: .02em;
Harf aralığı
text-align: center;
Yatay metin hizalama
text-transform: uppercase;
Harf büyüklüğünü değiştir
text-overflow: ellipsis;
… ile kısalt (overflow+nowrap gerekir)
Renkler ve arka plan
7color: #1f2937;
Metin rengi
background: rgb(0 0 0 / 50%);
Alfa ile modern rgb
background: linear-gradient(90deg,#f06,#48f);
Doğrusal degrade
opacity: .5;
Öğe saydamlığı
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Gölge
background-size: cover;
Görüntüyü kaplayacak şekilde ölçekle
color-mix(in srgb, red 40%, blue);
İki rengi karıştır
Konumlandırma
6position: relative;
Normal konumdan kaydırma
position: absolute;
En yakın konumlandırılmış üst öğeye göre
position: fixed;
Görüntü alanına göre
position: sticky; top: 0;
Kaydırırken yapışır
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Yığınlama sırası
Geçişler ve animasyon
5transition: all .2s ease;
Özellik değişikliklerini canlandır
transform: translateY(-4px) scale(1.05);
Taşı, ölçekle, döndür
@keyframes spin { to { transform: rotate(360deg); } }
Bir animasyon tanımla
animation: spin 1s linear infinite;
Bir keyframe animasyonu çalıştır
will-change: transform;
Tarayıcıya optimize etmesi için ipucu ver
Duyarlı ve modern
7@media (max-width: 768px) { ... }
Media query kırılma noktası
clamp(1rem, 2vw, 2rem)
min/max ile akışkan değer
aspect-ratio: 16 / 9;
Bir en boy oranını koru
var(--brand)
Bir özel özellik kullan
:root { --brand: #4f46e5; }
Bir özel özellik tanımla
container-type: inline-size;
Container query'leri etkinleştir
@container (min-width: 400px) {…}
Container query
“:q” ile eşleşen bir girdi yok.
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.