{"id":1282,"date":"2026-04-17T16:40:56","date_gmt":"2026-04-17T14:40:56","guid":{"rendered":"https:\/\/trzykody.pl\/?p=1282"},"modified":"2026-04-17T16:40:57","modified_gmt":"2026-04-17T14:40:57","slug":"podstawy-css-dla-poczatkujacych","status":"publish","type":"post","link":"https:\/\/trzykody.pl\/index.php\/2026\/04\/17\/podstawy-css-dla-poczatkujacych\/","title":{"rendered":"Podstawy CSS dla pocz\u0105tkuj\u0105cych"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">HTML bez styl\u00f3w jest jak dokument techniczny bez formatowania \u2013 wszystko jest poprawne, ale trudne w odbiorze. CSS wprowadza warstw\u0119 prezentacji, pozwalaj\u0105c oddzieli\u0107 struktur\u0119 od wygl\u0105du i kontrolowa\u0107 szczeg\u00f3\u0142y wizualne z dok\u0142adno\u015bci\u0105 do pojedynczego piksela. W praktyce oznacza to mo\u017cliwo\u015b\u0107 zarz\u0105dzania typografi\u0105, uk\u0142adem, kolorami i responsywno\u015bci\u0105 bez modyfikowania samego HTML, co w d\u0142u\u017cszej perspektywie oszcz\u0119dza czas i ogranicza chaos w projekcie. Ten materia\u0142 porz\u0105dkuje <strong>podstawy CSS dla pocz\u0105tkuj\u0105cych<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Spis Tre\u015bci<\/h2><nav><ol><li><a href=\"#podstawy-css-dla-poczatkujacych-i-sposob-dzialania-selektorow-oraz-mechanizmu-dopasowania-regul-do-elementow-dom\">Podstawy CSS dla pocz\u0105tkuj\u0105cych i spos\u00f3b dzia\u0142ania selektor\u00f3w oraz mechanizmu dopasowania regu\u0142 do element\u00f3w DOM<\/a><\/li><li><a href=\"#podstawy-css-dla-poczatkujacych-i-zrozumienie-kaskady-dziedziczenia-oraz-specyficznosci-regul-w-praktyce\">Podstawy CSS dla pocz\u0105tkuj\u0105cych i zrozumienie kaskady, dziedziczenia oraz specyficzno\u015bci regu\u0142 w praktyce<\/a><\/li><li><a href=\"#model-pudelkowy-css-i-jego-wplyw-na-uklad-elementow-w-przegladarce-oraz-obliczanie-rzeczywistych-wymiarow\">Model pude\u0142kowy CSS i jego wp\u0142yw na uk\u0142ad element\u00f3w w przegl\u0105darce oraz obliczanie rzeczywistych wymiar\u00f3w<\/a><ol><li><a href=\"#podstawy-css-dla-poczatkujacych-i-praktyczne-zastosowanie-wlasciwosci-do-budowy-ukladow-stron-oraz-kontroli-rozmieszczenia-elementow\">Podstawy CSS dla pocz\u0105tkuj\u0105cych i praktyczne zastosowanie w\u0142a\u015bciwo\u015bci do budowy uk\u0142ad\u00f3w stron oraz kontroli rozmieszczenia element\u00f3w<\/a><\/li><\/ol><\/li><li><a href=\"#typografia-kolory-i-jednostki-w-css-oraz-ich-wplyw-na-czytelnosc-i-responsywnosc-interfejsu-uzytkownika\">Typografia, kolory i jednostki w CSS oraz ich wp\u0142yw na czytelno\u015b\u0107 i responsywno\u015b\u0107 interfejsu u\u017cytkownika<\/a><\/li><li><a href=\"#najczestsze-bledy-poczatkujacych-oraz-sytuacje-ktore-prowadza-do-trudnych-do-wykrycia-problemow-w-css\">Najcz\u0119stsze b\u0142\u0119dy pocz\u0105tkuj\u0105cych oraz sytuacje, kt\u00f3re prowadz\u0105 do trudnych do wykrycia problem\u00f3w w CSS<\/a><\/li><li><a href=\"#faq\">FAQ<\/a><\/li><\/ol><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"podstawy-css-dla-poczatkujacych-i-sposob-dzialania-selektorow-oraz-mechanizmu-dopasowania-regul-do-elementow-dom\">Podstawy CSS dla pocz\u0105tkuj\u0105cych i spos\u00f3b dzia\u0142ania selektor\u00f3w oraz mechanizmu dopasowania regu\u0142 do element\u00f3w DOM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS (Cascading Style Sheets) dzia\u0142a na zasadzie dopasowania selektor\u00f3w do element\u00f3w drzewa DOM. Ka\u017cda regu\u0142a sk\u0142ada si\u0119 z selektora i deklaracji. Przegl\u0105darka przetwarza dokument HTML, buduje drzewo DOM, a nast\u0119pnie stosuje regu\u0142y CSS wed\u0142ug okre\u015blonych zasad. Selektor wskazuje, kt\u00f3re elementy maj\u0105 zosta\u0107 wystylizowane. Najprostsze selektory to selektor typu (<code>p<\/code>, <code>div<\/code>), selektor klasy (<code>.klasa<\/code>), selektor identyfikatora (<code>#id<\/code>). Mechanizm dopasowania jest deterministyczny \u2013 przegl\u0105darka sprawdza ka\u017cdy element i por\u00f3wnuje go z selektorami.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Typ selektora<\/th><th>Przyk\u0142ad<\/th><th>Opis dzia\u0142ania<\/th><\/tr><\/thead><tbody><tr><td>Typ<\/td><td><code>p { color: red; }<\/code><\/td><td>Wszystkie <code>&lt;p&gt;<\/code> b\u0119d\u0105 czerwone<\/td><\/tr><tr><td>Klasa<\/td><td><code>.box { padding: 10px; }<\/code><\/td><td>Elementy z klas\u0105 <code>box<\/code><\/td><\/tr><tr><td>ID<\/td><td><code>#header { height: 100px; }<\/code><\/td><td>Jeden element o ID <code>header<\/code><\/td><\/tr><tr><td>Z\u0142o\u017cony<\/td><td><code>div p { font-size: 14px; }<\/code><\/td><td><code>&lt;p&gt;<\/code> wewn\u0105trz <code>&lt;div&gt;<\/code><\/td><\/tr><tr><td>CSS dzia\u0142a od og\u00f3\u0142u do szczeg\u00f3\u0142u, ale ostateczna decyzja zale\u017cy od specyficzno\u015bci selektora i kolejno\u015bci deklaracji.<\/td><td><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"podstawy-css-dla-poczatkujacych-i-zrozumienie-kaskady-dziedziczenia-oraz-specyficznosci-regul-w-praktyce\">Podstawy CSS dla pocz\u0105tkuj\u0105cych i zrozumienie kaskady, dziedziczenia oraz specyficzno\u015bci regu\u0142 w praktyce<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mechanizm \u201ecascading\u201d oznacza, \u017ce wiele regu\u0142 mo\u017ce dotyczy\u0107 jednego elementu. Przegl\u0105darka musi rozstrzygn\u0105\u0107 konflikt. Trzy g\u0142\u00f3wne czynniki to specyficzno\u015b\u0107 selektora, kolejno\u015b\u0107 w pliku oraz dziedziczenie. Specyficzno\u015b\u0107 mo\u017cna traktowa\u0107 jako wag\u0119: ID ma wag\u0119 100, klasa 10, element 1.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Regu\u0142a<\/th><th>Specyficzno\u015b\u0107<\/th><th>Wynik<\/th><\/tr><\/thead><tbody><tr><td><code>p { color: blue; }<\/code><\/td><td>1<\/td><td>ni\u017cszy priorytet<\/td><\/tr><tr><td><code>.text { color: green; }<\/code><\/td><td>10<\/td><td>wy\u017cszy<\/td><\/tr><tr><td><code>#main { color: red; }<\/code><\/td><td>100<\/td><td>najwy\u017cszy<\/td><\/tr><tr><td>Dziedziczenie dzia\u0142a dla w\u0142a\u015bciwo\u015bci tekstowych (np. <code>color<\/code>, <code>font-family<\/code>), ale nie dzia\u0142a dla layoutu (<code>margin<\/code>, <code>padding<\/code>). Przyk\u0142ad konfliktu:<\/td><td><\/td><td><\/td><\/tr><tr><td>Kod<\/td><td><\/td><td><\/td><\/tr><tr><td>&#8212;&#8211;<\/td><td><\/td><td><\/td><\/tr><tr><td><code>p { color: blue; }<\/code><\/td><td><\/td><td><\/td><\/tr><tr><td><code>.important { color: green; }<\/code><\/td><td><\/td><td><\/td><\/tr><tr><td><code>&lt;p class=\"important\"&gt;Tekst&lt;\/p&gt;<\/code><\/td><td><\/td><td><\/td><\/tr><tr><td>Efekt: tekst b\u0119dzie zielony, bo klasa ma wy\u017csz\u0105 specyficzno\u015b\u0107. Cz\u0119sty b\u0142\u0105d to nadu\u017cywanie <code>!important<\/code>, kt\u00f3re omija mechanizm kaskady i utrudnia debugowanie.<\/td><td><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"model-pudelkowy-css-i-jego-wplyw-na-uklad-elementow-w-przegladarce-oraz-obliczanie-rzeczywistych-wymiarow\">Model pude\u0142kowy CSS i jego wp\u0142yw na uk\u0142ad element\u00f3w w przegl\u0105darce oraz obliczanie rzeczywistych wymiar\u00f3w<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ka\u017cdy element HTML jest traktowany jako prostok\u0105t (box model) sk\u0142adaj\u0105cy si\u0119 z content, padding, border i margin. Szeroko\u015b\u0107 elementu nie zawsze jest tym, co ustawiono w <code>width<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>W\u0142a\u015bciwo\u015b\u0107<\/th><th>Przyk\u0142ad<\/th><th>Znaczenie<\/th><\/tr><\/thead><tbody><tr><td>width<\/td><td><code>width: 200px;<\/code><\/td><td>szeroko\u015b\u0107 tre\u015bci<\/td><\/tr><tr><td>padding<\/td><td><code>padding: 10px;<\/code><\/td><td>odst\u0119p wewn\u0119trzny<\/td><\/tr><tr><td>border<\/td><td><code>border: 2px solid black;<\/code><\/td><td>obramowanie<\/td><\/tr><tr><td>margin<\/td><td><code>margin: 20px;<\/code><\/td><td>odst\u0119p zewn\u0119trzny<\/td><\/tr><tr><td>Rzeczywista szeroko\u015b\u0107:<\/td><td><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">200px + 2*10px + 2*2px = 224px<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Rozwi\u0105zaniem problemu jest u\u017cycie <code>box-sizing: border-box;<\/code><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Kod<\/th><\/tr><\/thead><tbody><tr><td><code>* { box-sizing: border-box; }<\/code><\/td><\/tr><tr><td>Wtedy <code>width<\/code> zawiera padding i border.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"podstawy-css-dla-poczatkujacych-i-praktyczne-zastosowanie-wlasciwosci-do-budowy-ukladow-stron-oraz-kontroli-rozmieszczenia-elementow\">Podstawy CSS dla pocz\u0105tkuj\u0105cych i praktyczne zastosowanie w\u0142a\u015bciwo\u015bci do budowy uk\u0142ad\u00f3w stron oraz kontroli rozmieszczenia element\u00f3w<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Uk\u0142ad strony opiera si\u0119 na kilku mechanizmach: <code>display<\/code>, <code>position<\/code>, <code>flexbox<\/code>, <code>grid<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Warto\u015b\u0107<\/th><th>Opis<\/th><\/tr><\/thead><tbody><tr><td>block<\/td><td>zajmuje ca\u0142\u0105 szeroko\u015b\u0107<\/td><\/tr><tr><td>inline<\/td><td>tylko tyle, ile tre\u015b\u0107<\/td><\/tr><tr><td>inline-block<\/td><td>hybryda<\/td><\/tr><tr><td>none<\/td><td>ukrycie elementu<\/td><\/tr><tr><td>Warto\u015b\u0107<\/td><td>Dzia\u0142anie<\/td><\/tr><tr><td>&#8212;&#8212;&#8211;<\/td><td>&#8212;&#8212;&#8212;-<\/td><\/tr><tr><td>static<\/td><td>domy\u015blne<\/td><\/tr><tr><td>relative<\/td><td>przesuni\u0119cie wzgl\u0119dem siebie<\/td><\/tr><tr><td>absolute<\/td><td>wzgl\u0119dem rodzica<\/td><\/tr><tr><td>fixed<\/td><td>wzgl\u0119dem okna<\/td><\/tr><tr><td>sticky<\/td><td>hybryda<\/td><\/tr><tr><td>Flexbox jest najcz\u0119\u015bciej u\u017cywany do prostych uk\u0142ad\u00f3w:<\/td><td><\/td><\/tr><tr><td>Kod<\/td><td><\/td><\/tr><tr><td>&#8212;&#8211;<\/td><td><\/td><\/tr><tr><td><code>.container { display: flex; }<\/code><\/td><td><\/td><\/tr><tr><td><code>.item { flex: 1; }<\/code><\/td><td><\/td><\/tr><tr><td>Grid pozwala budowa\u0107 bardziej z\u0142o\u017cone struktury:<\/td><td><\/td><\/tr><tr><td>Kod<\/td><td><\/td><\/tr><tr><td>&#8212;&#8211;<\/td><td><\/td><\/tr><tr><td><code>.grid { display: grid; grid-template-columns: 1fr 1fr; }<\/code><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"typografia-kolory-i-jednostki-w-css-oraz-ich-wplyw-na-czytelnosc-i-responsywnosc-interfejsu-uzytkownika\">Typografia, kolory i jednostki w CSS oraz ich wp\u0142yw na czytelno\u015b\u0107 i responsywno\u015b\u0107 interfejsu u\u017cytkownika<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS daje pe\u0142n\u0105 kontrol\u0119 nad tekstem i jego czytelno\u015bci\u0105.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Jednostka<\/th><th>Znaczenie<\/th><\/tr><\/thead><tbody><tr><td>px<\/td><td>piksele<\/td><\/tr><tr><td>em<\/td><td>wzgl\u0119dem rodzica<\/td><\/tr><tr><td>rem<\/td><td>wzgl\u0119dem root<\/td><\/tr><tr><td>%<\/td><td>proporcja<\/td><\/tr><tr><td>vw\/vh<\/td><td>viewport<\/td><\/tr><tr><td>Przyk\u0142ad:<\/td><td><\/td><\/tr><tr><td>Kod<\/td><td><\/td><\/tr><tr><td>&#8212;&#8211;<\/td><td><\/td><\/tr><tr><td><code>body { font-size: 16px; }<\/code><\/td><td><\/td><\/tr><tr><td><code>h1 { font-size: 2rem; }<\/code><\/td><td><\/td><\/tr><tr><td>Kolory mo\u017cna zapisywa\u0107 r\u00f3\u017cnymi metodami:<\/td><td><\/td><\/tr><tr><td>Format<\/td><td>Przyk\u0142ad<\/td><\/tr><tr><td>&#8212;&#8212;-<\/td><td>&#8212;&#8212;&#8212;-<\/td><\/tr><tr><td>HEX<\/td><td><code>#ff0000<\/code><\/td><\/tr><tr><td>RGB<\/td><td><code>rgb(255,0,0)<\/code><\/td><\/tr><tr><td>HSL<\/td><td><code>hsl(0,100%,50%)<\/code><\/td><\/tr><tr><td>Problem praktyczny to kontrast \u2013 zbyt niski powoduje problemy z czytelno\u015bci\u0105.<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"najczestsze-bledy-poczatkujacych-oraz-sytuacje-ktore-prowadza-do-trudnych-do-wykrycia-problemow-w-css\">Najcz\u0119stsze b\u0142\u0119dy pocz\u0105tkuj\u0105cych oraz sytuacje, kt\u00f3re prowadz\u0105 do trudnych do wykrycia problem\u00f3w w CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Najcz\u0119stsze problemy to brak resetu styl\u00f3w, zbyt z\u0142o\u017cone selektory, mieszanie jednostek, brak <code>box-sizing<\/code>, problemy z responsywno\u015bci\u0105 oraz nadu\u017cywanie <code>position: absolute<\/code>. Ka\u017cdy z tych b\u0142\u0119d\u00f3w prowadzi do trudnych do przewidzenia efekt\u00f3w i wyd\u0142u\u017ca czas debugowania.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Czy CSS jest j\u0119zykiem programowania?<\/strong> Nie. CSS jest j\u0119zykiem deklaratywnym.<br><strong>2. Dlaczego moje style si\u0119 nie stosuj\u0105?<\/strong> Najcz\u0119\u015bciej przez specyficzno\u015b\u0107 lub kolejno\u015b\u0107.<br><strong>3. Czy warto u\u017cywa\u0107 inline CSS?<\/strong> Nie w wi\u0119kszych projektach.<br><strong>4. Co jest lepsze: Flexbox czy Grid?<\/strong> Flexbox do prostych, Grid do z\u0142o\u017conych uk\u0142ad\u00f3w.<br><strong>5. Dlaczego element ma wi\u0119kszy rozmiar ni\u017c ustawiony?<\/strong> Przez padding i border.<br><strong>6. Czy <code>!important<\/code> jest z\u0142e?<\/strong> Powinno by\u0107 u\u017cywane rzadko.<br><strong>7. Jak zrobi\u0107 responsywn\u0105 stron\u0119?<\/strong> Media queries i jednostki wzgl\u0119dne.<br>CSS nie jest trudny sam w sobie, ale staje si\u0119 problematyczny, gdy ignoruje si\u0119 jego zasady dzia\u0142ania i zaczyna zgadywa\u0107 zamiast rozumie\u0107.<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u0179r\u00f3d\u0142o Foto: Freepik<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML bez styl\u00f3w jest jak dokument techniczny bez formatowania \u2013 wszystko jest poprawne, ale trudne w odbiorze. CSS wprowadza warstw\u0119 prezentacji, pozwalaj\u0105c oddzieli\u0107 struktur\u0119 od wygl\u0105du i kontrolowa\u0107 szczeg\u00f3\u0142y wizualne z dok\u0142adno\u015bci\u0105 do pojedynczego piksela. W praktyce oznacza to mo\u017cliwo\u015b\u0107 zarz\u0105dzania typografi\u0105, uk\u0142adem, kolorami i responsywno\u015bci\u0105 bez modyfikowania samego HTML, co w d\u0142u\u017cszej perspektywie oszcz\u0119dza czas i ogranicza chaos w projekcie. Ten materia\u0142 porz\u0105dkuje podstawy CSS dla pocz\u0105tkuj\u0105cych. Podstawy CSS dla pocz\u0105tkuj\u0105cych i spos\u00f3b dzia\u0142ania selektor\u00f3w oraz mechanizmu dopasowania regu\u0142 do element\u00f3w DOM CSS (Cascading Style Sheets) dzia\u0142a na zasadzie dopasowania selektor\u00f3w do element\u00f3w drzewa DOM. Ka\u017cda regu\u0142a sk\u0142ada si\u0119 z selektora i deklaracji. Przegl\u0105darka przetwarza dokument HTML, buduje drzewo DOM, a nast\u0119pnie stosuje regu\u0142y CSS wed\u0142ug okre\u015blonych zasad. Selektor wskazuje, kt\u00f3re elementy maj\u0105 zosta\u0107 wystylizowane. Najprostsze selektory to selektor typu (p, div), selektor klasy (.klasa), selektor identyfikatora (#id). Mechanizm dopasowania jest deterministyczny \u2013 przegl\u0105darka sprawdza ka\u017cdy element i por\u00f3wnuje go z selektorami. Typ selektora Przyk\u0142ad Opis dzia\u0142ania Typ p { color: red; } Wszystkie &lt;p&gt; b\u0119d\u0105 czerwone Klasa .box { padding: 10px; } Elementy z klas\u0105 box ID #header { height: 100px; } Jeden element o ID header Z\u0142o\u017cony div p { font-size: 14px; } &lt;p&gt; wewn\u0105trz &lt;div&gt; CSS dzia\u0142a od og\u00f3\u0142u do szczeg\u00f3\u0142u, ale ostateczna decyzja zale\u017cy od specyficzno\u015bci selektora i kolejno\u015bci deklaracji. Podstawy CSS dla pocz\u0105tkuj\u0105cych i zrozumienie kaskady, dziedziczenia oraz specyficzno\u015bci regu\u0142 w praktyce Mechanizm \u201ecascading\u201d oznacza, \u017ce wiele regu\u0142 mo\u017ce dotyczy\u0107 jednego elementu. Przegl\u0105darka musi rozstrzygn\u0105\u0107 konflikt. Trzy g\u0142\u00f3wne czynniki to specyficzno\u015b\u0107 selektora, kolejno\u015b\u0107 w pliku oraz dziedziczenie. Specyficzno\u015b\u0107 mo\u017cna traktowa\u0107 jako wag\u0119: ID ma wag\u0119 100, klasa 10, element 1. Regu\u0142a Specyficzno\u015b\u0107 Wynik p { color: blue; } 1 ni\u017cszy priorytet .text { color: green; } 10 wy\u017cszy #main { color: red; } 100 najwy\u017cszy Dziedziczenie dzia\u0142a dla w\u0142a\u015bciwo\u015bci tekstowych (np. color, font-family), ale nie dzia\u0142a dla layoutu (margin, padding). Przyk\u0142ad konfliktu: Kod &#8212;&#8211; p { color: blue; } .important { color: green; } &lt;p class=&#8221;important&#8221;&gt;Tekst&lt;\/p&gt; Efekt: tekst b\u0119dzie zielony, bo klasa ma wy\u017csz\u0105 specyficzno\u015b\u0107. Cz\u0119sty b\u0142\u0105d to nadu\u017cywanie !important, kt\u00f3re omija mechanizm kaskady i utrudnia debugowanie. Model pude\u0142kowy CSS i jego wp\u0142yw na uk\u0142ad element\u00f3w w przegl\u0105darce oraz obliczanie rzeczywistych wymiar\u00f3w Ka\u017cdy element HTML jest traktowany jako prostok\u0105t (box model) sk\u0142adaj\u0105cy si\u0119 z content, padding, border i margin. Szeroko\u015b\u0107 elementu nie zawsze jest tym, co ustawiono w width. W\u0142a\u015bciwo\u015b\u0107 Przyk\u0142ad Znaczenie width width: 200px; szeroko\u015b\u0107 tre\u015bci padding padding: 10px; odst\u0119p wewn\u0119trzny border border: 2px solid black; obramowanie margin margin: 20px; odst\u0119p zewn\u0119trzny Rzeczywista szeroko\u015b\u0107: 200px + 2*10px + 2*2px = 224px Rozwi\u0105zaniem problemu jest u\u017cycie box-sizing: border-box; Kod * { box-sizing: border-box; } Wtedy width zawiera padding i border. Podstawy CSS dla pocz\u0105tkuj\u0105cych i praktyczne zastosowanie w\u0142a\u015bciwo\u015bci do budowy uk\u0142ad\u00f3w stron oraz kontroli rozmieszczenia element\u00f3w Uk\u0142ad strony opiera si\u0119 na kilku mechanizmach: display, position, flexbox, grid. Warto\u015b\u0107 Opis block zajmuje ca\u0142\u0105 szeroko\u015b\u0107 inline tylko tyle, ile tre\u015b\u0107 inline-block hybryda none ukrycie elementu Warto\u015b\u0107 Dzia\u0142anie &#8212;&#8212;&#8211; &#8212;&#8212;&#8212;- static domy\u015blne relative przesuni\u0119cie wzgl\u0119dem siebie absolute wzgl\u0119dem rodzica fixed wzgl\u0119dem okna sticky hybryda Flexbox jest najcz\u0119\u015bciej u\u017cywany do prostych uk\u0142ad\u00f3w: Kod &#8212;&#8211; .container { display: flex; } .item { flex: 1; } Grid pozwala budowa\u0107 bardziej z\u0142o\u017cone struktury: Kod &#8212;&#8211; .grid { display: grid; grid-template-columns: 1fr 1fr; } Typografia, kolory i jednostki w CSS oraz ich wp\u0142yw na czytelno\u015b\u0107 i responsywno\u015b\u0107 interfejsu u\u017cytkownika CSS daje pe\u0142n\u0105 kontrol\u0119 nad tekstem i jego czytelno\u015bci\u0105. Jednostka Znaczenie px piksele em wzgl\u0119dem rodzica rem wzgl\u0119dem root % proporcja vw\/vh viewport Przyk\u0142ad: Kod &#8212;&#8211; body { font-size: 16px; } h1 { font-size: 2rem; } Kolory mo\u017cna zapisywa\u0107 r\u00f3\u017cnymi metodami: Format Przyk\u0142ad &#8212;&#8212;- &#8212;&#8212;&#8212;- HEX #ff0000 RGB rgb(255,0,0) HSL hsl(0,100%,50%) Problem praktyczny to kontrast \u2013 zbyt niski powoduje problemy z czytelno\u015bci\u0105. Najcz\u0119stsze b\u0142\u0119dy pocz\u0105tkuj\u0105cych oraz sytuacje, kt\u00f3re prowadz\u0105 do trudnych do wykrycia problem\u00f3w w CSS Najcz\u0119stsze problemy to brak resetu styl\u00f3w, zbyt z\u0142o\u017cone selektory, mieszanie jednostek, brak box-sizing, problemy z responsywno\u015bci\u0105 oraz nadu\u017cywanie position: absolute. Ka\u017cdy z tych b\u0142\u0119d\u00f3w prowadzi do trudnych do przewidzenia efekt\u00f3w i wyd\u0142u\u017ca czas debugowania. FAQ 1. Czy CSS jest j\u0119zykiem programowania? Nie. CSS jest j\u0119zykiem deklaratywnym.2. Dlaczego moje style si\u0119 nie stosuj\u0105? Najcz\u0119\u015bciej przez specyficzno\u015b\u0107 lub kolejno\u015b\u0107.3. Czy warto u\u017cywa\u0107 inline CSS? Nie w wi\u0119kszych projektach.4. Co jest lepsze: Flexbox czy Grid? Flexbox do prostych, Grid do z\u0142o\u017conych uk\u0142ad\u00f3w.5. Dlaczego element ma wi\u0119kszy rozmiar ni\u017c ustawiony? Przez padding i border.6. Czy !important jest z\u0142e? Powinno by\u0107 u\u017cywane rzadko.7. Jak zrobi\u0107 responsywn\u0105 stron\u0119? Media queries i jednostki wzgl\u0119dne.CSS nie jest trudny sam w sobie, ale staje si\u0119 problematyczny, gdy ignoruje si\u0119 jego zasady dzia\u0142ania i zaczyna zgadywa\u0107 zamiast rozumie\u0107. \u0179r\u00f3d\u0142o Foto: Freepik<\/p>\n","protected":false},"author":1,"featured_media":1283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,1],"tags":[],"class_list":["post-1282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kodowanie","category-poradnik"],"_links":{"self":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/comments?post=1282"}],"version-history":[{"count":1,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1282\/revisions"}],"predecessor-version":[{"id":1284,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/posts\/1282\/revisions\/1284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media\/1283"}],"wp:attachment":[{"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/media?parent=1282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/categories?post=1282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trzykody.pl\/index.php\/wp-json\/wp\/v2\/tags?post=1282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}