Czy wiesz, że display block, inline i inline-block decydują o układzie strony?
Typowe błędy widać gołym okiem. Powtarzanie tego samego identyfikatora na kilku elementach — przeglądarka to zniesie, ale dokument przestaje być poprawny, a skrypt trafi tylko na pierwszy element. Stosowanie identyfikatora tam, gdzie wystarczyłaby klasa, i odwrotnie: nadawanie klas elementom, które występują raz i nigdy się nie powtórzą. Kolejny częsty problem to nazwy klas opisujące wygląd, na przykład „czerwony-tekst", zamiast roli, na przykład „ostrzeżenie". Gdy zmienisz kolorystykę, pierwsza nazwa stanie się kłamstwem.<br>
<br>
<br>
<br>
Zaczynaj od selektora znacznika, gdy chcesz ustawić ogólne reguły dla całego dokumentu. Sięgaj po klasę, gdy element ma się powtarzać albo gdy chcesz łączyć kilka niezależnych cech. Zostaw identyfikator do wskazania jednego, niepowtarzalnego miejsca. Trzymanie się tego podziału sprawia, że arkusz stylów rośnie wolniej, a zmiany nie ciągną za sobą lawiny poprawek.<br>
<br>
<br>
<br>
Właściwość font-family przyjmuje listę nazw oddzielonych przecinkami. Przeglądarka czyta ją od lewej do prawej i używa pierwszej dostępnej. Na końcu tej listy prawie zawsze pojawia się rodzaj ogólny, czyli słowo kluczowe takie jak serif, sans-serif, monospace, cursive lub fantasy. To nie jest nazwa konkretnego kroju pisma. To zbiór cech, według których system wybiera dowolny dostępny font pasujący do kategorii.<br>
<br>
<br>
<br>
Elementy HTML domyślnie mają przypisany typ wyświetlania, który określa, jak zajmują miejsce w dokumencie. Właściwość CSS display pozwala to zmienić. Zrozumienie różnic między block, inline i inline-block jest kluczowe, gdy chcemy kontrolować układ strony bez uciekania się do pozycjonowania czy flexboxa. Wybór niewłaściwej wartości prowadzi do nieprzewidywalnych odstępów, nachodzenia elementów lub problemów z szerokością i wysokością.<br>
<br>
<br>
<br>
Ścieżka bezwzględna zaczyna się od korzenia systemu plików albo od litery dysku. W systemach uniksowych to ukośnik na początku, w Windows dodatkowo litera dysku i dwukrodek. Taka ścieżka jest jednoznaczna i zawsze wskazuje to samo miejsce, niezależnie od tego, skąd ją wywołasz. Ścieżka względna nie ma punktu początkowego — liczy się od katalogu, w którym znajduje się plik zawierający link. To właśnie dlatego ten sam zapis raz działa, a raz nie.<br>
<br>
<br>
<br>
Drugi typowy błąd to nadmiarowe „../". Jeśli plik docelowy leży wyżej, a ty schodzisz jeszcze wyżej, link wyjdzie poza katalog projektu i wskaże miejsce, którego na serwerze nie ma. Sprawdź to, licząc poziomy od pliku źródłowego, a nie od korzenia. Trzeci błąd to wielkość liter — na komputerze z Windows różnica między „Obrazy" a „obrazy" często nie przeszkadza, na serwerze linuksowym oznacza brak pliku.<br>
<br>
<br>
<br>
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" i sans-serif. Jeśli pierwszy font zawiedzie, tekst przeskoczy z szeryfowego na bezszeryfowy, co psuje rytm układu.<br>
<br>
<br>
<br>
Link, który działa na twoim komputerze, po przeniesieniu na inny albo po wgraniu na serwer potrafi przestać działać. Powód jest prawie zawsze ten sam: zamiast ścieżki względnej ktoś wpisał ścieżkę bezwzględną. Różnica między nimi jest niewielka w zapisie, ale ogromna w skutkach.<br>
<br>
<br>
<br>
Najczęstsza przyczyna to treść wewnątrz. Element inline-block wyrównuje się dolną krawędzią swojego ostatniego wiersza tekstu, a nie zewnętrznym bokiem pudełka. Jeśli w jednym bloku jest sam obrazek, a w drugim akapit, ich linie bazowe wypadają w innych miejscach. Krótki tekst bez zstępników, czyli bez liter schodzących pod linię, też przesuwa punkt odniesienia. Zanim uznasz, że coś jest zepsute, wpisz do obu elementów identyczną treść i porównaj.<br>
<br>
<br>
<br>
Jak zbudować poprawną ścieżkę względną Zacznij od ustalenia, gdzie leży plik ze linkiem, a gdzie plik docelowy. Jeśli oba są w tym samym folderze, wystarczy sama nazwa pliku. Jeśli cel jest w podfolderze, dopisz jego nazwę i ukośnik. Jeśli cel jest w folderze nadrzędnym, użyj dwóch kropek i ukośnika — to oznacza „wyjdź poziom wyżej". Każde kolejne „../" cofa cię o jeden poziom. Przykładowo z pliku w katalogu „strona/oferta" do pliku w „strona/obrazy" prowadzi ścieżka „../obrazy/plik.jpg".<br>
<br>
<br>
<br>
Elementy typu block (np. div, p, h1) zajmują całą dostępną szerokość rodzica i rozpoczynają się w nowej linii. Można im ustawić szerokość, wysokość, marginesy i padding. Domyślnie są one układane pionowo. Typowe błędy to próba ustawienia width na elemencie inline – to nie zadziała. Pamiętaj, że block zawsze łamie linię, nawet jeśli ma zerową szerokość.