Kaskadowe arkusze stylów mają wiele zalet. Pozwalają używać tego samego arkusza stylów w całej witrynie. Można to zrobić na dwa sposoby:
- łączenie z elementem LINK
- importowanie za pomocą polecenia @import
Zalety i wady zewnętrznych arkuszy stylów
Jedna z najlepszych rzeczy? Kaskadowe arkusze stylów jest to, że możesz ich używać, aby zachować spójność witryny. Najłatwiej to zrobić, łącząc lub importując zewnętrzny arkusz stylów. Jeśli używasz tego samego zewnętrznego arkusza stylów dla każdej strony swojej witryny, możesz być pewien, że wszystkie strony będą miały ten sam style.
Niektóre z zalet korzystania z zewnętrznych arkuszy stylów obejmują możliwość kontrolowania wyglądu i stylu kilku dokumentów jednocześnie. Jest to szczególnie przydatne, jeśli pracujesz z zespołem ludzi przy tworzeniu swojej witryny. Wiele zasad stylu może być trudnych do zapamiętania i chociaż możesz mieć wydrukowany przewodnik dotyczący stylu, jego posiadanie jest nudne ciągłe przerzucanie go w celu ustalenia, czy przykładowy tekst ma być pisany czcionką Arial 12 pkt, czy 14 pkt Kurier.
Możesz tworzyć klasy stylów, które można następnie wykorzystać w wielu różnych elementach HTML. Jeśli często używasz specjalnej czcionki Wingdings, aby podkreślić różne rzeczy na swojej stronie, możesz użyć Wingdings klasy, którą utworzyłeś w arkuszu stylów, aby je utworzyć, zamiast definiować konkretny styl dla każdego wystąpienia nacisk.
Możesz łatwo pogrupować swoje style, aby były bardziej wydajne. Wszystkie metody grupowania dostępne w CSS mogą być używane w zewnętrznych arkuszach stylów, co zapewnia większą kontrolę i elastyczność na Twoich stronach.
To powiedziawszy, istnieją również bardzo dobre powody, aby nie używać zewnętrznych arkuszy stylów. Po pierwsze, mogą wydłużyć czas pobierania, jeśli łączysz się z wieloma z nich.
Za każdym razem, gdy tworzysz nowy plik CSS i łączysz go lub importujesz do dokumentu, wymaga to od przeglądarki sieci Web wykonania kolejnego wywołania serwera sieci Web w celu pobrania pliku. A wywołania serwera spowalniają ładowanie strony.
Jeśli masz tylko niewielką liczbę stylów, mogą one zwiększyć złożoność Twojej strony. Ponieważ style nie są widoczne bezpośrednio w kodzie HTML, każdy, kto patrzy na stronę, musi pobrać inny dokument (plik CSS), aby dowiedzieć się, co się dzieje.
Jak utworzyć zewnętrzny arkusz stylów
Zewnętrzne arkusze stylów są pisane w taki sam sposób, jak osadzone i wbudowane arkusze stylów. Ale wszystko, czego potrzebujesz, aby napisać, to styl selektor i deklaracja. Nie potrzebujesz w dokumencie elementu ani atrybutu STYLE.
Jak w przypadku wszystkich innych CSSskładnia reguły to:
selektor { właściwość: wartość; }
Reguły te są zapisywane w pliku tekstowym z rozszerzeniem.
.css. Na przykład możesz nazwać swój arkusz stylów.
style.css.
Łączenie dokumentów CSS
Aby połączyć arkusz stylów, użyj elementu LINK. Ma to atrybuty rel i href. Atrybut rel informuje przeglądarkę, co łączysz (w tym przypadku arkusz stylów), a atrybut href zawiera ścieżkę do pliku CSS.
Istnieje również opcjonalny typ atrybutu, którego można użyć do zdefiniowania typu MIME połączonego dokumentu. Nie jest to wymagane w HTML5, ale powinno być używane w dokumentach HTML 4.
Oto kod, którego użyjesz do połączenia arkusza stylów CSS o nazwie styles.css:
A w dokumencie HTML 4 napisałbyś:
type="tekst/css">
Importowanie arkuszy stylów CSS
Importowane arkusze stylów są umieszczane w elemencie STYLE. Jeśli chcesz, możesz również użyć osadzonych stylów. Importowane style można również uwzględnić w połączonych arkuszach stylów. W dokumencie STYLE lub CSS napisz:
@importuj adres URL(' http://www.yoursite.com/styles.css');