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ć.
Co znajdziesz w tym wpisie
Metody dodawania CSS i JS do strony internetowej
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 styli CSS do strony
Dodawanie zewnętrznego arkusza CSS (osobnego pliku)
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 CSS 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".
Warto przeczytać:
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.