Metody podpięcia pliku CSS i JS do strony w HTML

Czas czytania: 2 minut

Istnieje kilka metod z pomocą, których można dodać do strony internetowej opartej o HTML arkuszy CSS oraz plików JS. Dziś postaram się wam je przybliżyć.

Metody dodawania CSS i JS

W praktyce w obu przypadkach istnieją 3 metody dodawania tych plików:

  • importowanie z pliku zewnętrznego
  • dodawanie bezpośrednio w kod HTML z pomocą:
    • <style></style> dla CSS
    • <script></script> dla JS (JavaScript)
  • dodanie na konkretny element (w HTML5 do JS już się nie stosuje).

Każda z tych metod posiada inną siłę. A w praktyce oznacza to, że posiada inną ważność i można nimi nadpisywać kolejne. Największą siłę ma metoda ostatnia. Pozostałe dwie uzależnione są od lokalizacji w kodzie witryny. A konkretnie ostatni będzie ważniejszy (jeśli będą pokrywały się odwołania do konkretnych elementów).

Dodawanie CSS do strony

Zewnętrzny arkusz CSS (osobny plik)

W celu dodania styli CSS do strony wystarczy umieścić pomiędzy znacznikami <head></head> poniższy kod:

<link rel="stylesheet" href="style.css">

Oczywiście w miejscu „style.css” umieszczamy nazwę naszego pliku. Do strony możemy dodać kilka różnych plików CSS. Dość istotna jest przy tym kolejność dodawania tych plików. Jak pisałam wcześniej mogą się one nadpisywać. Dlatego na początek umieszczamy np. pliki CSS należące do bibliotek CSS powinny być wyżej w kodzie strony niż nasz własny plik konfiguracyjny.

Dodawanie CSS bezpośrednio w kod strony

Kod CSS można również dodać z pomocą <style></style> bezpośrednio w kodzie witryny. Style przeważnie umieszcza się w nagłówku witryny czyli pomiędzy <head></head>.

Kod dodany w ten sposób swoją strukturom przypomina bardzo ten dodany z pomocą pliku np.

<style>
.przykladowa-klasa{
color:#000;
}
#przyklad-id{
color: #333;
}
</style>

Dodanie na konkretny element

Style CSS mogą zostać również dodane bezpośrednio do konkretnego elementu. Może nim być zarówno cały kontener z zawartością jak i akapit czy linki.

<p style="color:#333; border:1px solid #333;">przykładowy tekst</p>

Potrzebne style dodajemy tak jak w przykładzie style=”” i rozdzielamy je średnikami. Dodane w ten sposób style mają wyższy priorytet niż CSS dodawane przez osobny plik. Z tego też powodu edytory tekstu korzystają właśnie z tej metody edycji. Metoda ta jednak ma pewną wadę – tworzy dużo śmieciowego kodu. Dlatego zaleca się korzystanie z styli CSS w pliku zewnętrznym.

Dodawanie skryptów JS

Dołączany jako zewnętrzny plik

<script src="skrypt.js"></script>

lub również

<script type="text/javascript" src="skrypt.js"></script>

Pomiędzy znacznikami <script>

<script>
    alert ("Witaj Świecie!");
    //w tym miejscu umieszczamy kod JS
 </script> 

Dodatkowe atrybuty dla skryptów JS

Atrybuty te pojawiły się dopiero w HTML5. Ich głównym zadaniem jest kontrolowanie kolejności wczytywania skryptów na stronę. Prawidłowo użyte mogą one w istotny sposób wpłynąć na czas wczytywania się witryny.

Atrybut async

Jeśli dodamy do skryptów „async” (asynchronicznie) zostanie on wczytany niezależnie od ładowania witryny. Plik zostanie wczytany w tle. Z metody tej korzysta np. Google Analytics.

<script src=”skrypt.js” async></script>

Atrybut defer

Atrybut ten powoduje wczytanie skryptu na samym końcu. Oznacza to, że najpierw wczytany zostanie HTML a dopiero potem skrypt JS. Metoda ta może spowolnić czas wczytywania witryny.

<script src=”skrypt.js” defer></script>

W XHTML5 można również użyć zapisów takich jak: async="async".

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go

%d bloggers like this: