Fișă de referință CSS
O referință CSS căutabilă și imprimabilă — selectori, modelul cutiei, flexbox, grid, tipografie, tranziții și funcții moderne. Gratuit.
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
Nicio intrare nu corespunde cu „:q”.
Despre Fișă de referință CSS
Această fișă de referință CSS adună proprietățile pe care le folosești zilnic într-o singură pagină cu căutare: selectori, box model, flexbox, grid, tipografie, culori și fundaluri, poziționare, tranziții și animație, plus o secțiune despre CSS responsive și modern.
Este organizată astfel încât răspunsul la „cum se numea acea proprietate?” să fie la o singură căutare distanță — secțiunile flexbox și grid, în special, listează proprietățile de aliniere și layout cu valori pe care le poți copia direct într-o foaie de stil, iar secțiunea modernă păstrează la îndemână funcțiile mai noi.
Fișa este gratuită, se încarcă în browser, filtrează în timp real pe măsură ce scrii și îți permite să copiezi orice declarație cu un singur click. Un cuprins fix sare între secțiuni, iar butonul de printare produce o referință curată pe hârtie.
Cum să utilizați Fișă de referință CSS
- Parcurge lista de secțiuni — Selectori, Box model, Flexbox, Grid, Tipografie și altele.
- Scrie o proprietate sau un concept precum grid, hover sau transition în câmpul de căutare pentru a filtra fiecare rând.
- Sari la o secțiune precum Poziționare prin cuprinsul fix.
- Dă click pe un fragment de cod sau pe iconița lui de copiere pentru a copia declarația CSS.
- Printează fișa pentru o referință CSS la birou.
Întrebări frecvente
Nouă secțiuni: selectori, box model, flexbox, grid, tipografie, culori și fundaluri, poziționare, tranziții și animație, plus CSS responsive și modern.
Da — ambele au secțiuni proprii cu proprietățile pentru container și element, valorile de aliniere și formele prescurtate, care sunt cele mai frecvente căutări ale dezvoltatorilor.
Da. Pe lângă nucleul consacrat, o secțiune dedicată responsive și modern acoperă funcțiile mai noi pe care le întâlnești în foile de stil actuale, alături de tipare de media-query.
Da. Dă click pe cod sau pe iconița de copiere la hover, iar declarația ajunge în clipboard, confirmat printr-un scurt mesaj „Copiat!”.
Da, complet gratuită — o pagină procesată în browser cu căutare live, fără autentificare și utilizare nelimitată.
Căutări populare
css cheat sheet
css selectors list
css flexbox properties
css grid properties
css box model reference
css position values
css transition and animation syntax
css properties reference
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.