Sposoby osadzania stylów

Można powiedzieć, że im dalej od konkretnych obiektów znajdują się definicje stylów, tym większy mają zasięg działania, jednak mogą zostać zmienione przez definicje znajdujące się bliżej obiektów. Zasadą obowiązującą webmastera powinno być takie działanie, aby jak najwięcej stylów zdefiniować w arkuszach zewnętrznych.

Zewnętrzne arkusze stylów

Jak już wspominaliśmy, są to po prostu pliki tekstowe z rozszerzeniem .css. W nich umieszczamy definicje kolejnych stylów. Tak więc będziemy się zajmować dwoma plikami - dokumentem html oraz arkuszem stylów, które razem tworzą naszą stronę. Nie wolno zapomnieć o znaczniku <link />, który umieszcza się w nagłówku strony i który dołącza arkusz do dokumentu. W pełnym zapisie znacznik ten jest następujący:
<link rel="stylesheet" href="ścieżka do pliku .css" type="text/css" />

Ćwiczenie 3_1_2_1

Wykonaj stronę zawierającą kilka znaczników w którch wpisany jest tekst. Zdefiniuj w akuszu zewnętrznym czerwony kolor czcionki obiektu body. Do wykonania zadania zastosuj następujący kod HTML:

<!doctype html>

<html>

<head>

<title>Zewnętrzny arkusz stylów</title>

</head>

<body>

<p>

Wszystkie teksty powinny być wyświetlone czcionką czerwoną, ponieważ w zewnętrznym arkuszu stylów (plik style.css) ten kolor zadeklarowaliśmy dla <i>body</i>

</p>

<div>

tekst1

</div>

tekst2

</legend>

tekst3

</fieldset>

tekst4

</figcaption>

tekst5

</figure>

<span>

tekst6

</span>

<ul>

<li>tekst7</li>

<li>tekst8</li>

</ul>

<table>

<tr> <td>tekst9</td> <td>tekst10</td> </tr>

</table>

</body>

</html>

Musisz jeszcze utworzyć zewnętrzny arkusz stylów - w pliku style.css umieść następujący kod CSS:

body

{

color:red;

}

Tak powinna wyglądać wykonana strona:

Aby strona działała zgodnie z naszym zamierzeniem porzebne są dwa pliki: cwicz_3_1_2_1.html z kodem HTML oraz style.css (nie musi się nazwywać style) z kodem CSS.
W nagłówku dokumentu HTML, zapis <link rel="stylesheet" type="text/css" href="style.css" /> umożliwia pobranie stylu body z zewnętrznego arkusza. Otwórz szkielet.html i uzupełnij o ten wpis, ponieważ od tej pory znajdzie on zastosowanie w większości ćwiczeń.
Czcionka każdego obiektu jest czerwona, ponieważ wszystkie obiekty dziedziczą tę cechę po obiekcie body.

Ćwiczenie 3_1_2_2

Wykonaj ponownie poprzednie ćwiczenie, tym razem w arkuszu zewnętrznym zdefiniuj kolor czcionki kilku obiektów. Kod HTML będzie wyglądał identycznie (poza tekstem informującym o kolorze czcionki), natomiast kod CSS następująco:

body

{

color:red;

}

fieldset

{

color:blue;

}

table

{

color:green;

}

Tak powinna wyglądać wykonana strona:

Wewnętrzne arkusze stylów

Są umieszczane w nagłówku head dokumentu HTML i swoim zasięgiem obejmują tylko ten dokument w którym są osadzone. Ten sposób osadzania stylów stosowaliśmy już kilkakrotnie, między innymi podczas ostatnich zajęć, więc nie będziemy teraz robić kolejnego ćwiczenia, przypomnijmy tylko sposób osadzenia arkusza:

<head>

...

selektor

{

cecha:wartość;

...

}

...

</style>

</head>

Styl lokalny

Jest definowany w znaczniu otwierającym. Przykładowo dla akapitu może wyglądać następująco:

tekst akapitu

</p>

Co nowego tu widzimy? Tylko to, że styl deklarujemy w jednym wierszu jako wartość atrybutu style.

Zastosowanie wszystkich sposobów osadzania stylów - ćwiczenie 3_1_2_3

Wykonaj ponownie poprzednie ćwiczenie stosując dodatkowo wewnętrzny arkusz stylów oraz style lokalne. Tym razem kod CSS pozostawiamy bez zmiany. Kod HTML będzie następujacy:

<!doctype html>

<html>

<head>

<title>Zewnętrzny i wewnętrzny arkusz stylów, style lokalne</title>

fieldset

{

color:yellow;

}

span

{

color:blue;

}

</style>

</head>

<body>

W tym dokumencie zastosowano zewnętrzny oraz wewnętrzny arkusz stylów, a także style lokalne.

</p>

<div>

tekst1

</div>

<legend>tekst2</legend>

tekst3

</fieldset>

<figcaption>tekst4</figcaption>

tekst5

</figure>

<span>tekst6</span>

<ul>

<li>tekst7</li>

<li>tekst8</li>

</ul>

<table>

<tr> <td>tekst9</td> <td>tekst10</td> </tr>

</table>

</body>

</html>

Tak powinna wyglądać wykonana strona:

Pokaż style definiowane w arkuszu zewnętrznym, wewnętrznym oraz lokalnie.
Czciona akapitu jest czarna, bo tak ją zdefiniowaliśmy w stylu lokalnym.
Czcionka diva jest czerwona bo dziedziczy kolor z body.
Ciekawą sytuację mamy z czcionką fieldset: w arkuszu zewnętrznym zdefiniowno ją jako blue, w arkuszu wewnętrznym jako yellow i na koniec lokalnie jako green. Jak myślisz jaki kolor będzie wyświetlony? Oczywiście że green, jeżeli sądziłeś inaczej, oznacza to, że nie znasz i nie rozumiesz CSS. Cofnij się na sam początek zajęć z tej tematyki i ponownie wszystko przeanalizuj.
Uzasadnij kolor czcionki pozostałych obiektów.

Praca domowa

Wykonaj ponownie ćwiczenia z zajęć, stosując swój układ różnych obiektów.