CSS

Wstawianie stylów

  • 2007-04-02 23:54
  • 2 komentarze
  • 4940 odsłon
  • Oceń ten tekst jako pierwszy
Arkusze CSS można wstawić do dokumentu na trzy sposoby

Jako zewnętrzny plik


Służy do tego tag link:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" title="styl css" href="http://example.com/style.css" />
</head>


Dozwolone jest też deklarowanie wielu zewnętrznych arkuszy stylów w jednym dokumencie. Między takimi stylami użytkownik będzie mógł się przełączać z poziomu przeglądarki.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" title="domyslny" href="http://example.com/style_01.css" />
    <link rel="alternate stylesheet" title="drugi" type="text/css" href="http://example.com/style_02.css" />
    <link rel="alternate stylesheet" title="trzeci" type="text/css" href="http://example.com/style_03.css" />
    <link rel="alternate stylesheet" title="czwarty" type="text/css" href="http://example.com/style_04.css" />
</head>


W nagłówku dokumentu html (arkusz osadzony)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        div { color: red }
    </style>
</head>


Przy tagu, którego styl dotyczy (styl wpisany)


<body>
    <div style="color: green">Lorem ipsum</div>
</body>


W jednym dokumencie mogą zostać użyte wszystkie sposoby jednocześnie, ale należy pamiętać ze stanowią one kaskadę i będą się nawzajem zasłaniać. Styl wpisany jest dla przeglądarki najważniejszy, potem jest arkusz osadzony, a zewnętrzny arkusz stylów jest najmniej istotny.

W powyższym przykładzie mamy definicje koloru czcionki (color) dla tagu div w nagłówku strony i przy tagu. W uproszczeniu można powiedzieć ze przeglądarka zastosuje kolor czerwony z definicji z nagłówka strony, a później natrafi na definicje koloru znajdującą się przy tagu div i "pokoloruje" go na zielono.

Gdyby tagów div było więcej, to te bez deklaracji "color" były by czerwone gdyż dotyczyłaby ich deklaracja z nagłówka dokumentu.

2 komentarze

ptak82 2006-07-23 07:14

"arkusz styli", "Wstawianie styli" - NIE NIE "styli"! Jeśli już to stylów.

Akusz stylów, arkusza stylów, arkuszy stylów, no i tytuł też boski, przenieście z odpowiednio odmieniona forma :|