ZAWODNIK

Kolory, jednostki i tekst w CSS: hex, rgb, hsl, px, em, rem, font i text

INF.03 · teoria
autor: redakcja · 08.09.2026
Jak zapisać kolor nazwą, szesnastkowo, funkcją rgb i hsl, czym różnią się jednostki px, em, rem, procent i vw oraz które właściwości font i text ustawiają krój czcionki, rozmiar, wysokość wiersza i wyrównanie tekstu. Lekcja 4.4 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: cssĆwicz dział: css
War­tość to ta część de­kla­ra­cji CSS, która stoi po dwu­krop­ku: kolor, dłu­gość albo nazwa kroju pisma. Ta sama barwa ma kilka za­pi­sów, więc Blue, #0000FF i rgb(0, 0, 255) dają ten sam nie­bie­ski. W części pi­sem­nej wra­ca­ją py­ta­nia „jaki kolor daje ten zapis", „jak za­pi­sać zie­lo­ny w no­ta­cji skró­co­nej", „którą wła­ści­wo­ścią de­kla­ru­je się krój czcion­ki", „czym uzy­skać wcię­cie pierw­szej linii aka­pi­tu". W za­da­niu prak­tycz­nym arkusz podaje kolory na­zwa­mi CSS i szes­nast­ko­wo, roz­miar czcion­ki na­głów­ka w pro­cen­tach, a wy­so­kość wier­sza w pik­se­lach.

Kolory: nazwa, zapis szes­nast­ko­wy, rgb i hsl

Kolor w CSS to war­tość opi­su­ją­ca barwę, za­pi­sy­wa­na na kilka spo­so­bów pro­wa­dzą­cych do tego samego pik­se­la na ekra­nie.
Nazwa koloru to gotowe słowo ze stan­dar­do­wej listy CSS, li­czą­cej 147 po­zy­cji. Ar­ku­sze CKE ko­rzy­sta­ją z nazw chęt­nie, bo są krót­kie i czy­tel­ne w po­le­ce­niu: DeepSkyBlue, Tomato, Maroon, Teal, DarkSlateGray. Wiel­kość liter nie ma zna­cze­nia, ale nazwę z ar­ku­sza prze­pi­su­je się co do znaku: prze­glą­dar­ka pomija nie­zro­zu­mia­łą de­kla­ra­cję bez ostrze­że­nia.
Zapis szes­nast­ko­wy to krzy­żyk i sześć cyfr sys­te­mu szes­nast­ko­we­go w po­sta­ci #RRGGBB, po dwie cyfry na kanał: czer­wo­ny, zie­lo­ny, nie­bie­ski. Dwie cyfry biegną od 00 do FF, czyli od 0 do 255 dzie­sięt­nie, więc każdy kanał ma 256 po­zio­mów ja­sno­ści.
Zapis skró­co­ny #RGB ma trzy cyfry i każda po­dwa­ja się przy od­czy­cie: #0F0 znaczy #00FF00. Skró­tem za­pi­su­je się wy­łącz­nie kolory, w któ­rych obie cyfry kanału są takie same, więc #FF6347 skrótu nie ma. Uwaga na nazwy: #00FF00 to w CSS Lime, a Green należy do ciem­niej­sze­go #008000, choć py­ta­nia mówią o obu po prostu „zie­lo­ny".
Funk­cja rgb() podaje te same kanały dzie­sięt­nie, po prze­cin­ku: rgb(0, 128, 0). Funk­cja rgba() do­pi­su­je czwar­tą liczbę, prze­zro­czy­stość od 0 do 1, więc rgba(255, 99, 71, 0.5) prze­pusz­cza tło do połowy. To samo daje ośmio­cy­fro­wy zapis #RRGGBBAA, a transparent to kolor cał­ko­wi­cie prze­zro­czy­sty.
Funk­cja hsl() opi­su­je barwę ina­czej niż mie­sza­nie świa­teł: odcień na kole barw w stop­niach od 0 do 360 (0 czer­wo­ny, 120 zie­lo­ny, 240 nie­bie­ski), na­sy­ce­nie w pro­cen­tach (przy 0 pro­cent zo­sta­je sza­rość) i ja­sność w pro­cen­tach (0 pro­cent to czerń, 100 pro­cent biel). hsl(120, 100%, 25%) to ten sam kolor co #008000, roz­ja­śnia­ny samą zmianą trze­ciej liczby.
Prze­li­cze­nie zapisu szes­nast­ko­we­go na dzie­sięt­ny idzie kanał po kanale. W #008000 pierw­sza para to 00, czyli 0 czer­wo­ne­go. Druga para to 80: pierw­sza cyfra stoi na po­zy­cji szes­na­stek, więc 8 razy 16 daje 128 zie­lo­ne­go. Trze­cia para to znowu 00, i stąd rgb(0, 128, 0). Litery A do F znaczą 10 do 15, więc FF to 15 razy 16 plus 15, czyli 255. Ra­chu­nek spraw­dzi kon­wer­ter sys­te­mów licz­bo­wych.
Ekran miesza świa­tła w modelu RGB (czer­wo­ny, zie­lo­ny, nie­bie­ski), a druk farby w modelu CMYK (cyjan, ma­gen­ta, żółty, czarny), więc barwa do­bra­na na mo­ni­to­rze nie wy­cho­dzi na pa­pie­rze tak samo; modele barw opi­su­je dział gra­fi­ka.
Kolor
Zapis szes­nast­ko­wy
Funk­cja rgb
Black
#000000
rgb(0, 0, 0)
White
#FFFFFF
rgb(255, 255, 255)
Red
#FF0000
rgb(255, 0, 0)
Blue
#0000FF
rgb(0, 0, 255)
Lime
#00FF00
rgb(0, 255, 0)
Green
#008000
rgb(0, 128, 0)
Tomato
#FF6347
rgb(255, 99, 71)
DeepSkyBlue
#00BFFF
rgb(0, 191, 255)
Teal
#008080
rgb(0, 128, 128)
Maroon
#800000
rgb(128, 0, 0)
DarkSlateGray
#2F4F4F
rgb(47, 79, 79)
Pu­łap­ka: color usta­wia kolor tekstu, tło ma osobną wła­ści­wość background-color, więc div { color: blue; } daje nie­bie­skie litery na nie­zmie­nio­nym tle.

