CSS Kopya Kâğıdı
Aranabilir, yazdırılabilir bir CSS başvurusu — selectors, box modeli, flexbox, grid, tipografi, transitions ve modern özellikler. Ücretsiz.
Selectors
13.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list
Box model
7box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows
Flexbox
8display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item
Grid
8display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes
Typography
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)
Colors & background
7color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors
Positioning
6position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order
Transitions & animation
5transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize
Responsive & modern
7@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query
“:q” ile eşleşen bir girdi yok.
CSS Kopya Kâğıdı Hakkında
Bu CSS hile sayfası, günlük kullandığınız özellikleri tek bir aranabilir sayfada toplar: seçiciler, kutu modeli, flexbox, grid, tipografi, renkler ve arka planlar, konumlandırma, geçişler ve animasyon, ve duyarlı ile modern CSS bölümü.
“O özelliğin adı neydi?” sorusunun cevabı bir arama uzaklıkta olacak şekilde düzenlenmiştir — özellikle flexbox ve grid bölümleri, doğrudan bir stil sayfasına kopyalayabileceğiniz değerlerle hizalama ve düzen özelliklerini listeler, modern bölüm ise yeni özellikleri el altında tutar.
Sayfa ücretsizdir, istemci tarafında yüklenir, yazarken anında filtreler ve herhangi bir bildirimi tek tıkla kopyalamanıza izin verir. Yapışkan bir içindekiler tablosu bölümler arasında atlar ve yazdır düğmesi temiz bir kağıt referans üretir.
CSS Kopya Kâğıdı Nasıl Kullanılır
- Bölüm listesine göz atın — Seçiciler, Kutu modeli, Flexbox, Grid, Tipografi ve daha fazlası.
- Her satırı filtrelemek için arama kutusuna grid, hover veya transition gibi bir özellik veya kavram yazın.
- Yapışkan içindekiler tablosu üzerinden Konumlandırma gibi bir bölüme atlayın.
- CSS bildirimini kopyalamak için bir kod parçasına veya kopyalama simgesine tıklayın.
- Masa başı bir CSS referansı için sayfayı yazdırın.
Sıkça sorulan sorular
Dokuz bölüm: seçiciler, kutu modeli, flexbox, grid, tipografi, renkler ve arka planlar, konumlandırma, geçişler ve animasyon, ve duyarlı ile modern CSS özellikleri.
Evet — her ikisi de geliştiricilerin en sık yaptığı aramalar olan konteyner ve öğe özellikleri, hizalama değerleri ve kısayol biçimleriyle kendi bölümlerine sahip.
Evet. Uzun süredir var olan çekirdeğin ötesinde, özel bir duyarlı ve modern bölüm, güncel stil sayfalarında karşılaştığınız yeni özellikleri ve medya sorgusu kalıplarını kapsar.
Evet. Koda veya üzerine gelindiğinde çıkan kopyalama simgesine tıklayın, bildirim panonuza kopyalanır ve kısa bir “Kopyalandı!” mesajıyla onaylanır.
Evet, tamamen ücretsiz — canlı aramalı, girişsiz ve sınırsız kullanılan istemci taraflı bir sayfa.
Popüler aramalar
css cheat sheet
css seçici listesi
css flexbox özellikleri
css grid özellikleri
css box model referansı
css position değerleri
css transition ve animasyon söz dizimi
css özellik referansı
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.