Jak nazywa się metoda dołączania arkusza stylów do dokumentu HTML zastosowana w przedstawionym kodzie?
<head> <link rel="stylesheet" href="styl.css"> </head>
A. Styl wpisany, lokalny
B. Styl zewnętrzny
C. Styl wewnętrzny
D. Styl dynamiczny, generowany skryptem
W pokazanym fragmencie zastosowano styl zewnętrzny, ponieważ dokument HTML nie zawiera bezpośrednio reguł CSS, tylko odwołuje się do osobnego pliku styl.css. Robi to element <link> umieszczony w sekcji <head>. Atrybut rel="stylesheet" informuje przeglądarkę, że dołączany zasób jest arkuszem stylów, a href="styl.css" wskazuje ścieżkę do pliku CSS. To jest bardzo typowy i zalecany sposób pracy przy normalnych stronach WWW. Moim zdaniem to też najwygodniejsze rozwiązanie w praktyce, bo oddziela strukturę strony od jej wyglądu. HTML odpowiada wtedy za treść i semantykę, a CSS za kolory, marginesy, układ, fonty czy responsywność. Zewnętrzny arkusz można podłączyć do wielu podstron naraz, więc zmiana jednego pliku może poprawić wygląd całego serwisu. Dodatkowo przeglądarka może taki plik buforować, czyli nie pobierać go za każdym razem od nowa, co dobrze wpływa na wydajność. W branży jest to dobra praktyka: porządek w projekcie, łatwiejsza konserwacja kodu i mniejsze ryzyko bałaganu w HTML.
W tym przykładzie łatwo pomylić kilka sposobów dodawania CSS, bo wszystkie ostatecznie wpływają na wygląd strony. Trzeba jednak patrzeć na to, gdzie fizycznie znajdują się reguły stylów i jak są podłączane do dokumentu. Styl wpisany, nazywany też lokalnym albo inline, występuje bezpośrednio w konkretnym znaczniku HTML, na przykład w atrybucie style="color:red". Taki zapis działa tylko na ten jeden element i zwykle nie jest polecany do większych projektów, bo miesza treść z wyglądem i szybko robi się z tego niezły bałagan. Styl wewnętrzny to sytuacja, gdy w sekcji <head> znajduje się blok <style>, a w nim normalne reguły CSS. Kod nadal siedzi w tym samym pliku HTML, więc nie jest to arkusz zewnętrzny. Częsty błąd polega na tym, że ktoś widzi sekcję <head> i od razu zakłada styl wewnętrzny, ale tu ważniejszy jest element <link> oraz atrybut href prowadzący do pliku styl.css. Styl dynamiczny generowany skryptem oznaczałby, że JavaScript tworzy lub modyfikuje reguły CSS w czasie działania strony, na przykład przez DOM, zmianę klas albo dopisanie nowego elementu style. W pokazanym kodzie nic takiego się nie dzieje. To statyczne, standardowe podłączenie zewnętrznego arkusza CSS, zgodne z typową praktyką tworzenia stron WWW.