A CSS (Cascading Style Sheets) a weboldalak megjelenésének formázására szolgál.
Segítségével stílusozhatod az elemeket, például színeket, méreteket, elrendezéseket.
Ez a cheat sheet a leggyakrabban használt CSS tulajdonságokat és mintákat tartalmazza.
* /* Univerzális szelektor */
element /* Elem szelektor */
.class /* Osztály szelektor */
#id /* ID szelektor */
element, element2 /* Több elem szelektor */
element element2 /* Leszármazott szelektor */
element > element2 /* Gyermek szelektor */
element + element2 /* Közvetlen testvér szelektor */
element ~ element2 /* Testvér szelektor */
[attr] /* Attribútum szelektor */
[attr=value] /* Attribútum érték szelektor */
[attr^=value] /* Attribútum kezdő érték szelektor */
[attr$=value] /* Attribútum végző érték szelektor */
[attr*=value] /* Attribútum részleges érték szelektor */
:pseudo-class /* Pseudo-osztály szelektor */
::pseudo-element /* Pseudo-elemek szelektor */
@media /* Média lekérdezés */Különböző szelektorok használata az elemek kiválasztásához.
rgb(r, g, b) /* RGB szín */
rgba(r, g, b, a) /* RGBA szín */
#rrggbb /* Hex szín, 00-ff */
#rgb /* Rövidített hex szín, 0-f */
hsl(h, s, l) /* HSL szín */
hsla(h, s, l, a) /* HSLA szín */Beállítja a szöveg színét.
- r = red (piros): 0-255
- g = green (zöld): 0-255
- b = blue (kék): 0-255
- a = alpha (átlátszóság): 0-1
- h = hue (színárnyalat): 0-360
- s = saturation (telítettség): 0-100
- l = lightness (világosság): 0-100
px /* Pixel */
em /* Lokális arány, a szülő elem betűméretéhez viszonyít */
rem /* Globális arány, a 'html' gyökérelem betűméretéhez viszonyít */
% /* Szülő méretéhez viszonyít */
vh /* Viewport magasságának százaléka */
vw /* Viewport szélességének százaléka */
fr /* Flex és grid egység, a maradék hely elosztása (1fr, 2fr = 1rész, 2rész) */
ch /* A '0' karakter szélessége (monospace layouthoz) */
ex /* Az 'x' karakter magassága */
cm /* Centiméter */
mm /* Milliméter */
in /* Inch */
pt /* Pont, 1pt = 1/72in, nyomtatáshoz használt, weben nem ajánlott */
pc /* Pica, 1pc = 12pt, tipográfiához és nyomtatáshoz használt */Különböző egységek használata méretezéshez.
/* komment */
/*
komment
komment
komment
*/Megjegyzés használata a kódban.
font-family: /* család */ family-name | generic-family | initial | inherit;
font-kerning: /* alávágás */ auto | normal | none;
font-size: /* méret */ xx-small | x-small | small | smaller | medium | large | larger | x-large | xx-large | [px|%|em|rem|...] | initial | inherit;
font-style: /* stílus */ normal | italic | oblique | initial | inherit;
font-variant: /* változat */ normal | small-caps | initial | inherit;
font-variant-caps: /* nagybetűs változatok */ normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | initial | inherit | unset;
font-weight: /* vastagság */ normal | bold | bolder | lighter | [number] | initial | inherit;
font: /* shorthand */ ...;
/* Haladóknak: */
font-feature-settings: /* OpenType funkciók */ normal | "smcp" on | "c2sc", "smcp" | "liga" 0 | "frac";
font-size-adjust: /* x-alapú méretkorrekció */ [number] | none | initial | inherit;
font-stretch: /* nyújtás */ ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit;Szövegformázási beállítások
@font-face {
font-family: myFont;
src: url(my_font.woff);
}
/* Használata: */
selector {
font-family: myFont;
}Saját betűtípust így tudsz beilleszteni a weboldalra.
@font-palette-values --myPalette {
font-family: "MyColorFont"; /* ugyanaz a font, amit használni fogsz */
base-palette: 0; /* a font beépített palettáinak indexe */
override-colors: 0 red, 1 blue, 2 green; /* palette színek felülírása index alapján */
}
/* Használata: */
selector {
font-family: "MyColorFont", sans-serif;
font-palette: --myPalette;
}Színes (color font, pl. COLRv1) betűtípusok palettájának módosítása. A base-palette kiválasztja a font beépített színkészletét, az override-colors pedig index alapján felülírja az egyes színeket. Csak color fontokkal működik, és a browser támogatás még korlátozott.
color: color;A szöveg színét állítja be. Elfogad színneveket, hex, rgb(), hsl() formátumokat is.
selector {
color: transparent;
background-clip: text;
/* ...utána háttérformázások... */
}A háttér csak a szöveg alakján belül jelenik meg. Szövegen belüli képhez, átmenethez használják.
white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit; /* Szóközök tördelése */
tab-size: number | length | initial | inherit;
line-height: normal | number | px|em|rem;
letter-spacing: normal | px|em|rem;
word-spacing: normal | px|em|rem;A szöveg olvashatóságának finomhangolása a sor-, betű- és szóközök szabályozásával. Segít átláthatóbb, levegősebb tipográfiát kialakítani.
text-decoration-line: none | [underline line-through overline] /* Akár mindhárom egyszerre */ | initial | inherit;
text-decoration-color: color | initial | inherit;
text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;
text-decoration-thickness: auto | from-font | length/percentage | initial | inherit;
text-decoration: /* shorthand */ ...;
text-underline-position: auto | under | from-font | left | right | initial | inherit;
text-underline-offset: auto | length/percentage | initial | inherit;Szövegdekoráció beállítása: aláhúzás, áthúzás, föléhúzás, és ezek beállításai.
text-shadow: x y blur color;Árnyék a szöveg mögött.
text-emphasis-color: color | inherit | initial;
text-emphasis-position: over | under | left | right | initial | inherit;
text-emphasis-style: none | filled | open | dot | circle | double-circle | triangle | sesame | character | color | initial | inherit;
text-emphasis: /* shorthand */ ...;Kiemelő jeleket (pl. pontok, körök) helyez a szöveg fölé vagy alá. Browser support korlátozott, főleg ázsiai tipográfiában használják.
text-transform: none | uppercase | lowercase | capitalize | initial | inherit;Betűk átalakítása nagybetűssé, kisbetűssé, kapitalizálttá.
overflow-wrap: normal | anywhere | break-word | initial | inherit; /* Szövegszintű tördelés. Normal: szóköz és kötőjel mentén. Break-word: legacy viselkedés. Anywhere: bárhol.*/
word-break: normal | break-all | keep-all | break-word | initial | inherit; /* Hosszú szavak tördelése */
line-break: normal | auto | loose | strict | anywhere | initial | inherit; /* Sorok tördelése */
hyphens: none | manual | auto | initial | inherit; /* Szóelválasztás kötőjelekkel */
hyphenate-character: auto | string | initial | inherit; /* A szóelválasztásnál használt karakter (pl. - helyett más) */
/* Modern (nem minden böngészőben stabil) */
text-wrap-mode: wrap | nowrap | revert | revert-layer | unset | initial | inherit;
text-wrap-style: auto | balance | pretty | stable | revert | revert-layer | unset | initial | inherit;
text-wrap: /* shorthand */ ...;A szöveg sortörésének szabályozása: szóközök kezelése, sortörési módok és hosszú szavak törése.
overflow: auto | visible | hidden | scroll | clip | initial | inherit; /* Túlcsorduló sorok kezelése */
overflow-x: auto |visible | hidden | scroll | initial | inherit; /* Túlcsordulás x irányban */
overflow-y: auto | visible | hidden | scroll | initial | inherit; /* Túlcsordulás y irányban */
overflow-anchor: auto | none | initial | inherit; /* Megakadályozza, hogy a tartalom változásakor a görgetési pozíció elugorjon */
/* overflow: hidden; és white-space: nowrap; esetén: */
text-overflow: clip | ellipsis | string | initial | inherit; /* Szöveg túlcsordulásának elrejtésének módja */Meghatározza, mi történjen, ha a tartalom nem fér el az elem méretén belül: levágás, görgetés, vagy automatikus tördelés.
text-align: left | right | center | justify | initial | inherit;
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit; /* Inline vagy table-cell elemek függőleges igazítása. */
text-indent: length | initial | inherit;
/* text-align: justify; esetén: */
text-align-last: auto | left | right | center | justify | start | end | initial | inherit;
text-justify: auto | inter-word | inter-character | none | initial | inherit;A szöveg vízszintes és függőleges igazítása, valamint a bekezdések és sorok finomhangolása (behúzás, sorkizárás, utolsó sor igazítása).
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
direction: ltr | rtl | initial | inherit;
unicode-bidi: normal | embed | bidi-override | initial | inherit;Meghatározza a karakterek tájolását és a szöveg írását, főként vertikális írásmód esetén (pl. ázsiai szövegek).
background-color: /* szín */ color | transparent | initial | inherit;
background-image: url("") /* kép */ | none | conic-gradient() | linear-gradient() | radial-gradient() | repeating-conic-gradient() | repeating-linear-gradient() | repeating-radial-gradient() | initial | inherit;
background-size: /* méret */ auto | contain | cover | length | initial | inherit;
background-repeat: /* ismétlés */ repeat | repeat-x | repeat-y | no-repeat | space | round;
background-position: /* pozíció */ [left|rigth|center] [top|center|bottom] | x% y% | xpos ypos | initial | inherit;
background-position-x: /* x pozíció */ left | rigth | center | x% | xpos | initial | inherit;
background-position-y: /* y pozíció */ top | center | bottom | y% | ypos | initial | inherit;
background-attachment: /* hozzáerősítés */ fixed | scroll | local | initial | inherit;
background-blend-mode: /* elmosás */ normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
background-origin: /* kezdőpont */ padding-box | border-box | content-box | initial | inherit;
background-clip: /* levágás */ padding-box | border-box | content-box | text | initial | inherit;
background: /* sorthand */ ...;Beállítja az elem hátterét.
/* Fizikai irányokban (top/right/bottom/left): */
margin-top: auto | value | initial | inherit;
margin-right: auto | value | initial | inherit;
margin-bottom: auto | value | initial | inherit;
margin-left: auto | value | initial | inherit;
margin: /* Shorthand */ ...;
/* Logikai irányokban (writing-mode függő): */
margin-block-start: auto | value | initial | inherit;
margin-block-end: auto | value | initial | inherit;
margin-block: /* Shorthand */ ...;
margin-inline-start: auto | value | initial | inherit;
margin-inline-end: auto | value | initial | inherit;
margin-inline: /* Shorthand */ ...;Külső térköz a border körül. Meghatározza az elemek közötti távolságot.
/* Fizikai irányokban (top/right/bottom/left): */
padding-top: value | initial | inherit;
padding-right: value | initial | inherit;
padding-bottom: value | initial | inherit;
padding-left: value | initial | inherit;
padding: /* Shorthand */ ...;
/* Logikai irányokban (writing-mode függő): */
padding-block-start: value | initial | inherit; /* Logikai top */
padding-block-end: value | initial | inherit; /* Logikai bottom */
padding-block: /* Shorthand */ ...;
padding-inline-start: value | initial | inherit; /* Logikai left */
padding-inline-end: value | initial | inherit; /* Logikai right */
padding-inline: /* Shorthand */ ...;Belső térköz az elem tartalma és a border között. Növeli az elem 'kattintható' területét is.
/* Leggyakoribb display értékek */
display: block | inline | inline-block | none | flex | inline-flex | grid | inline-grid;
/* - block -> új sorba kerül */
/* - inline -> soron belül marad */
/* - flex -> block szintű, rugalmas (1D layout) konténer */
/* - grid -> block szintű, rácsos (2D layout) konténer */
/* - inline-block -> inline szintű, de paraméterezhető width/height/padding/margin */
/* - inline-flex -> inline szintű, rugalmas (1D layout) konténer */
/* - inline-grid -> inline szintű, rácsos (2D layout) konténer */
/* - none -> nem jelenik meg */
/* Ritkább értékek */
display: list-item | table | table-row | table-cell;
/* - list-item -> listaelemként viselkedik */
/* - table -> táblázatként viselkedik */
/* - table-row -> táblázat sorként viselkedik */
/* - table-cell -> táblázat cellaként viselkedik */
/* - inline-table -> soron belül marad, táblázatként viselkedik */
/* Speciális értékek */
display: flow-root | contents;
/* - flow-root -> új block formating context */
/* - contents -> az elem nem generál box-ot, csak a gyerekek látszanak, de DOM-ban megmarad, accessibility és event kezelés szempontjából problémás lehet */
/* Elavult */
display: run-in;Meghatározza az elem megjelenítési módját: hogyan viselkedik a layoutban (block/inline), és hogyan rendezi a belső tartalmát (flow, flex, grid, stb.).
display: flex; /* Flex konténer létrehozása. */
flex-direction: row | column | row-reverse | column-reverse | initial | inherit; /* Fő tengely iránya. */
flex-wrap: nowrap | wrap | wrap-reverse; /* Több sorba törés. */
flex-flow: fd fw; /* Shorthand: flex-direction, flex-wrap */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; /* Igazítás a fő tengely mentén */
align-items: stretch | flex-start | flex-end | center | baseline; /* Igazítás a kereszt tengely mentén */
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly; /* Több sor és flex-wrap: wrap; esetén a sorok igazítása */
gap: 10px; /* Elemek közötti távolság */
row-gap: 10px; /* Sorok közötti távolság */
column-gap: 10px; /* Oszlopok közötti távolság */Flex konténer beállításai. A fő (main) és kereszt (cross) tengely a flex-direction értékétől függ.
order: 1; /* Elemek sorrendje */
flex-grow: 1; /* Növekedési arány (szabad hely elosztása) */
flex-shrink: 1; /* Zsugorodási arány */
flex-basis: length | percentage | auto | initial | inherit; /* Alapméret */
flex: 1 0 auto; /* Shorthand: flex-grow, flex-shrink, flex-basis */
align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Elem egyedi igazítása a kereszt tengely mentén */Flex elemek egyedi beállításai.
display: grid; /* Grid konténer létrehozása. */
grid-template-columns: 100px 200px; /* Oszlopok mérete */
grid-template-columns: repeat(3, 1fr); /* 3 oszlop arányos elosztás */
grid-template-rows: 100px 200px; /* Sorok mérete */
grid-template-rows: repeat(3, 1fr); /* Arányos elosztás a rendelkezésre álló szabad helyből */
/* A grid területek elnevezései, ha a grid-template-colums és a grid-template-rows konzisztens a layouttal */
grid-template-areas:
"header header header "
"sidebar content content "
"footer footer footer ";
grid-auto-flow: row | column | row dense | column dense; /* Grid automatikus elhelyezési viselkedésének beállítása: sorokba, oszlopokba, sűrűn kitöltve */
grid-auto-columns: 100px; /* Automatikus oszlop méret */
grid-auto-rows: 100px; /* Automatikus sor méret */
grid: gtc gtr gta gaf gac gar; /* Shorthand: grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-flow, grid-auto-columns, grid-auto-rows */
justify-items: start | end | center | stretch; /* Igazítás cellán belül (inline tengely mentén) */
align-items: start | end | center | stretch; /* Igazítás cellán belül (block tengely mentén) */
justify-content: start | end | center | stretch; /* Grid igazítása (inline tengely mentén) */
align-content: start | end | center | stretch; /* Grid igazítása (block tengely mentén) */
gap: 10px; /* Távolság cellák között. */
row-gap: 10px; /* Távolság sorok között. */
column-gap: 10px; /* Távolság oszlopok között. */Grid konténer beállításai
grid-row-start:
grid-column-start:
grid-row-end:
grid-column-end:
grid-area: header; /* Területnév hozzárendelése, ha grid-template-areas definiálva van */
grid-area: rs / cs / re / ce; /* Shorthand: row-start, column-start, row-end, column-end */
/* A justify-item és az align-item felülírása elemenként */
justify-self: start | end | center | stretch; /* Igazítás a cellán belül vízszintesen (inline tengely mentén) */
align-self: start | end | center | stretch; /* Igazítás a cellán belül függőlegesen (block tengely mentén) */Grid elemek pozicionálása
float: left; /* Balra lebegtetés */
float: right; /* Jobbra lebegtetés */
float: none; /* Nincs lebegtetés */
/* Példa: szöveg körbefolyás */
img {
float: left;
margin-right: 10px;
}Elem lebegtetése. Régen layouthoz használták, ma inkább szöveg körbefuttatásra. Layouthoz Flexbox vagy Grid ajánlott.
clear: left; /* Nem kerül bal oldali float mellé */
clear: right; /* Nem kerül jobb oldali float mellé */
clear: both; /* Egyik float mellé sem kerül */
/* clearfix minta */
.clearfix::after {
content: "";
display: block;
clear: both;
}Floatolt elemek utáni tördelés szabályozása és a layout helyreállítása.
position: static; /* Alapértelmezett pozíció. */
position: relative; /* Relatív pozíció, a helyétől eltolható. */
position: absolute; /* Abszolút pozíció, a legközelebbi pozícionált őstől eltolható. */
position: fixed; /* Rögzített pozíció, a viewporthoz képest eltolható. */
position: sticky; /* Ragadós pozíció, a scrollozás során egy ponton rögzül. */Elem pozíciójának beállítása.
top: 10px; /* Elem tetejétől való távolság. */
right: 20px; /* Elem jobb oldalától való távolság. */
bottom: 15px; /* Elem aljától való távolság. */
left: 5px; /* Elem bal oldalától való távolság. */Pozícionált elemek helyzetének beállítása.
z-index: 1; /* Pozíció rétegének beállítása. */Elem rétegének beállítása a többi elemhez képest.
visibility: visible; /* Elem látható. */
visibility: hidden; /* Elem láthatatlan, de helyet foglal. */
visibility: collapse; /* Táblázat sorok és oszlopok esetén az elem láthatatlan és nem foglal helyet. */Elem láthatóságának beállítása.
opacity: 1; /* Teljesen átlátszatlan. */
opacity: 0.5; /* Félátlátszó. */
opacity: 0; /* Teljesen átlátszó. */Elem átlátszóságának beállítása.
border: 1px solid black; /* Szegély szélessége, stílusa, színe. */
border-top: 1px solid black; /* Felső szegély. */
border-right: 1px solid black; /* Jobb szegély. */
border-bottom: 1px solid black; /* Alsó szegély. */
border-left: 1px solid black; /* Bal szegély. */
border-width: 1px; /* Szegély szélessége. */
border-style: solid; /* Szegély stílusa. */
border-color: black; /* Szegély színe. */Szegély beállítása az elem körül.
border-radius: 10px; /* Minden sarokra. */
border-radius: 10px 20px; /* Felső bal és alsó jobb, felső jobb és alsó bal. */
border-radius: 10px 20px 30px; /* Felső bal, felső jobb és alsó bal, alsó jobb. */
border-radius: 10px 20px 30px 40px; /* Felső bal, felső jobb, alsó jobb, alsó bal. */
border-top-left-radius: 10px; /* Felső bal sarok. */
border-top-right-radius: 20px; /* Felső jobb sarok. */
border-bottom-right-radius: 30px; /* Alsó jobb sarok. */
border-bottom-left-radius: 40px; /* Alsó bal sarok. */
border-radius: 50%; /* Kör alakú elem létrehozása. */Elem sarkainak lekerekítése.
color-scheme: normal | light | dark | only light | only dark | light dark;Azt jelzi a böngészőnek, hogy az elem világos vagy sötét témához van tervezve. Hatással van az automatikus UI elemekre (pl. input mezők, scrollbár), nem közvetlenül a szöveg színét állítja. JavaScript segítségével felhasználható a 'dark mode' kapcsolójához.