Kotwica do sekcji działa, dopóki nie zmienisz identyfikatora
Kiedy dwuklik zawodzi, choć plik jest popraw<br>
<br>
<br>
<br>
Przydatny trik: w panelu stylów wpisz właściwość z wartością tymczasową, żeby sprawdzić układ, a potem skopiuj gotowy fragment do schowka i wklej go do pliku. Uważaj na jednostki — przeglądarka przyjmie wpis bez jednostki, ale w arkuszu może zostać zinterpretowany inaczej. Nie zmieniaj też jednocześnie wielu właściwości, bo nie będziesz wiedzieć, która dała efekt. Jedna zmiana, jeden test.<br>
<br>
<br>
<br>
Kolejna pułapka: flex-basis: 100% nie zawsze oznacza pełną szerokość widoczną dla użytkownika. Jeśli element ma margin, border albo padding poza box-sizing, wizualnie wyjdzie poza rodzica i pojawi się poziomy pasek przewijania. Bezpieczniej używać flex-basis: 100% razem z box-sizing: border-box i bez marginesów poziomych. Przy zawijaniu (flex-wrap: wrap) elementy z flex-basis: 100% zajmą cały wiersz, a kolejne przejdą do następnej linii — to przydatne do nagłówków sekcji wewnątrz elastycznego układu.<br>
<br>
<br>
<br>
Inspektor świetnie nadaje się do diagnozy: sprawdzenia, dlaczego element wychodzi poza kontener, jaki kolor faktycznie jest stosowany czy która reguła wygrywa w kaskadzie. Traktuj go jako brudnopis, a nie edytor. Efekt przeniesiony do pliku dopiero wtedy staje się trwały i widoczny dla wszystkich.<br>
<br>
<br>
<br>
Gdzie najczęściej popełnia się błąd Najczęstsza pomyłka to zmiana identyfikatora w treści bez poprawienia linków. Zmieniasz nagłówek z id="oferta" na id="uslugi", a stary odnośnik #oferta nadal gdzieś wisi — w menu, w przycisku, w stopce. Kliknięcie nic nie robi albo przewija stronę na samą górę. Przeglądarka nie zgłasza błędu, więc problem wychodzi dopiero u użytkownika. Drugi częsty przypadek: identyfikator jest na elemencie, który ma display: none lub zerową wysokość. Link istnieje, ale nie ma do czego przewinąć.<br>
<br>
<br>
<br>
Jak procenty współpracują z gap i paddingi<br>
<br>
<br>
<br>
Inspektor elementu to narzędzie wbudowane w przeglądarkę, które pokazuje strukturę dokumentu i wszystkie reguły CSS działające na wybranym fragmencie strony. Otwiera się go skrótem klawiszowym — najczęściej klawiszem funkcyjnym lub kombinacją z klawiszem modyfikującym — albo z menu kontekstowego po kliknięciu prawym przyciskiem myszy i wybraniu opcji badania elementu. Po otwarciu panelu zaznaczenie elementu w drzewie HTML od razu podświetla go na stronie, a obok widać listę stylów z podziałem na reguły odziedziczone, nadpisane i aktywne.<br>
<br>
<br>
<br>
Uwaga na nagłówki przyklejone do góry ekranu. Jeśli menu ma stałą pozycję i zasłania początek sekcji, po kliknięciu nagłówek schowa się pod paskiem. Rozwiązanie jest czysto stylowe: dodaj do elementu docelowego scroll-margin-top o wartości równej wysokości przyklejonego paska, np. scroll-margin-top: 80px. Wtedy przeglądarka zatrzyma przewijanie nieco wyżej i treść będzie widoczna w całości. To jedna linia w arkuszu stylów, a ratuje czytelność.<br>
<br>
<br>
<br>
Najczęstszy błąd to walka ze stylem, który jest nadpisany przez regułę o wyższej specyficzności albo przez ważność. Inspektor przekreśla takie właściwości, więc zamiast poprawiać niewłaściwy wiersz, sprawdź, która reguła faktycznie działa. Druga pułapka to edycja w widoku zgodności z urządzeniem mobilnym — zmiany wprowadzone przy wąskim viewporcie mogą nie odpowiadać temu, co widzisz na szerokim ekranie, bo inne media queries wchodzą w grę.<br>
<br>
<br>
<br>
Kiedy przeglądarka napotyka dwie reguły CSS, które ustawiają tę samą właściwość dla tego samego elementu, musi zdecydować, którą zastosować. Decyduje o tym specyficzność selektora. Każdy selektor ma przypisaną wagę, a wygrywa ten z wyższą wartością. Jeśli wagi są równe, wygrywa reguła zapisana później w arkuszu stylów. To podstawowa zasada kaskady, która rządzi tym, co widzisz na ekranie.<br>
<br>
<br>
<br>
Trzeci błąd to używanie id do celów stylowania. Identyfikator ma służyć przede wszystkim jako punkt zaczepienia i etykieta dla skryptów. Do wyglądu lepiej stosować klasy, bo id ma zbyt wysoką specyficzność i później trudno go nadpisać. Kiedy łączysz oba zastosowania, każda zmiana nazwy kotwicy pociąga za sobą poprawki w CSS, co zwiększa ryzyko, że o czymś zapomnisz.<br>
<br>
<br>
<br>
Kiedy inspektor oszukuje, a kiedy naprawdę pomaga Warto wiedzieć, że zmiany w inspektorze są ulotne. Znikają po odświeżeniu strony i nie zapisują się w pliku. To nie wada, a zabezpieczenie: edytujesz kopię wyświetlaną w pamięci przeglądarki. Jeśli chcesz zachować efekt, przepisz zmiany ręcznie do arkusza w edytorze kodu. Nie ma tu przycisku zapisu i dobrze, bo przypadkowa zmiana nie zepsuje działającej witryny.<br>
<br>
<br>
<br>
Odnośnik prowadzący do konkretnego miejsca na tej samej stronie tworzy się prosto: nadajesz elementowi docelowemu atrybut id, a w linku używasz znaku # i tej samej nazwy. Przykład: <br>
<br>
Cennik<br>
<br>
oraz Przejdź do cennika. Po kliknięciu przeglądarka przewinie widok tak, aby element z tym id znalazł się na górze okna. Mechanizm jest stary jak sieć i działa bez JavaScriptu, o ile nie zepsujesz go nieuważnym kopiowaniem.