Lekcja 1.2. - Kaskadowe Arkusze Stylu - Wpisywanie stylu


Aby móc wpływać na własności bloków i elementów, język HTML został uzupełniony o dodatkowy atrybut, który wpisywany do dotychczas znaczników pozwala na sprecyzowanie stylu dla elementu obsługiwanego przez dany znacznik. ten nowy atrybut to STYLE, pozwala on nie tylko zmodyfikować całkowicie własności określanego znacznikiem elementu, ale także dodać całkowicie nowe własności, których element do tej pory nie miał.

Składnia stylu wpisanego w znacznik jest następująca:

<NazwaZnacznikaHTML Style="atrybut1:wartość; atrybut2:wartość1,wartość2 ; atrybut3:wartość">

Jak widać wartości atrybutów STYLE są umieszczone w cudzysłowach.

Pomiędzy cudzysłowami umieszczone są pary atrybut stylu - wartość połączone dwukropkiem, który przyporządkowuje wartość temu atrybutowi. Poszczególne pary atrybut-wartość oddzielane są między sobą średnikami.

Wartości może być więcej w przypadku jeśli określona wartość atrybutu stylu nie może być wykonana co występuje np. w przypadku czcionek. Alternatywne wartości można wówczas umieścić oddzielając je od siebie przecinkami.

Atrybuty stylu mogą być jedno lub dwuwyrazowe, w tym ostatnim przypadku oba wyrazy połaczone są - kreską.

A oto przykład konkretnego zastosowania stylu w znaczniku jednej z komórek tabeli:

<td style="font-family:verdana,tahoma; font-size:16pt; color:blue; background:yellow">

Styl może dotyczyć niewielkiego fragmentów textu, np pierwsza litera rozdziału może być w kolorze i powiększona. Cały paragraf może mieć już zdefiniowany styl i trzeba wówczas wprowadzić odrębny styl dla jego niewielkiego fragmentu. Służy do tego specjalnie wprowadzony znacznik blokowy SPAN. Oto przykład jego zastosowania:

<span style="font-family:daufin,tahoma; font-size:16pt; color:blue;font-weight:bold">P</span>Początek rozdziału...

A oto wynik działania kodu: Początek rozdziału
Jak już powiedzieliśmy style wpisane do znaczników mają priorytet lokalny, gdyż znajdują się tuż przy obsługiwanym bloku, są w zwiazku z tym czytane jako ostatnie, tuż przed jego sformatowaniem przez przeglądarkę.

Brak precyzyjnych bloków funkcjonalnych w poprzedniej wersji HTML skłonił reformatorów do wprowadzenia jeszcze jednego znacznika, a mianowicie DIV. Znaczniki DIV z pozoru przypominają dotychczasowe paragrafy, jednak ich możliwości są o wiele większe.
Przede wszystkim zagnieżdżają się wzajemnie i są bardziej niezależne. W niektórych przeglądarkach mają cechy niezależnego dokumentu. Można je formatować, nie tylko pod względem wymiarów, tła i innych parametrów stylu, ale także pozycjonować.

Pomimo pewnych różnic w kodzie, we wszystkich przeglądarkach, można je także chować poza inne elementy lub wysuwać na plan pierwszy. Z tego powody nazywamy je warstwami.

Oprócz poznanego juz atrybutu STYLE w znaczniki HTML możemy wpisywać jeszcze inny atrybut stylu, a mianowicie klasę - CLASS. Klasę definiujemy wraz z innymi elementami stylu w arkuszu stylu.

Klasa jest niezależnym elementem stylu nie związanym z żadnym znacznikiem, można powiedzieć jest zbiorem cech oznaczonych jedna nazwą. Można natomiast umieszczać klasę w dowolnym znaczniku. Przez takie umieszczenie znacznik dziedziczy atrybuty stylu od przedmiotowej klasy, przynależy do niej. Na bieżącej stronie zdefiniowane jest kilka klas, których działanie za chwilę pokażemy.

<span class=tytul> Tekst obsługiwany przez klasę tytul </span>  
Tekst obsługiwany przez klasę tytul

<span class="tekst"> Tekst obsługiwany przez klasę tekst </span>
  Tekst obsługiwany przez klasę tekst

<span class=mala> Tekst obsługiwany przez klasę mala </span>  
Tekst obsługiwany przez klasę mala

<span class="podpis"> Tekst obsługiwany przez klasę podpis</span>   Tekst obsługiwany przez klasę podpis

I jeszcze jeden nowy element jaki został wprowadzony przez style. To Identyfikator ID. Uzywany w dowolnym znaczniku jako jego atrybut powoduje, że znacznik ten, a zatem i blok lub element przez niego obsługiwany staje się łatwo wyodrębnianym elementem strony, co ułatwia nadawanie mu stylu, pozycjonowanie i manipulowanie nim.


Dwa rysunki powyżej zostały wprowadzone podobnym znacznikiem, ale w jednym znaczniku umieszczono identyfikator dla którego określono parametry stylu w arkuszu stylu umieszczonym w head, między innymi określono pozycję względem poprzedniego obrazka. Spowodowało to nałożenie na siebie obrazków. Puste miejsce po prawej stronie obrazków jest wynikiem braku atrybutu align w znaczniku zagnieżdżającym obrazek. Możemy je wypełnić dowolnym elementem, np blokiem tekstu wstawionym na podobnej zasadzie. Wstawimy tam za chwilę kody obrazków. Kliknij na drugim z obrazków.

<img src="wiosna0.gif">
<img id="ten" src="wiosna0.gif">

Aby przywrócić położenie kodu, kliknij prawym przyciskiem myszki i odśwież stronę. Możesz takż kliknąć na piwrwszy kwiatek.

Nie wszystkie przeglądarki obsługują strony www jednakowo sprawnie, ale na szczęście robią to coraz lepiej upodobniając się do siebie w kolejnych nowszych wersjach. Pozostajace róznice stanowią jednak problem, z którym musza się liczyć projektanci stron. Należałoby właściwie respektować wszystkie przeglądarki, niestety niektóre z nich nie stosują ogólnie przyjętych standardów lub nie wykonują niektórych poleceń języków skryptowych i stylów, a także nie odnawiają dynamicznie danych w celu uzyskania (rzekomej) większej szybkości działania lub odporności na włamania czy złośliwe kody. Projektowanie fragmentów kodu osobno dla każdej przeglądarki nie wydaje się już właściwą drogą projektowania ale czasami bywa konieczne.

dalej