Jed­nost­ki: px, pro­cent, em, rem, vw

Jed­nost­ka to przy­ro­stek do­pi­sa­ny do liczby, który mówi, wzglę­dem czego mierzy się dłu­gość.
Jed­nost­ki bez­względ­ne mają stały roz­miar. px (piksel) to pod­sta­wo­wa jed­nost­ka ekranu i to jej używa arkusz, pisząc „wy­so­kość banera 80 px" albo „wy­so­kość wier­sza 30 px". Do druku służą pt (punkt ty­po­gra­ficz­ny, jedna sie­dem­dzie­sią­ta druga część cala), cm i in (cal), a w py­ta­niu o jed­nost­kę w punk­tach edy­tor­skich od­po­wie­dzią jest pt.
Jed­nost­ki względ­ne liczą się od czegoś innego i dla­te­go ska­lu­ją się razem ze stroną. % (pro­cent) odnosi się do ele­men­tu nad­rzęd­ne­go: width: 30% daje panel sze­ro­ki na trzy­dzie­ści pro­cent bloku, w którym stoi, a font-size: 150% litery pół­to­ra raza więk­sze. em liczy się od roz­mia­ru czcion­ki tego samego ele­men­tu, więc przy czcion­ce 16 px 2em znaczy 32 px, ale w za­gnież­dżo­nych blo­kach mnoży się z po­zio­mu na poziom. rem liczy się od czcion­ki ele­men­tu html, do­myśl­nie od 16 px, i przy za­gnież­dża­niu się nie zmie­nia. vw i vh to pro­cent sze­ro­ko­ści i wy­so­ko­ści okna prze­glą­dar­ki, więc 100vh daje blok wysoki na cały ekran.
Część war­to­ści pisze się bez jed­nost­ki: line-height: 1.5 znaczy pół­to­ra raza wy­so­kość czcion­ki ele­men­tu, a font-weight: 700 i z-index: 3 to liczby z wła­snej skali. Zero jed­nost­ki nie po­trze­bu­je, więc margin: 0 jest po­praw­ne.
Jed­nost­ka
Li­czo­na wzglę­dem
Przy­kład
px
sta­łe­go pik­se­la ekranu
line-height: 30px
pt
punktu ty­po­gra­ficz­ne­go, zapis do druku
font-size: 12pt
%
war­to­ści ele­men­tu nad­rzęd­ne­go
font-size: 150%
em
roz­mia­ru czcion­ki tego ele­men­tu
padding: 2em
rem
roz­mia­ru czcion­ki ele­men­tu html
font-size: 1.5rem
vw
sze­ro­ko­ści okna prze­glą­dar­ki
width: 50vw
vh
wy­so­ko­ści okna prze­glą­dar­ki
height: 100vh
bez jed­nost­ki
mnoż­ni­ka albo wła­snej skali wła­ści­wo­ści
line-height: 1.5
Pu­łap­ka: między liczbą a jed­nost­ką nie ma spacji. padding: 10px działa, a padding: 10 px i padding: 10 są po­mi­ja­ne; arkusz pisze „10 px" po polsku, w kodzie spacja znika.

