CSS (Cascading Style Sheets) to język odpowiedzialny za wygląd każdej strony internetowej. Podczas gdy HTML buduje strukturę, CSS decyduje o kolorach, czcionkach, układzie elementów, animacjach i responsywności. Znajomość właściwości CSS to umiejętność, bez której nie ma mowy o tworzeniu nowoczesnych interfejsów.
Poniższy słownik zbiera wszystkie właściwości CSS w jednym miejscu. Każdy wpis opisuje działanie właściwości, dostępne wartości oraz zawiera gotowe do użycia przykłady kodu.
Jak działa CSS?
CSS działa na zasadzie reguł. Każda reguła składa się z selektora (który wskazuje, który element HTML ma być ostylowany) oraz bloku deklaracji zawierającego pary właściwość: wartość. Na przykład:
h1 {
color: #1a1a2e;
font-size: 2rem;
font-weight: 700;
line-height: 1.3;
}Właściwości CSS można podzielić na kilka głównych kategorii:
- Typografia —
font-family,font-size,line-height,letter-spacing,text-align - Kolory i tła —
color,background-color,background-image,opacity - Box model —
margin,padding,border,width,height,box-sizing - Layouty —
display,flexbox,grid,position,float - Animacje i przejścia —
transition,animation,transform - Responsywność —
media queries,clamp(),min(),max()
Lista właściwości CSS
Wpisy są ułożone alfabetycznie. Kliknij dowolną właściwość, aby przejść do jej szczegółowego opisu z przykładami, dostępnymi wartościami i wskazówkami praktycznymi.
- a
- abbr
- acronym
- address
- applet
- area
- article
- aside
- audio
- b
- base
- basefont
- bdi
- bdo
- big
- blockquote
- body
- br
- button
- canvas
- caption
- center
- cite
- code
- col
- colgroup
- data
- datalist
- dd
- del
- details
- dfn
- dialog
- dir
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- font
- footer
- form
- frame
- frameset
- h1-h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- label
- legend
- li
- link
- main
- map
- mark
- meta
- meter
- nav
- noframes
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strike
- strong
- style
- sub
- summary
- sup
- svg
- table
- tbody
- td
- template
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- tt
- u
- ul
- var
- video
- wbr
CSS nowoczesny vs. klasyczny
CSS ewoluuje w szybkim tempie. Wiele właściwości, które jeszcze kilka lat temu wymagały prefiksów przeglądarki (-webkit-, -moz-), dziś jest obsługiwanych natywnie. Nowe możliwości, takie jak CSS Grid, Custom Properties (zmienne CSS), Container Queries czy :has() selector, całkowicie zmieniły sposób, w jaki piszemy style.
W każdym wpisie słownikowym znajdziesz informację o poziomie wsparcia przeglądarek, dzięki czemu będziesz wiedzieć, kiedy możesz śmiało używać danej właściwości w produkcji, a kiedy warto przygotować fallback.
Szukasz powiązań między CSS a strukturą HTML? Zajrzyj do naszego słownika tagów HTML i słownika atrybutów HTML — razem tworzą kompletne źródło wiedzy o front-endzie na PoznajProgramowanie.pl.