Metody podpięcia pliku CSS i JS do strony w HTML
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ć.
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:
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).
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.
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>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.
Skoro omówiliśmy już jak dodajemy kaskadowe style (CSS) do strony internetowej to teraz pora na kod JavaScript.
<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.
Zasada jest praktycznie analogiczna jak w CSS
<script>
alert ("Witaj Świecie!");
//w tym miejscu umieszczamy kod JS
</script> 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.
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 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".
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…