https://wiki.rettungsdienstblog.eu/api.php?action=feedcontributions&feedformat=atom&user=LeticiaStpierre 2026-11-13T01:12:10Z Benutzerbeiträge MediaWiki 1.37.1 https://wiki.rettungsdienstblog.eu/index.php?title=Gdy_kolor_idzie_w_dziedzictwo,_a_ramka_zostaje_na_g%C3%B3rze&diff=497903 2026-10-19T18:22:12Z

<p>LeticiaStpierre: </p> <hr /> <div>Stos czcionek zapasowych buduje się świadomie, nie chaotycznie. Najlepiej zacząć od kroju, który faktycznie chcesz użyć, potem dodać warianty o zbliżonym charakterze — np. dla bezszeryfowych: najpierw dedykowany krój, potem popularne systemowe odpowiedniki, a na końcu ogólne słowo kluczowe: sans-serif, serif lub monospace. Dzięki temu każdy kolejny element listy jest sensownym przybliżeniem poprzedniego.&lt;br&gt;&lt;br&gt;Uwaga na skróty myślowe: to, że w panelu stylów widzisz czcionkę pierwszą w kolejności, nie znaczy, że jest aktywna. Przeglądarka stosuje ją tylko wtedy, gdy jest dostępna i obsługuje dany zakres znaków. Dla polskich znaków diakrytycznych niektóre kroje mogą nie mieć pełnego zestawu — wtedy system podmienia pojedyncze glify, co bywa trudne do zauważenia. Dlatego testuj na tekście zawierającym polskie litery, a nie tylko na „lorem ipsum&quot;.&lt;br&gt;&lt;br&gt;Jak wymusić dziedziczenie ramki, gdy naprawdę jest potrzebne Jeśli chcesz, aby obramowanie pojawiło się również na dzieciach, masz trzy praktyczne drogi. Pierwsza: użyj selektora potomka, np. .karta &gt;* i nadaj tam border: 1px solid. Druga: zastosuj border: inherit na wybranych elementach potomnych — to jawnie wciąga wartość obliczoną rodzica. Trzecia: zamiast ramki użyj outline lub box-shadow z ostrym cieniem, ale pamiętaj, że outline nie wpływa na układ, a box-shadow bywa niewidoczny przy braku tła. Najczęstszy błąd to wpisanie border: inherit na wszystkich potomkach bez zastanowienia — wtedy ramka pojawia się także na elementach inline, np. w środku zdania, co psuje typografię.&lt;br&gt;&lt;br&gt;Na koniec: dziedziczenie to nie magia, tylko jawna lista właściwości. Kolor jest na tej liście, ramka nie. Jeśli zapamiętasz tę jedną różnicę i będziesz sprawdzać wartości obliczone w narzędziach deweloperskich, przestaniesz zgadywać, dlaczego tekst zmienia barwę, a obramowanie zostaje tylko na górnym elemencie.&lt;br&gt;&lt;br&gt;Uważaj na różnicę między „odziedziczone&quot; a „przejęte wizualnie&quot;. Kolor tekstu dziedziczy się automatycznie, ale na przykład background-color już nie — dziecko nie dostanie tła rodzica. Ramka ma jeszcze jeden haczyk: jeśli ustawisz border: none na rodzicu, a na dziecku border: inherit, dziecko otrzyma wartość none, czyli brak ramki. Wartość inherit bierze to, co faktycznie obliczył rodzic, a nie to, co sobie wyobrażasz. Podobnie z border-radius — on również nie jest dziedziczony. Zaokrąglenie narożników rodzica nie zaokrągli automatycznie narożników dziecka, nawet jeśli dziecko jest wizualnie w środku.&lt;br&gt;&lt;br&gt;Typowy błąd to wpisanie samego rodzaju ogólnego, np. font-family: sans-serif. Działa, ale oddaje kontrolę nad wyglądem systemowi. Efekt bywa nieprzewidywalny: na jednym komputerze tekst będzie wąski, na innym szeroki. Drugi częsty błąd to umieszczenie rodzaju ogólnego na początku listy — wtedy reszta nazw nigdy nie zostanie użyta, bo pierwszy pasujący element zawsze wygrywa. Trzeci błąd to mieszanie kategorii: obok siebie „Times New Roman&quot; i sans-serif. Jeśli pierwszy font zawiedzie, tekst przeskoczy z szeryfowego na bezszeryfowy, co psuje rytm układu.&lt;br&gt;&lt;br&gt;Najpewniejszym sposobem pozostaje połączenie obserwacji z narzędziami: sprawdź computed style, zajrzyj w panel renderowania i wykonaj test szerokości znaku. Jeśli wynik jest niejasny, wymuś pojedynczą czcionkę w osobnym pliku testowym i porównaj z docelowym stosem. To daje odpowiedź, która czcionka faktycznie się wyświetla, bez zgadywania.&lt;br&gt;&lt;br&gt;Kolor tekstu i ramka to dwie właściwości, które w CSS zachowują się zupełnie inaczej, choć w arkuszu stylów wyglądają podobnie. Kolor jest dziedziczony domyślnie — każdy element potomny przejmuje go od rodzica, chyba że sam go nadpisze. Ramka nie jest dziedziczona — element potomny nie dostaje obramowania tylko dlatego, że ma je rodzic. Zrozumienie tej różnicy oszczędza godziny debugowania i tłumaczy, dlaczego czasem „nic się nie zmienia&quot;, a czasem „wszystko się rozjeżdża&quot;.&lt;br&gt;&lt;br&gt;Przeglądarka nie mówi wprost, którą czcionkę wybrała ze stosu. Kaskada font-family działa po cichu: jeśli pierwsza pozycja jest niedostępna, system sięga po następną, a gdy żadna nie pasuje, używa domyślnej. Aby to sprawdzić, trzeba zajrzeć w narzędzia deweloperskie albo porównać wygląd tekstu z próbkami.&lt;br&gt;&lt;br&gt;Zacznij od sprawdzenia, która właściwość faktycznie odpowiada za to, co widzisz. Kolor tekstu ustawia się przez color i ta wartość przechodzi w dół drzewa DOM. Jeśli więc ustawisz color na kontenerze, wszystkie akapity, nagłówki i przyciski bez własnego koloru przyjmą tę barwę. Ramkę definiujesz przez border, border-width, border-style i border-color. Żadna z tych właściwości nie jest dziedziczona — border istnieje tylko na tym elemencie, na którym został zadeklarowany. To nie błąd, to celowy mechanizm CSS.&lt;br&gt;&lt;br&gt;Rozmiar czcionki w CSS można ustawić na kilka sposobów i każdy z nich zachowuje się inaczej przy zmianie ustawień przeglądarki lub rozmiaru okna. Najczęściej używane jednostki to px, em, rem, a obok nich procenty. Zrozumienie, co skaluje się z czym, pozwala uniknąć layoutu, który rozsypuje się u użytkownika powiększającego tekst.</div>

LeticiaStpierre https://wiki.rettungsdienstblog.eu/index.php?title=Benutzer:LeticiaStpierre&diff=497902 2026-10-19T18:22:11Z

<p>LeticiaStpierre: Die Seite wurde neu angelegt: „Entuzjasta urządzania mieszkań z wieloletnią praktyką. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najchętniej opisuję pomysły, które nie rujnują budżetu.“</p> <hr /> <div>Entuzjasta urządzania mieszkań z wieloletnią praktyką. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najchętniej opisuję pomysły, które nie rujnują budżetu.</div>

LeticiaStpierre