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

Stronę tą wyświetlono już: 213 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:

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

W powyższym kodzie:

Listing 2
  1. margin: 10px;

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

Listing 3
  1. 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:

Listing 4
  1. 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:

Listing 5
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="Description" content="opis strony" />
  6. <meta name="Keywords" content="klucz1, klucz2, klucz3" />
  7. <meta http-equiv="Content-Language" content="pl" />
  8. <meta name="Author" content="autora nazwisko i imię" />
  9. <link rel="Shortcut icon" href="adres ikony" />
  10. <style>
  11. p{ /* p - jest selektorem (nazwą) znacznika akapitu użytą by określić dla jakich elementów będą przypisane style wymienione pomiędzy klamrami {} */
  12. margin: 10px;
  13. background: #bbbbbb;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <!-- tutaj wstawiana będzie zawartość strony -->
  19. </body>
  20. </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):

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

dla HTML-4:

Listing 7
  1. <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:

Listing 8
  1. p{
  2. margin: 10px;
  3. background: #bbbbbb;
  4. }

Komentarze