CSS-fusklapp
En sökbar, utskrivbar CSS-referens — selektorer, box-modellen, flexbox, grid, typografi, övergångar och moderna funktioner. Gratis.
Selektorer
13.class
Välj alla element med klassen
#id
Välj elementet med id:t
a, b
Grupp: välj a och b
a b
Ättling: b inuti a
a > b
Direkt barn b till a
a + b
Angränsande syskon direkt efter a
a ~ b
Allmänt syskon b efter a
[type="text"]
Attributselektor
:hover :focus
Pseudoklasser för tillstånd
:nth-child(2n)
Varje jämnt barn
::before ::after
Pseudoelement (genererat innehåll)
:not(.x)
Negation: allt utom .x
:is(h1, h2, h3)
Matchar valfri selektor i listan
Boxmodellen
7box-sizing: border-box;
Inkludera padding och border i bredden
margin: 0 auto;
Centrera ett block horisontellt
padding: 1rem 2rem;
Vertikalt 1rem, horisontellt 2rem
border: 1px solid #ccc;
Bredd, stil, färg
border-radius: 8px;
Rundade hörn
outline: 2px dashed red;
Outline (påverkar inte layouten)
overflow: hidden;
Klipp innehåll som spiller över
Flexbox
8display: flex;
Skapa en flex-container
flex-direction: row | column;
Huvudaxelns riktning
justify-content: space-between;
Justera längs huvudaxeln
align-items: center;
Justera längs tväraxeln
flex-wrap: wrap;
Tillåt element att radbrytas
gap: 1rem;
Mellanrum mellan element
flex: 1;
Väx för att fylla utrymme (1 1 0)
align-self: flex-end;
Åsidosätt tväraxeln för ett element
Grid
8display: grid;
Skapa en grid-container
grid-template-columns: 1fr 1fr 1fr;
Tre lika kolumner
repeat(3, 1fr)
Kortform för upprepade spår
minmax(200px, 1fr)
Spår mellan ett min och max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsiva automatiska kolumner
gap: 1rem;
Rad- och kolumnmellanrum
grid-column: 1 / 3;
Sträck från linje 1 till 3
place-items: center;
Centrera element på båda axlarna
Typografi
8font-family: system-ui, sans-serif;
Typsnittsstack
font-size: 1.125rem;
Relativ teckenstorlek
font-weight: 600;
Fet vikt
line-height: 1.6;
Radavstånd
letter-spacing: .02em;
Teckenavstånd
text-align: center;
Horisontell textjustering
text-transform: uppercase;
Ändra bokstavsskiftläge
text-overflow: ellipsis;
Korta av med … (kräver overflow+nowrap)
Färger och bakgrund
7color: #1f2937;
Textfärg
background: rgb(0 0 0 / 50%);
Modern rgb med alfa
background: linear-gradient(90deg,#f06,#48f);
Linjär gradient
opacity: .5;
Elementtransparens
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Slagskugga
background-size: cover;
Skala bild för att täcka
color-mix(in srgb, red 40%, blue);
Blanda två färger
Positionering
6position: relative;
Förskjutning från normalposition
position: absolute;
Relativt till närmaste positionerade förfader
position: fixed;
Relativt till viewporten
position: sticky; top: 0;
Fastnar vid scrollning förbi
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Staplingsordning
Övergångar och animation
5transition: all .2s ease;
Animera egenskapsändringar
transform: translateY(-4px) scale(1.05);
Flytta, skala, rotera
@keyframes spin { to { transform: rotate(360deg); } }
Definiera en animation
animation: spin 1s linear infinite;
Kör en keyframe-animation
will-change: transform;
Ge webbläsaren en optimeringsledtråd
Responsivt och modernt
7@media (max-width: 768px) { ... }
Media query-brytpunkt
clamp(1rem, 2vw, 2rem)
Flytande värde med min/max
aspect-ratio: 16 / 9;
Bibehåll ett bildförhållande
var(--brand)
Använd en anpassad egenskap
:root { --brand: #4f46e5; }
Definiera en anpassad egenskap
container-type: inline-size;
Aktivera container queries
@container (min-width: 400px) {…}
Container query
Ingen post matchar “:q”.
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.