CSS
/*….*/ - komentarze w CSS
Style są kaskadowe – dziedziczą właściwości
Sposoby dodawania styli:
-dodwanie inline – wewnątrz taga
-dodawanie w sekcji <style> przed zamknięciem <head>
-jw., ale przez umieszczanie tu linku do pliku, w którym trzymamy całe ostylowanie
SKŁADNIA:
1.
< nazwa taga + style = ”klucz:wartość”;> </zamknięcie taga>
<p style = background-color:, color:, font-family:, font-size:, font-weight:, padding: …px, margin: … px > </p>(pary klucz:wartość, każdy w nowej linii, zamknięty średnikiem)
2.
nazwa taga, nazwa taga{”klucz: wartość; klucz: wartość;”} np.
body {”color: red; ”}
(może być wicej tagow)
3.
kropka moja nazwa klasy np. .tablestyle1
W tagu w HTML piszemy < p class = "nazwa klasy nazwa klasy (może być ich więcej)";> </p>
4.
# nazwa elemntu id {”klucz: wartość; klucz: wartość; itd.”}
SELEKTORY:
typów – zmienia wg typu taga,
struktury np. strong, em
klas – wybiera wszystkie elementy danej klasy
po id-zmienia konkretny element po unikalnym id
UWAGA JEST TEŻ SELEKTOR UNIWERSALNY – działający na wszystkie elementy:
*{….} (zaczyna od przypisania się do taga dotyczącego języka) – ustawia się go na początku jako punkt wyjścia do kolejnych zmian, można też użyć tego zapisu jako resetu zapisanych styli – zresetuje domyślne ustawienia przeglądarki
UWAGA: najważniejsze będą: style inline, potem inne w pliku, potem zewnętrzne,
Style inline używa się rzadko, bo nie są reużywalne
!Important – dodane na końcu stylu wymusza zmianę, nadaje ważność,
selector {
właściwość: wartość !important;
}Kolejność ostylowywanych elementów w tagu body nie ma znaczenia (?)
Można np. klasami ostylować box (span jest inline, nie rozpycha się, a box tak);
box ma atrybuty: width, height, backgroud-color, border: 2 px, solid, darkblue
PSEUDOKLASY
/*
:hover (po najechaniu),
:active (podczas kliknięcia),
:focus (ma fokus),
:visited (odwiedzony link),
:link (nieodwiedzony link),
:first-child (pierwszy dziecko),
:last-child (ostatni dziecko),
:nth-child(n) (n-te dziecko),
:not() (negacja). Pseudo-elements tworzą i stylują części elementu:
::before (przed treścią), ::after (po treści),
::first-line (pierwsza linia),
::first-letter (pierwsza litera),
::selection (zaznaczony tekst).
Pseudoklasy i pseudoelementy pozwalają reagować na zachowanie użytkownika (np. kliknięcie, najechanie myszą) albo stylować konkretne fragmenty elementu (np. pierwszą literę, zaznaczony tekst). Pseudoklasa w CSS automatycznie odnosi się do stanu elementu w HTML.
PSEUDOKLASY opisują stan elementu lub jego pozycję w strukturze dokumentu.
Zawsze zaczynają się od jednego dwukropka :
:hover — po najechaniu kursorem myszy
Stosowana np. do przycisków, linków, obrazków.
:active — w momencie kliknięcia
Styl obowiązuje tylko w chwili naciskania przycisku myszy.
:focus — gdy element ma fokus (jest aktywny)
Dotyczy np. pola tekstowego, w które użytkownik kliknął lub przeniósł się tabulatorem.
:link — nieodwiedzony link
Dotyczy linków (<a href="...">), które jeszcze nie zostały kliknięte.
:visited — odwiedzony link
Dotyczy linków, które użytkownik już odwiedził.
Przeglądarka zapamiętuje historię klikniętych adresów i zmienia kolor zgodnie ze stylem.
:first-child — pierwszy element wśród rodzeństwa
Ustawia pogrubienie dla pierwszego elementu listy.
:last-child — ostatni element wśród rodzeństwa
Styluje ostatni element listy.
:nth-child(n) — n-ty element wśród rodzeństwa
Pozwala wybrać konkretny element (lub co któryś).
li:nth-child(2) { color: red; } /* Drugi element */
li:nth-child(odd) { background: #eee; } /* Wszystkie nieparzyste */
li:nth-child(even){ background: #ddd; } /* Wszystkie parzyste */
:not(selector) — negacja
Wybiera wszystkie elementy, które NIE pasują do wskazanego selektora.
p:not(.important) {
color: gray;
}TU Wszystkie akapity bez klasy .important będą szare.
PSEUDOELEMENTY
Pseudoelementy pozwalają stylować część elementu, np. pierwszą literę lub tekst przed/po treści.
Zaczynają się od dwóch dwukropków :: (choć starsze przeglądarki akceptują też jeden :).
::before — zawartość przed treścią elementu/ ::after (po treści elementu)
Wstawia dodatkową treść na początku lub końcu (wtedy ::after) elementu.
p::before {
content: "💬 ";
}
Doda ikonkę przed każdym akapitem.
::first-line — pierwsza linia tekstu
Styluje tylko pierwszą linię akapitu (zależną od szerokości okna).
::selection — zaznaczony tekst
Styluje tekst zaznaczony przez użytkownika (np. myszką).
Szybka ściąga:
|
Typ |
Pseudoklasa / Pseudoelement |
Co robi |
|
🎯 Pseudoklasy |
:hover |
Najechanie myszką |
|
:active |
Kliknięcie elementu |
|
|
:focus |
Element ma fokus (np. input) |
|
|
:link |
Link nieodwiedzony |
|
|
:visited |
Link odwiedzony |
|
|
:first-child |
Pierwszy element wśród rodzeństwa |
|
|
:last-child |
Ostatni element |
|
|
:nth-child(n) |
N-ty element |
|
|
:not() |
Element, który nie spełnia warunku |
|
|
✨
Pseudoelementy |
::before |
Treść przed elementem |
|
::after |
Treść po elemencie |
|
|
::first-line |
Pierwsza linia tekstu |
|
|
::first-letter |
Pierwsza litera |
|
|
::selection |
Tekst zaznaczony przez użytkownika |
INNE ZAAWANSOWANE SELEKTORY
A. Atrybutów
- [attr], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr*=value]
B. Relacyjne
- A B, A > B, A + B, A ~ B, A || B
| Typ selektora | Przykład | Znaczenie / Działanie |
|---|
[attr]attr, bez względu na jego wartość[attr=value] | Wybiera elementy, których atrybut attr ma dokładnie wartość value |
[attr~=value] | Wybiera elementy, których atrybut attr zawiera słowo value (oddzielone spacją) |
[attr^=value] | Wybiera elementy, których atrybut attr zaczyna się od value |
[attr$=value] | Wybiera elementy, których atrybut attr kończy się na value |
[attr*=value] | Wybiera elementy, których atrybut attr zawiera w sobie value |
A > B | Wybiera elementy B, które są bezpośrednimi dziećmi elementu A |
A + B | Wybiera element B, który bezpośrednio następuje po elemencie A (sąsiad) |
A ~ B | Wybiera wszystkie elementy B, które następują po elemencie A w tym samym rodzicu |
A B |
przykłady:
h2 + p {..} pierwszy akapit po nagłówku
h3 ~ p wszystkie h3, które są w p
[disabled] {…} – styl dla wyłączonych elementów, tagów, które posiadają ten atrybut
[class* = ”btn”] {…} – wszystkie klasy, które zaczynają się od btn
operatory dopasowania części wartości atrybutu (można np. linki ostylować wg tego):
|
Składnia |
Znaczenie |
Przykład |
|
[attr^="value"] |
Wartość zaczyna się od "value" |
[href^="https"] – linki zaczynające
się od https |
|
[attr$="value"] |
Wartość kończy się na "value" |
[href$=".pdf"] – linki kończące się
na .pdf |
|
[attr*="value"] |
Wartość zawiera "value" w
środku |
[title*="ważne"] – elementy, których
title zawiera słowo „ważne” |
Bazowe selektory atrybutu:
/* [attr] - ma atrybut */
[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
/* [attr="value"] - dokładna wartość */
[type="text"] {
border: 2px solid blue;
padding: 5px;
}
Zmienne w CSS (nazywane też custom properties) to wartości, które możesz zdefiniować raz, a potem wielokrotnie wykorzystywać w całym stylesheet. Działają podobnie jak zmienne w językach programowania – pozwalają uniknąć powtarzania kodu i ułatwiają zarządzanie stylami.
Zmienne tworzy się przy użyciu składni:
--nazwa-zmiennej: wartość;
A żeby użyć zmiennej, korzystasz z funkcji:
var(--nazwa-zmiennej);
Gdzie definiować zmienne?
Najczęściej w :root — dzięki temu są dostępne globalnie:
:root { --primary-color: #3498db; --font-size-base: 16px; --padding-standard: 1rem;
}
:root = najwyższy element dokumentu (html), ma największą specyficzność dla zmiennych i pozwala na łatwe zarządzanie stylami całej strony.
Zmienne w CSS pozwalają:
nie powtarzać kolorów/paddingów/fonts,
łatwo modyfikować wygląd całej strony,
tworzyć jasny/ciemny motyw,
dynamicznie zmieniać style z poziomu JavaScript.
można je nadpisywać lokalnie w konkretnej klasie stylu
CZCIONKI cz.1
Font-family: to lista czcionek w kolejności preferencji, rozdzielona przecinkami (przeglądarka używa pierwszej dostępnej czcionki), jeżeli nazwa zawiera spacje – musi być ujęta w cudzysłów
Czcionki serif-font – z ozdobnikami, sans-serif-font – bez ozdobników, monospace-font – każda litera ma tą samą szerokość
Font-size: 16 px – możemy podawać w px, jako mnożnik em lub rem (mnożenie wielkości bazowej rodzica lub root (<html>) lub w procentach – względem rodzica
Minimalna grubość:100, max.900; nie każda czcionka ma pełną gamę grubości
Porównanie em vs rem
|
Cecha |
em |
rem |
|
Odnosi się do |
czcionki rodzica |
czcionki elementu <html> |
|
Zagnieżdżenie |
Może się „mnożyć” |
Zawsze stały |
|
Użycie |
Lokalnie, wewnątrz komponentów |
Globalnie, spójny rozmiar na całej stronie |
|
Przykład |
1.5em (zależny) |
1.5rem (stały) |
Grubość czcionki: font-weight: normal(lub 400), bold(lub 700), leighter (względem rodzica)
Styl czcionki: font-style: normal, italic
Wysokość linii/interlinia: line-hight:1.2 (ciasno),1.6 (normalnie),2 (luźne)
Fonty możemy ściągnąć lub linkować i nazywać rodzinę fontu
- Wszystkie właściwości dotyczące fontów w CSS
| Właściwość | Opis |
|---|---|
| font | Skrót do ustawiania kilku właściwości czcionki naraz. |
| font-family | Krój pisma (np. Arial, serif, custom fonts). |
| font-size | Rozmiar czcionki (px, em, rem itd.). |
| font-weight | Grubość czcionki (normal, bold, 100–900). |
| font-style | Styl czcionki (normal, italic, oblique). |
| font-variant | Warianty stylistyczne (np. small-caps). |
| font-stretch | Rozciągnięcie czcionki (condensed, expanded lub procenty). |
| font-synthesis | Czy przeglądarka może syntetycznie wygenerować bold/italic. |
| font-kerning | Włączanie kerningu (auto, normal, none). |
| font-feature-settings | Włączanie funkcji OpenType (np. "liga", "smcp"). |
| font-variation-settings | Ustawienia osi dla fontów zmiennych (variable fonts). |
| line-height | Wysokość linii tekstu. |
| letter-spacing | Odstęp między literami. |
| word-spacing | Odstęp między słowami. |
| text-rendering | Optymalizacja renderowania tekstu (auto, optimizeLegibility itd.). |
| font-optical-sizing | Automatyczne dopasowanie optyczne w variable fonts. |
| font-size-adjust | Dopasowanie wysokości x-liter do rozmiaru czcionki. |
Zapisywanie kolorów
HEX, RGB (czrwony, zielony, niebieski) – do tego możemy dodać kanał (RGBA)alfa – przeźroczystość, dopisując wartość procentową do nazwy np.0.5 (tj 50 %)
HSL (hue,saturation,lightness czyli: odcień, nasycenie, jasność)
Kolory predefiniowane w CSS (jest cała gama, dobrze działająca niezależnie od kalibracji ekrnu)
W class= możemy wymieniać kilka stylów np. class= ”color-box keyward-named”
Atrybut background:
{ background color: tu numer HEX; padding: 100 px;}
{ background-image url:(‘tu link, info o szerokości, wysokości, wypełnieniu’); backround-repeat: no-repeat, padding:100 px;}
{ bacground:linear-gradient / radial-gradient (tu w którą stronę, wymieniamy kolory)
|
Właściwość |
Znaczenie |
|
background-image |
obraz w tle
(tutaj w formacie SVG zakodowany w URL) |
|
background-repeat: no-repeat; |
nie
powtarzaj tła |
|
background-position: center; |
wyśrodkuj
tło |
|
background-size: cover; |
dopasuj
rozmiar, żeby wypełniało cały element |
Dla background można używać funkcji:
linear-gradient()– gradient linearny, radial-gradient() – gradient promieniowy
np. background: linear-gradient(red, blue);
Elementy w tle można też rysować/programować jako svg bezpośrednio na stronie
.bg-cover { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="%2327ae60"/></svg>') no-repeat center / cover; height: 200px; }Dlaczego to się robi?
· Nie trzeba ładować zewnętrznego pliku SVG → szybciej się wczytuje.
· Przydatne do ikon, placeholderów, dekoracji.
· Można łatwo zmieniać kolor SVG w kodzie CSS (wystarczy zmienić fill).
Jednostki wpływające na responsywność
|
Jednostka / funkcja |
Znaczenie |
Przykład |
Efekt |
|
vw |
procent szerokości okna |
3vw |
3% szerokości viewportu |
|
vh |
procent wysokości okna |
50vh |
połowa wysokości ekranu |
|
calc() |
obliczenia w CSS |
calc(100% - 40px) |
pełna szerokość minus 40 px |
|
Klasa |
Co robi |
Użycie |
|
.unit-vw |
font-size: 3vw; |
elastyczny
rozmiar tekstu względem szerokości ekranu |
|
.unit-vh |
height: 50vh; |
elastyczna
wysokość względem okna przeglądarki |
|
.unit-calc |
width: calc(100% - 40px); |
obliczana
szerokość (mieszanie jednostek) |
Box Model składa się z 4 części:
- Content - rzeczywista treść (width × height)
- Padding - przestrzeń wewnętrzna wokół contentu
- Border - obramowanie wokół padding
- Margin - przestrzeń zewnętrzna wokół border
Obliczanie rozmiaru (content-box):
Całkowita szerokość = width + padding-left + padding-right + border-left + border-right
W tym przykładzie: 200 + 20 + 20 + 5 + 5 = 250px
Margin NIE jest wliczany do rozmiaru elementu!
--
Padding: wartości zapisujemy w px po przecinku, zgodnie z ruchem wskazówek zegara (góra, prawo, dolna, lewo); wpisanie jednej wartości = taki sam padding z każdej strony; możemy też ustawiać każdą wartość osobno np. padding-bottom (podobnie ustawia się marginesy i ramki - borders)
Margin – jest zawsze przeźroczysty – pokazauje tło
Margines auto – ustawia maksymalne marginesy dla elementu
--
„Collapse” marginesów (po polsku: zapadanie, łączenie marginesów) to mechanizm w CSS, w którym sąsiadujące marginesy pionowe łączą się w jeden, zamiast sumować swoje wartości.
Działa to tylko dla marginesów pionowych: margin-top i margin-bottom.
Margin collapse to:
- mechanizm automatycznego łączenia marginesów pionowych,
- występuje między sąsiadującymi blokami, rodzicem i dzieckiem oraz w pustych elementach,
- wynikowy margines to wartość większego marginesu,
- można temu zapobiec przez padding, border, overflow lub używanie flex/grid.
--
Standardowo boxy są wymiarowane do zawartości/contentu, ale możemy np. chcieć, żeby wymiarowanie boxu zawierało w sobie odstępy i border wtedy:
Box-sizing: border-box – jest bardziej przewidywalny jeśli chodzi o wymiary, warto go używać – łatwiej skalować np. cały obiekt względem rodzica czy szerokości okna
Warto na starcie strony zrobić tzw. reset – pod tytułem dokumentu w head:
Z bazowego resetu można zrobić sobie snippeta
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box; /* pomaga w układach z paddingiem i szerokością */
}
Min-width, max-height
Min-height, max-height
- jeśli jakiś element (tj. boxu) ma się nie zmniejszać lub nie zwiększać bardziej niż… - pozwalają stworzyć przewidywalny layout
W przeglądarce – zbadaj/F12 w computed można zobaczyć wzór naszego boxu
TABELA – Właściwości Box Model i ich wartości
| Właściwość | Możliwe wartości | Opis |
|---|---|---|
| display | block, inline, inline-block, flex, inline-flex, grid, inline-grid, table, inline-table, list-item, none, contents, run-in, flow-root | Określa sposób wyświetlania elementu. |
| position | static, relative, absolute, fixed, sticky | Określa sposób pozycjonowania. |
| top / right / bottom / left | wartości długości (px, em, %), auto | Przesunięcia dla elementów pozycjonowanych. |
| z-index | liczba, auto | Kolejność nakładania elementów. |
| overflow | visible, hidden, scroll, auto, clip | Kontrola, co dzieje się z zawartością wychodzącą poza box. |
| overflow-x | visible, hidden, scroll, auto, clip | Nadpisuje overflow w osi X. |
| overflow-y | visible, hidden, scroll, auto, clip | Nadpisuje overflow w osi Y. |
| box-sizing | content-box, border-box | Kontroluje, czy padding i border wchodzą do wymiarów elementu. |
| width | długości (px, em, %, vw), auto, min-content, max-content, fit-content | Szerokość elementu. |
| min-width | długości, %, auto | Minimalna szerokość. |
| max-width | długości, %, none | Maksymalna szerokość. |
| height | długości, %, auto, min-content, max-content, fit-content | Wysokość elementu. |
| min-height | długości, %, auto | Minimalna wysokość. |
| max-height | długości, %, none | Maksymalna wysokość. |
| margin | długości (px, em), %, auto | Ustawia margines zewnętrzny. |
| margin-top / margin-right / margin-bottom / margin-left | długości, %, auto | Pojedyncze marginesy. |
| padding | długości (px, em), % | Wewnętrzny odstęp od krawędzi. |
| padding- (4 strony)* | długości, % | Pojedyncze paddingi. |
| border | border-width + border-style + border-color | Skrót dla obramowania. |
| border-width | thin, medium, thick, długości | Grubość obramowania. |
| border-style | solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden | Styl obramowania. |
| border-color | kolor, transparent | Kolor obramowania. |
| border-radius | długości (px, %) | Zaokrąglenie narożników. |
| outline | podobne do border, ale nie wpływa na rozmiar | Obramowanie zewnętrzne. |
| outline-style | jak border-style | Styl konturu. |
| outline-color | kolor | Kolor konturu. |
| outline-width | długości | Grubość konturu. |
| outline-offset | długości | Odstęp między obrysem a elementem. |
| box-shadow | none, wartości cieni: offset-x offset-y blur spread color | Cień elementu. |
| opacity | 0–1 | Przezroczystość. |
| visibility | visible, hidden, collapse | Widoczność bez usuwania miejsca elementu. |
Wyjaśnienie wybranych:
overflow: auto; /* Scroll gdy za dużo contentu */
- jeśli wcześniej oznaczymy maksymalną, nieprzekraczalną wysokość
Różnica Flex vs Grid — krótko:
| Cecha | Flexbox | Grid |
|---|---|---|
| Typ układu | 1D (jednowymiarowy) | 2D (dwuwymiarowy) |
| Pracuje na | osi głównej i pobocznej | kolumnach i wierszach |
| Idealny do | ułożenia elementów w linii | budowy całych layoutów |
| Rozmieszczenie | automatyczne | precyzyjne |
| Zmiana kolejności | bardzo łatwa | możliwa |
| Obsługa przerw | gap | gap, row-gap, column-gap |
TABELA: Flexbox — właściwości i wartości
| Właściwość | Wartości | Co robi? |
|---|---|---|
| display | flex, inline-flex | Włącza Flexbox. |
| flex-direction | row, row-reverse, column, column-reverse | Kierunek osi głównej. |
| flex-wrap | nowrap, wrap, wrap-reverse | Czy elementy mają się łamać. |
| flex-flow | skrót: direction + wrap | Połączenie dwóch właściwości. |
| justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly | Wyrównanie na osi głównej. |
| align-items | flex-start, flex-end, center, baseline, stretch | Wyrównanie na osi poprzecznej. |
| align-content | flex-start, flex-end, center, space-between, space-around, stretch | Wyrównuje w osi poprzecznej przy wielu liniach. |
| gap | długości (px, rem) | Odstęp między elementami. |
| row-gap | długości | Odstęp między wierszami. |
| column-gap | długości | Odstęp między kolumnami. |
| order | liczby | Kolejność elementów. |
| flex-grow | liczby (0–n) | Jak bardzo element rośnie. |
| flex-shrink | liczby | Jak bardzo się kurczy. |
| flex-basis | auto, długości | Bazowy rozmiar przed podziałem przestrzeni. |
| flex | skrót (grow shrink basis) | Najczęściej flex: 1. |
| align-self | jak align-items | Nadpisuje wyrównanie tylko dla jednego elementu. |
TABELA: GRID — właściwości i wartości
| Właściwość | Wartości | Opis |
|---|---|---|
| display | grid, inline-grid | Włącza Grid. |
| grid-template-columns | np. 200px 1fr 2fr, repeat(3, 1fr) | Definicja kolumn. |
| grid-template-rows | długości, fr, repeat | Definicja wierszy. |
| grid-template-areas | nazwy obszarów | Tworzy layout oparty o nazwy. |
| grid-area | nazwa lub start–end | Przypisanie elementu do obszaru. |
| grid-column | start / end | Rozciągnięcie elementu w kolumnach. |
| grid-row | start / end | Rozciągnięcie elementu w wierszach. |
| grid-auto-columns | długości, fr | Kolumny tworzone automatycznie. |
| grid-auto-rows | długości, fr | Wiersze tworzone automatycznie. |
| grid-auto-flow | row, column, dense | Automatyczne rozmieszczanie elementów. |
| justify-items | start, end, center, stretch | Wyrównanie zawartości w komórkach (oś X). |
| align-items | j.w. | Wyrównanie w osi Y. |
| place-items | skrót: align + justify | Ułatwienie. |
| justify-content | start, end, center, space-between, space-around, space-evenly | Wyrównanie całej siatki w poziomie. |
| align-content | j.w. | Wyrównanie całej siatki w pionie. |
| gap | długości | Odstępy w gridzie. |
| row-gap | długości | Odstęp między wierszami. |
| column-gap | długości | Odstęp między kolumnami. |
Kiedy używać Flexboxa, a kiedy Grida?
| Potrzebujesz… | Użyj Flexbox | Użyj Grid |
|---|---|---|
| prostego układu w jednym rzędzie/kolumnie | ✔ | – |
| centrowania elementów | ✔ | ✔ |
| skomplikowanego layoutu 2D | – | ✔ |
| obszarów o stałych proporcjach | ✔ | ✔ |
| pełnej kontroli nad kolumnami i wierszami | – | ✔ |