Krój i roz­miar: wła­ści­wo­ści font

Wła­ści­wo­ści z przed­rost­kiem font opi­su­ją samo pismo: jakim krojem, jak dużym, jak grubym i czy po­chy­lo­nym za­pi­sa­ny jest tekst.
font-family de­kla­ru­je krój czcion­ki i to ona jest od­po­wie­dzią na py­ta­nie o de­kla­ra­cję kroju. Podaje się listę za­pa­so­wą po prze­cin­ku, bo prze­glą­dar­ka bierze pierw­szy krój do­stęp­ny w sys­te­mie: font-family: Helvetica, Arial, sans-serif; sięga po He­lve­ti­kę, w jej braku po Arial, a gdy nie ma i jej, po do­wol­ny krój bez­sze­ry­fo­wy. Ostat­nia po­zy­cja listy to zawsze ro­dzi­na ogólna: serif (pismo sze­ry­fo­we, z ozdob­ny­mi za­koń­cze­nia­mi kresek), sans-serif (bez­sze­ry­fo­we), monospace (ma­szy­no­we, znaki tej samej sze­ro­ko­ści).
font-size usta­wia roz­miar czcion­ki: dłu­gość (16px, 12pt, 1.2em), pro­cent li­czo­ny od ele­men­tu nad­rzęd­ne­go (150%) albo słowo klu­czo­we ze zbioru xx-small, x-small, small, medium (war­tość do­myśl­na), large, x-large, xx-large, a do tego smaller i larger.
Od­mia­nę pisma zmie­nia­ją trzy wła­ści­wo­ści. font-weight (gru­bość) przyj­mu­je bold albo liczbę, gdzie 400 to gru­bość zwykła, a 700 od­po­wia­da war­to­ści bold. font-style przyj­mu­je normal, italic (kur­sy­wa) i oblique. font-variant: small-caps za­mie­nia małe litery na ka­pi­ta­li­ki, czyli wiel­kie w roz­mia­rze małych. Skrót font mieści to razem w stałej ko­lej­no­ści: font: italic bold 16px/1.5 Arial, sans-serif; daje po­chy­lo­ną i po­gru­bio­ną szes­nast­kę z wy­so­ko­ścią wier­sza pół­to­ra, a części po­mi­nię­te wra­ca­ją do war­to­ści do­myśl­nych.
Krój spoza sys­te­mu użyt­kow­ni­ka trzeba do­star­czyć ze stroną: reguła @font-face nadaje własną nazwę pli­ko­wi czcion­ki wska­za­ne­mu przez src, a Google Fonts daje gotowy od­no­śnik do sekcji na­głów­ko­wej i nazwę do font-family.

Wygląd tekstu: wła­ści­wo­ści text i po­krew­ne

