Witryny to połączenie stylu i struktury. W dzisiejszej sieci najlepiej jest zachować te dwa aspekty witryny oddzielnie.
HTML zawsze był tym, co zapewnia witrynie swoją strukturę. We wczesnych dniach Internetu HTML zawierał również informacje o stylu. Elementy takie jak znacznik był zaśmiecony całym kodem HTML, dodając informacje o wyglądzie i odczuciu wraz z informacjami strukturalnymi. Ruch sieciowy skłonił nas do zmiany tej praktyki, a zamiast tego wypchnięcia wszystkich informacji o stylach do CSS lub Cascading Style Sheets. Idąc dalej, aktualne zalecenia są takie, że używasz tzw. "Zewnętrznego arkusza stylów" do potrzeb stylizacji twojego serwisu. Zalety i wady zewnętrznych arkuszy stylów
Jedną z najlepszych rzeczy w Kaskadowych Arkuszach Stylów jest to, że możesz ich używać, aby zachować spójność całej witryny. Najłatwiej to zrobić, aby połączyć lub zaimportować zewnętrzny arkusz stylów. Jeśli używasz tego samego zewnętrznego arkusza stylów dla każdej strony witryny, możesz mieć pewność, że wszystkie strony będą miały ten sam styl. Możesz także ułatwić wprowadzanie zmian na przyszłość. Ponieważ każda strona korzysta z tego samego zewnętrznego arkusza stylów, każda zmiana tego arkusza wpłynie na każdą stronę witryny. Jest to o wiele lepsze niż konieczność indywidualnej zmiany każdej strony!
Zalety zewnętrznych arkuszy stylów
- Możesz kontrolować wygląd i działanie kilku dokumentów naraz.
- Jest to szczególnie przydatne, jeśli pracujesz z zespołem ludzi, aby stworzyć swoją stronę internetową. Wiele reguł stylu może być trudnych do zapamiętania, a mimo, że możesz mieć wydrukowany przewodnik po stylu, nieefektywne i nużące jest ciągłe przewijanie go w celu ustalenia, czy przykładowy tekst ma być napisany czcionką Arial 12 punktów, czy kurierem 14 punktowym. Mając wszystko w jednym miejscu, a ponieważ to miejsce jest również miejscem, w którym wprowadzasz zmiany, możesz znacznie ułatwić konserwację.
- Możesz tworzyć klasy stylów, które następnie mogą być używane na wielu różnych elementach HTML.
- Jeśli często używasz określonego stylu czcionki, aby podkreślić różne rzeczy na stronie, możesz użyć atrybutu klasy, który ustawiłeś w arkuszu stylów, aby uzyskać ten wygląd i styl, zamiast definiować konkretny styl dla każdej instancji nacisk.
- Możesz łatwo grupować swoje style, aby były bardziej wydajne.
- Wszystkie metody grupowania dostępne dla CSS mogą być używane w zewnętrznych arkuszach stylów, co zapewnia większą kontrolę i elastyczność na stronach.
Wady zewnętrznych arkuszy stylów
- Zewnętrzne arkusze stylów mogą wydłużyć czas pobierania, zwłaszcza jeśli są bardzo duże. Ponieważ plik CSS jest oddzielnym dokumentem, który musi zostać załadowany, będzie miał wpływ na wydajność, aby wykonać to pobranie.
- Zewnętrzne arkusze stylów bardzo szybko stają się duże, ponieważ trudno jest określić, kiedy styl nie jest już używany, ponieważ nie jest usuwany po usunięciu strony. Właściwe zarządzanie plikami CSS jest ważne, zwłaszcza jeśli wiele osób pracuje nad tym samym plikiem.
- Jeśli masz tylko jedną stronę internetową, posiadanie zewnętrznego pliku CSS może nie być konieczne, ponieważ masz tylko jedną stronę do stylizacji. Wiele korzyści z zewnętrznego CSS jest traconych, gdy masz tylko jedną stronę strony.
Jak utworzyć zewnętrzny arkusz stylów
Zewnętrzne arkusze stylów są tworzone z podobną składnią do arkuszy stylów na poziomie dokumentu. Jednak wszystko, co musisz uwzględnić, to selektor i deklaracja. Podobnie jak w arkuszu stylów na poziomie dokumentu, składnia reguły jest następująca:
selector {property: value;}
Zapisz te reguły w pliku tekstowym z rozszerzeniem .css. Nie jest to wymagane, ale jest to dobry nawyk, abyś mógł od razu rozpoznać swoje arkusze stylów w spisie katalogów.
Po utworzeniu dokumentu arkusza stylów należy go powiązać ze stronami internetowymi. Można to zrobić na dwa sposoby:
- Łączenie
- Aby połączyć arkusz stylów, użyj znacznika HTML. To ma atrybuty rel, rodzaj, i href. Atrybut rel informuje o tym, co łączysz (w tym przypadku arkusz stylów), typ definiuje typ MIME dla przeglądarki, a href jest ścieżką do pliku .css.
- Importowanie
- Można użyć zaimportowanego arkusza stylów w arkuszu stylów na poziomie dokumentu, aby można było zaimportować atrybuty zewnętrznego arkusza stylów, nie tracąc przy tym żadnych dokumentów. Nazwiesz to w podobny sposób, jak wywołanie połączonego arkusza stylów, ale musi on zostać wywołany w deklaracji stylu na poziomie dokumentu. Możesz zaimportować tyle zewnętrznych arkuszy stylów, ile potrzebujesz, aby utrzymać swoją witrynę.
Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy'ego Girarda w dniu 8/8/17
