Wstawianie stylów

Arkusze CSS można wstawić do dokumentu na trzy sposoby

Jako zewnętrzny plik

Służy do tego tag <link> - odnośnik:

<!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>
Lorem ipsum
</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.

CSS

2 komentarzy

"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 :|