Zewnętrzny arkusz stylów <link "stylesheet"> @charset
Jak dołączyć arkusz stylów CSS z zewnętrznego pliku?
Zewnętrzny arkusz stylów <link "stylesheet">
<head> (...) <link rel="stylesheet" href="style.css"> (...) </head>
Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. Dodatkowo jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Pozwala to zaoszczędzić mnóstwo czasu (zwłaszcza niezdecydowanym 😉).
Wstawienie takiego zewnętrznego arkusza stylów jest bardzo proste. Wystarczy wpisać w treści nagłówkowej każdego z dokumentów (pomiędzy znacznikami <head> a </head>), przedstawioną powyżej linijkę. Deklaracje stylów zawarte w zewnętrznym arkuszu, zostaną automatycznie przeniesione do podanej strony (podczas jej wyświetlania). Wszystkie podstrony serwisu z osadzonym w swoim nagłówku takim poleceniem, uzyskają wygląd, określony w załączonym arkuszu stylów.
W pojedynczym dokumencie HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="stylesheet">. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później. Zwykle tworzy się pojedynczy zewnętrzny arkusz i załącza go w całym serwisie, czyli na wszystkich podstronach. Czasami jednak dodatkowo poza nim projektuje się osobne arkusze, ustalające wygląd np. odrębnych kategorii tematycznych serwisu. Mamy wtedy sytuację, gdy na stronie głównej jest dołączony tylko jeden arkusz stylów, a na podstronach kategorii tematycznych - po dwa.
A teraz kilka słów o tym, jak napisać taki zewnętrzny arkusz stylów. Jest on po prostu zwykłym plikiem tekstowym. Aby go utworzyć, wystarczy zwykły edytor tekstu, w którym piszemy takie same deklaracje stylów selektor { cecha: wartość }, jak w przypadku wewnętrznego arkusza stylów. Oczywiście można się posłużyć specjalnym edytorem CSS. Należy jedynie pamiętać, że plik będący zewnętrznym arkuszem stylów musi mieć rozszerzenie *.css!
Wstawienie białych znaków (spacje, tabulacje, znaki nowej linii) w arkuszu CSS nie ma wpływu na jego działanie. Dlatego możesz ułożyć wpisywane reguły CSS w taki sposób, aby były bardziej czytelne.
Znacznik LINK może znajdować się tylko i wyłącznie w nagłówku dokumentu.
Pliki arkuszy stylów mogą mieć negatywny wpływ na szybkość wczytywania strony. Jeśli chcesz się dowiedzieć, w jaki sposób zoptymalizować ładowanie arkuszy stylów, zobacz rozdział HTML5: Wstępne ładowanie, Priorytet ładowania.
Przykład <link "stylesheet">
A oto przykładowy zewnętrzny arkusz stylów:/* SELEKTORY: */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #003868;
background-color: #80B8E8;
margin: 6mm;
}
p {
text-align: justify;
}
pre, code {
font-size: 8pt;
}Ciekawostka
Przeglądarki zwykle umożliwiają formatowanie wszystkich oglądanych stron (bez względu na ich pochodzenie), przy użyciu arkusza stylów dostarczonego przez użytkownika. Pozwala to np. określić odpowiadającą nam wielkość czcionki, jej rodzaj, kolor tła oraz tekstu itd. Przykładowo, aby zaimplementować taką funkcję w przeglądarce Microsoft Internet Explorer, należy wybrać polecenie z menu programu: Narzędzia/Opcje internetowe... i kliknąć przycisk: Dostępność.... Następnie w otwartym oknie dialogowym należy zaznaczyć: Formatuj dokumenty używając mojego arkusza stylów, a poniżej wpisać ścieżkę do pliku arkusza (można również użyć przycisku Przeglądaj...).
Strona kodowa @charset
Jeżeli arkusz stylów zawiera narodowe znaki diakrytyczne, konieczne może być określenie strony kodowej. Można to zrobić umieszczając na samym początku arkusza stylów deklarację:
@charset "strona kodowa";
Przed deklaracją strony kodowej w arkuszu stylów nie mogą się znajdować żadne znaki - nawet spacje, tabulatory ani puste linijki.
Ostateczna strona kodowa zewnętrznego arkusza stylów, nawet jeśli nie określimy jej w sposób jawny, zostanie wyznaczona zgodnie z następującymi priorytetami:
- Deklaracja charset wysłana przez serwer wraz z plikiem arkusza stylów
- Znacznik BOM lub/i deklaracja
@charsetwstawione na początku arkusza stylów - Atrybut
charset="..."znacznika LINK, który osadza zewnętrzny arkusz stylów - Deklaracja strony kodowej dokumentu HTML, w którym arkusz stylów został osadzony albo innego arkusza, w którym został zaimportowany
- Jeżeli w żaden sposób nie udało się wyznaczyć strony kodowej, przyjmij UTF-8.
Pytania i odpowiedzi <link "stylesheet">
Jak dodać zewnętrzny arkusz stylów CSS?
Aby dodać zewnętrzny arkusz stylów CSS, należy stworzyć oddzielny plik CSS zawierający reguły stylów, a następnie użyć znacznika <link> w sekcji <head> dokumentu HTML, aby dołączyć ten plik do strony. Przykład: <link rel="stylesheet" href="nazwa_pliku.css">.
Jak podłączyć style CSS do HTML?
Aby podłączyć style CSS do HTML, można użyć znacznika <link> umieszczając go w sekcji <head> dokumentu HTML. Znacznik <link> powinien zawierać atrybut rel="stylesheet" oraz atrybut href wskazujący na ścieżkę do pliku CSS zawierającego style.
Jak zapisać plik CSS?
Plik CSS można zapisać jako zwykły plik tekstowy z rozszerzeniem *.css. W edytorze tekstu należy utworzyć nowy plik, wpisać w nim reguły stylów, a następnie zapisać go z odpowiednią nazwą i rozszerzeniem, na przykład: "style.css".
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
charset | 2 2009-05-21 | 1.5 2005-11-29 | 12 2015-07-29 | 9 2006-06-20 | 4 2009-06-08 |