Używanie styli lokalnych, globalnych i zewnętrznych w HTML-u

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3948 razy

Style lokalne (inline)

Jak już wcześniej wspominałem na wstępie tego działu, praktycznie każdemu znacznikowi HTML można przypisać atrybut style, któremu można a nawet trzeba przypisać pewną wartość. Tą wartością są style zmieniające sposób, w jaki sam znacznik lub zawartość znacznika jest wyświetlana. Oto przykładowy kod:

<p style="margin: 10px;background: #bbbbbb;">Jakiś tam tekst</p>

W powyższym kodzie:

margin: 10px;

oznacza ustawienie marginesu znacznika <p> (akapitu)) na 10px z każdej strony (lewa, prawa, dolna i górna). Druga część:

background: #bbbbbb;

ustawia kolor tła w tym przypadku w formacie szesnastkowym jako trzy pary liczb szesnastkowych składających się na składowe koloru: #bbbbbb.

Tego typu formatowania powinno się używać jak najrzadziej i tylko w wyjątkowych sytuacjach, gdy wiadomo, że bardzo rzadko kiedy tego typu formatowanie będzie używane na stronie/podstronach.

Koniec końców wynik działania powyższego kodu będzie następujący:

Jakiś tam tekst

Style globalne

Na danej stronie znacznik <p> będzie wykorzystywany prawdopodobnie wielokrotnie, w związku z czym kod:

style="margin: 10px;background: #bbbbbb;"

trzeba będzie powielać wielokrotnie, za każdym razem, gdy użyty zostanie znacznik <p>. Gdyby istniał tylko jakiś przebiegły (żeby nie powiedzieć sprytny) sposób na uporanie się z tym problemem. Na szczęście, taki przebiegły (żeby nie powiedzieć: sprytny) sposób istnieje. Otóż tak się bowiem składa, że można wstawić style oddzielnie w nagłówku strony wewnątrz specjalnie do tego celu przeznaczonego znacznika <style>. Oto przykład dla HTML-5:

<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="Description" content="opis strony" /> <meta name="Keywords" content="klucz1, klucz2, klucz3" /> <meta http-equiv="Content-Language" content="pl" /> <meta name="Author" content="autora nazwisko i imię" /> <link rel="Shortcut icon" href="adres ikony" /> <style> p{ /* p - jest selektorem (nazwą) znacznika akapitu użytą by określić dla jakich elementów będą przypisane style wymienione pomiędzy klamrami {} */ margin: 10px; background: #bbbbbb; } </style> </head> <body> <!-- tutaj wstawiana będzie zawartość strony --> </body> </html>

W ten sposób, dla wszystkich akapitów na danej stronie zostaną ustawione wymienione w kodzie style wyświetlania.

Zewnętrzne style CSS

Globalne style są fajne, ale co jeżeli ja mam np. 100 podstron! I teraz dla każdej z nich muszę te wszystkie style umieścić w nagłówku, jeżeli chcę, aby one działały? Otóż nie, albowiem poszedł ktoś po rozum do głowy i wymyślił, że można by te style przechowywać oddzielnie w innym pliku i je ładować tylko na każdej z tych stron w nagłówku w taki oto sprytny sposób (dla HTML-5):

<head><link rel="Stylesheet" href="style.css" /></head>

dla HTML-4:

<head><link rel="Stylesheet" type="text/css" href="style.css" /></head>

Jak widać, plik powinien mieć rozszerzenie CSS, który powinien być zapisany z użyciem kodowania ASCII i zawierać np. taki oto zapis styli:

p{ margin: 10px; background: #bbbbbb; }
Propozycje książek