Jak podłączyć CSS do HTML: link, style, @import i naprawa ścieżek
Podłącz arkusz stylów elementem link albo użyj style, stylów inline lub @import. Przetestuj na żywo ścieżki względne i bezwzględne i przejdź przez listę kontrolną, gdy CSS się nie ładuje.
Jak podłączyć CSS do HTML
Aby podłączyć plik CSS do strony HTML, umieść <link rel="stylesheet" href="styles.css"> w sekcji head. href to ścieżka od pliku HTML do pliku CSS, więc plik w folderze css wymaga href="css/styles.css". CSS możesz też pisać w elemencie style, w atrybucie style albo dołączać pliki przez @import.
Cztery sposoby dodania CSS do strony
Metoda
Gdzie się umieszcza
Najlepsze do
<link rel="stylesheet">
W sekcji head
Prawie wszystkiego: jeden plik współdzielony przez wiele stron
Element <style>
W sekcji head
Małych stron, critical CSS, dem
Atrybut style="..."
Na jednym elemencie
Jednorazowych wartości ustawianych z kodu
@import url(...)
Na górze pliku CSS
Dzielenia CSS na warstwy lub pliki
Niemal każdy przypadek strony bez stylów sprowadza się do ścieżki lub atrybutów elementu link. Ten poradnik pokazuje każdy sposób dodania CSS, zawiera narzędzie do sprawdzania ścieżki, które ustala dokładnie, na jaki adres URL wskazuje Twój href, i kończy się listą kontrolną na wypadek, gdy style nadal się nie pojawiają.
Wpisz adres swojej strony HTML w takiej postaci, w jakiej widać go na pasku przeglądarki.
Wpisz href użyty w elemencie link.
Narzędzie pokazuje pełny adres URL, o który poprosi przeglądarka, wyliczony w Twojej przeglądarce według standardowych reguł URL.
Otwórz ten adres w nowej karcie. Jeśli nie pokazuje Twojego CSS, ścieżka jest błędna.
Atrybut type="text/css" jest opcjonalny. CSS to jedyny język arkuszy stylów, którego używają przeglądarki.
Umieszczaj linki do arkuszy stylów w sekcji head. Linki w body są dozwolone, ale mogą powodować mignięcie niestylowanej treści.
Dodaj atrybut media, na przykład media="print", aby zastosować arkusz stylów tylko wtedy, gdy ten warunek jest spełniony.
Kolejność ma znaczenie. Gdy dwie reguły mają tę samą specyficzność, wygrywa ta załadowana później, więc podłączaj własny CSS po każdym frameworku.
Najczęściej zadawane pytania
Dlaczego mój plik CSS nie podłącza się do HTML?
Najpierw sprawdź ścieżkę: otwórz narzędzia deweloperskie przeglądarki, przejdź do zakładki Network i znajdź żądanie CSS. 404 oznacza, że href wskazuje złe miejsce. Sprawdź też, czy rel="stylesheet" jest poprawnie napisane, czy nazwy plików mają tę samą wielkość liter i czy zapisałeś plik.
Czym różni się ścieżka względna od bezwzględnej?
Ścieżka względna, taka jak css/site.css, jest rozwiązywana od folderu bieżącej strony. Ścieżka zaczynająca się od / jest rozwiązywana od katalogu głównego witryny, a pełny adres URL zaczynający się od https:// wskazuje dokładny adres. Ścieżki od katalogu głównego nie działają, gdy otwierasz plik prosto z dysku.
Używać @import czy link?
Wybieraj link. Każdy @import jest wykrywany dopiero po pobraniu pliku, który go zawiera, więc łańcuchowe importy ładują się jeden po drugim. @import przydaje się do porządkowania przez layer() lub w narzędziu do budowania, które i tak łączy pliki.
Jak w href przejść do folderu wyżej?
Użyj ../ dla każdego poziomu. Strona pod /blog/post.html z CSS pod /css/site.css używa href="../css/site.css" albo ścieżki od katalogu głównego href="/css/site.css", gdy witryna działa na serwerze.
Gdzie musi być @import?
Na samej górze arkusza stylów, przed wszystkimi innymi regułami. Przed nim mogą być tylko instrukcje @charset i @layer. @import umieszczony po regułach stylów jest ignorowany.
Jak przeglądarka rozwiązuje href
Przeglądarka zaczyna od własnego adresu URL strony, odrzuca nazwę pliku i stosuje href do folderu, który pozostał. ../ przechodzi o jeden folder wyżej, ./ zostaje w tym samym, a ukośnik na początku zaczyna od katalogu głównego witryny.
Gdy otwierasz stronę dwukrotnym kliknięciem, katalogiem głównym jest Twój dysk, a nie projekt. Dlatego /css/site.css działa na serwerze, ale nie działa z adresu file://, podczas gdy ścieżka względna działa w obu przypadkach.
Style inline i elementy style
Element style trzyma CSS w stronie, co oszczędza jedno żądanie i przydaje się do małego bloku critical CSS stylującego pierwszy ekran. Nie może być cache'owany osobno i powtarza się na każdej stronie.
Atrybut style dotyczy jednego elementu i wygrywa z regułami z arkuszy stylów, chyba że używają !important. Stosuj go do wartości wyliczanych przez kod, a nie do zwykłego designu, którego nie da się wtedy zmienić w całej witrynie.
Element link
Strona z jednym podłączonym arkuszem stylów
Link znajduje się w sekcji head. Jego href jest względny wobec tego pliku HTML, więc styles.css musi leżeć w folderze css obok niego.
Element style i style inline
CSS osadzony i inline razem
Element style koloruje każdy p. Atrybut style na drugim akapicie wygrywa tylko dla tego elementu.
@import w arkuszu stylów
Importy są na początku. Mogą zawierać media query, warunek supports() lub warstwę kaskady.
CSS się nie ładuje? Przejdź po kolei tę listę
Dlaczego style nie działają i jak to sprawdzić
Objaw
Prawdopodobna przyczyna
Naprawa
404 dla CSS w zakładce Network
Zła ścieżka lub folder
Użyj narzędzia do sprawdzania ścieżki powyżej, na serwerze spróbuj ścieżki od katalogu głównego
Brak jakiegokolwiek żądania CSS
Literówka w rel lub link poza HTML
Napisz dokładnie rel="stylesheet" i umieść link w head
Działa lokalnie, nie działa online
Różna wielkość liter w nazwie pliku
Ciągle widać stare style
Cache przeglądarki
Twarde przeładowanie lub dodanie wersji, np. styles.css?v=2
Niektóre reguły są ignorowane
Nadpisane przez późniejsze lub bardziej specyficzne reguły
Zbadaj element, sprawdź kolejność i specyficzność
@import nic nie robi
Jest po innych regułach
Przenieś każdy @import na górę pliku
Zablokowane w konsoli
Wysłane z niewłaściwym typem treści
Serwer musi wysyłać text/css dla plików .css
Sprawdzanie ścieżki
Adres Twojej strony HTML
href w Twoim elemencie link
Przeglądarka pobierze:
Ten adres strony nie jest pełnym adresem URL. Zacznij go od https:// lub file:///
To plik na Twoim dysku. Ścieżki zaczynające się od / wskazują katalog główny dysku, a nie projektu.