Zewnętrzny arkusz stylów definiuje wygląd strony internetowej. Możesz użyć arkusza stylów, aby określić takie rzeczy, jak rozmiar, kolor i czcionka tekstu, kolor przycisków lub położenie menu i pasków bocznych.
Kod używany w zewnętrznym arkuszu stylów
Istnieją dwa rodzaje kodu używane do stworzenia podstawowej strony internetowej:
- Hipertekstowy język znaczników (HTML): Definiuje zawartość strony internetowej. Zawiera rzeczywisty tekst ze znacznikami określającymi, czy sekcje tekstu są akapitami, nagłówkami czy listami. Zawiera również linki do obrazów, które pojawiają się na stronie oraz hiperłącza do stron zewnętrznych.
- Kaskadowe arkusze stylów (CSS): język kodowania używany do określenia sposobu wyświetlania treści. Definiuje sposób wyświetlania każdego typu elementu tekstowego i może wyświetlać ten sam typ elementu w różny sposób, jeśli należą one do różnych klas lub mają różne identyfikatory. Pozwala to elementom takim jak menu i listy zachowywać się bardzo różnie w głównym tekście strony internetowej.
Ogólnie rzecz biorąc, oddzielenie stylu od treści jest dobrym pomysłem, ponieważ pozwala skupić się na jednej rzeczy na raz. Staje się to jeszcze ważniejsze w zespole, pozwalając specjalistom od treści i prezentacji pracować niezależnie od reszty. Co być może ważniejsze, pozwala również na jednolite zastosowanie jednego zestawu instrukcji dotyczących stylu w całej witrynie.
Wizualną prezentację witryny można następnie zmienić z jednego arkusza stylów bez indywidualnej edycji każdej strony internetowej. W przypadku większych, złożonych witryn internetowych można użyć kilku arkuszy stylów do sterowania tekstem, menu i podziałami na stronach. Ten zbiór arkuszy stylów można nazwać „motywem”.
Używanie zewnętrznego CSS do łączenia HTML z CSS
Możliwe jest dołączenie stylu CSS bezpośrednio do kodu HTML strony internetowej, używając CSS do indywidualnego stylu każdego akapitu i nagłówka. Ten typ stylizacja inline generalnie nie jest to dobry pomysł, ponieważ tracisz wszystkie korzyści płynące z oddzielania stylu od treści. Przede wszystkim tracisz możliwość konsekwentnego aktualizowania całej witryny z jednego pliku.
Właściwym sposobem zastosowania stylu do witryny internetowej jest utworzenie jednego zewnętrznego pliku arkusza stylów dla każdego typu stylu, który chcesz zastosować, a następnie odwołanie się do tych plików z każdego pliku HTML. Na przykład możesz mieć następujące zewnętrzne arkusze stylów:
- tekst.css
- menus.css
- layout.css
Możesz wprowadzać zmiany w kodzie CSS w tych zewnętrznych arkuszach stylów bez zmiany ich nazwy plików, co oznacza, że odniesienia do tych plików w kodzie HTML wszystkich stron internetowych nie będą won zmieniony.
Przykłady HTML i CSS
Bardzo prosta strona HTML może zawierać następujący kod:
Wszystko o mnie!
Ta strona jest o mnie i dlaczego jestem niesamowita.
Jeśli chcesz zobaczyć, jak to wygląda w przeglądarce internetowej, skopiuj tekst do edytora tekstu, takiego jak Notatnik. Zapisz plik jako coś takiego jak „index.html” i przeciągnij go do przeglądarki, aby zobaczyć styl starej szkoły.
Prosty zewnętrzny arkusz stylów można połączyć z tą stroną, dodając następujący kod poniżej.
typ = "tekst/css"
href = "myStyle.css" />
Utwórz kolejny plik tekstowy o nazwie myStyle.css, znajdujący się w tym samym folderze co index.html, który zawiera następujący kod:
h1 {
kolor: #FF7643;
czcionka: Arial'
}
p {
kolor czerwony;
rozmiar czcionki: 1,5em;
}
Z CSS można zrobić o wiele więcej. Jeśli chcesz dowiedzieć się więcej, Szkoły W3 to świetne miejsce na rozpoczęcie.