Wła­ści­wo­ści z przed­rost­kiem text opi­su­ją nie samo pismo, tylko uło­że­nie i ozdo­bie­nie tekstu w bloku, a razem z nimi chodzą color, line-height, letter-spacing i word-spacing.
text-align wy­rów­nu­je tekst w po­zio­mie: left, right, center (wy­środ­ko­wa­nie, o które prosi arkusz zda­niem „tekst wy­środ­ko­wa­ny") oraz justify (wy­ju­sto­wa­nie, czyli wy­rów­na­nie do obu kra­wę­dzi). text-decoration do­kła­da linię: underline (pod­kre­śle­nie), overline (nad­kre­śle­nie), line-through (prze­kre­śle­nie) albo none, którym zdej­mu­je się do­myśl­ne pod­kre­śle­nie od­no­śni­ków w menu. text-transform zmie­nia wiel­kość liter: uppercase (same wiel­kie), lowercase (same małe), capitalize (wielka pierw­sza litera każ­de­go wyrazu). text-indent robi wcię­cie pierw­szej linii aka­pi­tu, a text-shadow rysuje cień liter.
Od­stę­py mają trzy osobne wła­ści­wo­ści i to one mylą się naj­czę­ściej. line-height to wy­so­kość wier­sza, letter-spacing roz­su­wa po­je­dyn­cze znaki, dając efekt roz­strze­le­nia liter, a word-spacing usta­wia od­stę­py między wy­ra­za­mi.
vertical-align wy­rów­nu­je w pionie, ale działa tylko w ko­mór­kach tabeli i w ele­men­tach li­nio­wych: przyj­mu­je top, middle, bottom, baseline (linia pisma) oraz sub i super, czyli indeks dolny i górny. white-space: nowrap za­bra­nia ła­ma­nia tekstu na ko­lej­ne wier­sze.
Wła­ści­wość
Znaczy
Przy­kła­do­we war­to­ści
color
kolor liter
#222, Tomato, rgb(255, 0, 0)
text-align
wy­rów­na­nie w po­zio­mie
left, center, right, justify
text-decoration
linia dodana do tekstu
underline, overline, line-through, none
text-transform
wiel­kość liter
uppercase, lowercase, capitalize
text-indent
wcię­cie pierw­szej linii
30px, 2em
text-shadow
cień liter
2px 2px 4px Gray
line-height
wy­so­kość wier­sza
30px, 1.5, 150%
letter-spacing
od­stę­py między li­te­ra­mi
2px, 0.1em
word-spacing
od­stę­py między wy­ra­za­mi
10px
vertical-align
wy­rów­na­nie w pionie w ko­mór­ce
top, middle, bottom, sub, super
white-space
ła­ma­nie wier­szy
normal, nowrap

Styl tekstu w skle­pie

Arkusz opi­su­je wygląd zdanie po zdaniu, więc każde zdanie za­mie­nia się w jedną de­kla­ra­cję. Sklep kom­pu­te­ro­wy z działu o znacz­ni­kach sekcji do­sta­je krój He­lve­ti­ca, po­więk­szo­ny na­głó­wek, menu bez pod­kre­śleń i wy­środ­ko­wa­ną tabelę cen.
body { font-family: Helvetica, Arial, sans-serif; color: #222; } h1 { font-size: 150%; } nav a { text-decoration: none; text-transform: uppercase; } td { text-align: center; letter-spacing: 2px; }
body niesie krój i kolor tekstu w dół drzewa do­ku­men­tu, bo obie wła­ści­wo­ści są dzie­dzi­czo­ne, więc „krój He­lve­ti­ca dla wszyst­kich se­lek­to­rów" wy­star­czy za­pi­sać raz. h1 do­sta­je 150 pro­cent, czyli pół­to­ra raza więcej niż tekst wokół, a nie 150 pik­se­li. nav a zdej­mu­je do­myśl­ne pod­kre­śle­nie od­no­śni­ków i po­ka­zu­je po­zy­cje menu wiel­ki­mi li­te­ra­mi, choć w kodzie HTML stoją na­pi­sa­ne nor­mal­nie: text-transform zmie­nia wygląd, nie treść. td środ­ku­je za­war­tość ko­mó­rek tabeli cen i roz­su­wa znaki, dzięki czemu ceny czy­ta­ją się cyfra po cyfrze.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o war­to­ści mają kilka sta­łych kształ­tów. Kolor szes­nast­ko­wy do roz­po­zna­nia: #0000FF to nie­bie­ski, bo pełny jest wy­łącz­nie ostat­ni kanał, a #008000 po prze­li­cze­niu daje rgb(0, 128, 0). Zie­lo­ny w no­ta­cji skró­co­nej to #0F0, bo #F00 jest czer­wo­ny, #00F nie­bie­ski, a #FFF biały. Kolor z krzy­ży­kiem i sze­ścio­ma zna­ka­mi jest za­pi­sa­ny szes­nast­ko­wo, a nie dzie­sięt­nie ani w modelu CMYK. Wła­ści­wość do wska­za­nia po opisie: krój czcion­ki de­kla­ru­je font-family (nie font-style ani font-face), po­gru­bie­nie daje font-weight (nie text-weight), kolor liter zmie­nia color, wcię­cie pierw­szej linii aka­pi­tu na 30 pik­se­li to p { text-indent: 30px; }, za­mia­nę pierw­szych liter wszyst­kich wy­ra­zów na wiel­kie daje capitalize, od­stę­py między wy­ra­za­mi usta­wia word-spacing, a roz­strze­le­nie liter letter-spacing. Py­ta­nie o zbiór war­to­ści: text-decoration przyj­mu­je underline, overline i line-through, a font-size słowa klu­czo­we od xx-small do xx-large. Zapis font-family: Arial, Helvetica, sans-serif; daje tekst czcion­ką bez­sze­ry­fo­wą, bo o ro­dza­ju pisma mówi ro­dzi­na ogólna na końcu listy.
Dwie od­po­wie­dzi mylą się re­gu­lar­nie. text-align wy­rów­nu­je w po­zio­mie, a vertical-align w pionie i tylko w ko­mór­kach tabeli oraz ele­men­tach li­nio­wych, więc wy­środ­ko­wa­nie w pionie w ko­mór­ce to vertical-align: middle, a text-align: middle nie ist­nie­je. Druga po­mył­ka to line-height, letter-spacing i word-spacing pod­sta­wia­ne jedno za drugie: odstęp między wier­sza­mi, między zna­ka­mi, między wy­ra­za­mi.
W za­da­niu prak­tycz­nym po­le­ce­nie prze­kła­da się zdanie po zdaniu. „Roz­miar czcion­ki na­głów­ka 150 pro­cent" to font-size: 150%, a nie 150px. „Krój He­lve­ti­ca dla wszyst­kich se­lek­to­rów" za­pi­su­je się raz, w regule dla body albo dla se­lek­to­ra uni­wer­sal­ne­go *. „Wy­so­kość wier­sza 30 px" to line-height: 30px, a „tekst wy­środ­ko­wa­ny" to text-align: center. Kolory prze­pi­su­je się z ar­ku­sza w po­da­nej po­sta­ci, razem z krzy­ży­kiem, bo 00838F bez niego ko­lo­rem nie jest, a cały styl idzie do ze­wnętrz­ne­go pliku, nie do atry­bu­tu style, który kosz­tu­je punkt za re­zul­tat „styl CSS wi­try­ny in­ter­ne­to­wej".

Ściąga

Zapis
Znaczy
color: Tomato
kolor tekstu podany nazwą CSS
#RRGGBB
kolor szes­nast­ko­wo, po dwie cyfry na kanał, od 00 do FF
#0F0
zapis skró­co­ny, każda cyfra po­dwo­jo­na, tu #00FF00
rgb(0, 128, 0)
ten sam kolor dzie­sięt­nie, kanały od 0 do 255
rgba(255, 99, 71, 0.5)
kolor z prze­zro­czy­sto­ścią od 0 do 1
hsl(120, 100%, 25%)
odcień w stop­niach, na­sy­ce­nie, ja­sność
font-size: 150%
roz­miar czcion­ki li­czo­ny od ele­men­tu nad­rzęd­ne­go
font-family: Arial, sans-serif
krój czcion­ki z krojem za­pa­so­wym i ro­dzi­ną ogólną
font-weight: bold
po­gru­bie­nie, od­po­wied­nik war­to­ści 700
line-height: 30px
wy­so­kość wier­sza
text-align: center
wy­rów­na­nie tekstu w po­zio­mie
text-decoration: none
zdję­cie pod­kre­śle­nia od­no­śni­ka
text-transform: capitalize
wielka pierw­sza litera każ­de­go wyrazu
text-indent: 30px
wcię­cie pierw­szej linii aka­pi­tu
word-spacing: 10px
od­stę­py między wy­ra­za­mi
vertical-align: middle
wy­rów­na­nie w pionie w ko­mór­ce tabeli
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Pseudoklasy i pseudoelementy: hover, nth-child, first-letter, beforenastępna: Model pudełkowy: margin, border, padding, width i box-sizingspis działu: CSS

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.