Istnieje kilka metod z pomocą, których można dodać do strony internetowej opartej o HTML arkuszy CSS oraz plików JS (JavaScript). Dziś postaram się wam je przybliżyć.
Metody dodawania CSS i JS do strony internetowej
W praktyce w obu przypadkach istnieją 3 metody dodawania plików bądź samych skryptów CSS i JS do witryn internetowych. Chodzi więc następująco o:
- 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 ma swoje wady i zalety. Jednocześnie też nadaje używanemu kodowi pewną ważność. A w praktyce oznacza to, że mogą siebie nawzajem nadpisywać i unieważniać lub dodawać nowe cechy.
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 (HTML)
Dodawanie zewnętrznego arkusza CSS (osobnego pliku)
W celu dodania styli CSS do strony korzystającej z HTML wystarczy umieścić pomiędzy znacznikami <head></head> poniższy kod:
<link rel="stylesheet" href="style.css">Oczywiście w pomiędzy znacznikami href="" zamiast „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 HTML
Kod CSS można również dodać z pomocą <style></style> bezpośrednio w kodzie witryny jako blok. Style przeważnie umieszcza się w nagłówku witryny czyli pomiędzy <head></head>.
Kod dodany w ten sposób swoją strukturom przypomina ten, który umieszczamy w osobnym pliki i w praktyce jest taki sam. Z tym, że przeważnie obecnie dodaje się kod bezpośrednio w kod w sytuacji kiedy chcemy napisać coś z pliku CSS.
Przykładowe zastosowanie:
<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
Skoro omówiliśmy już jak dodajemy kaskadowe style (CSS) do strony internetowej to teraz pora na kod JavaScript.
Dołączany jako zewnętrzny plik
<script src="skrypt.js"></script>lub również
<script type="text/javascript" src="skrypt.js"></script>Jeżeli planujemy używać dużo kodów JS to lepiej użyć 2 metody.
Pomiędzy znacznikami <script>
Zasada jest praktycznie analogiczna jak w CSS
<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 szybkość 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ą.