Lekcja 1.4. - Kaskadowe Arkusze Stylu - Style osadzone, Style zewnętrzne


Style osadzone c.d.

Mówiąc o stylach osadzonych mamy na myśli style, które zostały umieszczone w sekcji head dokumentu źródłowego. Omówiliśmy już w jaki sposób możemy wpływać na własności bloków i elementów strony modyfikując własności całych grup znaczników poprzez przypisywanie im konkretnych własności stylu za pośrednictwem selektorów. Teraz podamy przykłady klas.

Z klasami zetknęliśmy sie już wcześniej omawiając style wpisane do znaczników za pomocą atrybutu CLASS. Powiedzieliśmy, że klasa jest niezależna od znacznika HTML i stanowi zbiór cech stylu. Wprowadzając klasę do jakiegoś wybranego znacznika powodujemy, że obsługiwany przez niego element czy blok przyjmuje od klasy wszystkie cechy jej stylu. Mówimy, że znacznik należy do tej klasy stylu. Klasa definiowana jest w stylach znajdujących się w sekcji head. Zobaczmy jak to wygląda na przykładzie:

<style type="text/css">
<!--
.adres {font-family:tahoma; font-size:8pt;color:navy; font-style:italic}
.malutka {font-family:verdana; font-size:7pt; color:black; background:yellow}
-->
</style>

Zauważmy, że definicja klasy zaczyna się od kropki, po której następuje identyfikator, czyli nazwa klasy. Zaraz potem następuje definicja stylu zawarta w nawiasach klamrowych, podobnie jak to było przy selektorach.

Identyczny zapis obu klas wprowadziliśmy do arkusza stylu tego dokumentu. Możemy zatem wypróbować działanie klas na konkretnych przykładach. Oto kod: <P class=adres>Jan Kowalski<BR>ul. Jasna 20 m 3<BR> 00-032 Warszawa</P>
A oto efekt działania klasy adres:

Jan Kowalski
ul.Jasna 20 m 3
00-032 Warszawa

Sprawdzimy teraz działanie klasy malutka. Oto kod: <P class=malutka>Ten tekst powinien być napisany małymi literami , tak jak to przewiduje klasa malutka</P>
A oto wynik:

Ten tekst powinien być napisany małymi literami , tak jak to przewiduje klasa malutka

Klasy są bardzo wygodnym sposobem określania stylu poniewaz wstawiamy je tam gdzie jest to nam potrzebne. Można jednak ograniczyć zakres działania klasy kojarząc ją z selektorem. Będzie ona wówczas działać jedynie w tej grupie znaczników, które selektor reprezentuje. Odpowiedni zapis wygląda następująco:

<style type="text/css">
<!--

.adres {font-family:tahoma; font-size:8pt;color:navy; font-style:italic}
.malutka {font-family:verdana; font-size:7pt; color:black; background:yellow}

p.specjalna {font-family:daufin, arioso; font-size:18pt; color:green}
ol.czerwona {font-family:arial; color:red; font-weight:bold}

p {color:blue;font-family:arial; font-size:10pt}

-->
</style>

Pierwsze dwa zapisy to poznane już przez nas klasy, dwa następne to klasy działające tylko w ramach znaczników określonych zastosowanymi selektorami. Pierwszy z nich to selektor paragrafu, a drugi listy uporządkowanej. Jak widać po nazwie selektora następuje kropka, a następnie nazwa klasy. Wypróbujemy ich działanie. Zauważmy także styl wpisany dla paragrafów za pomocą selektora p na końcu listy styli. Oczywiście wszystko wpisane jest również w arkuszu stylu w sekcji head tego dokumentu.

Oto kod: <P class=specjalna> To jest klasa specjalna. Zastosowana jest jedynie do znaczników paragraf. Funkcjonuje ona po wpisaniu do znacznika. Inne znaczniki paragrafu to styl podany selektorem p</P> i jego wynik:

To jest klasa specjalna. Zastosowana jest jedynie do znaczników paragraf. Funkcjonuje ona po wpisaniu do znacznika. Inne znaczniki paragrafu to styl podany selektorem p

Kod paragrafu bez klasy: <P>To jest zwykły paragraf bez wpisanej klasy. Jego styl został określony w arkuszu stylowym przez selektor p</P> Oto jego wynik:

To jest zwykły paragraf bez wpisanej klasy. Jego styl został określony w arkuszu stylowym przez selektor p

Klasa skojarzona z konkretnym selektorem nie działa w innych znacznikach. Zauważmy, że aby wpisać klasę do znacznika, posługujemy sie tylko jej nazwa, nie powtarzając selektora. Oto próba wpisania klasy do niewłaściwego znacznika:

Kod:<span class=specjalna>Tu nie działa</span>
Wynik: Tu nie działa

Możemy oczywiście powołać inną klasę specjalną o charakterze uniwersalnym lub klasę specjalną dla znacznika span.

Style zewnętrzne

Style zewnętrzne to nic innego jak taki sam arkusz stylu jak w sekcji head, z tą różnicą, że nie posiada obu znaczników STYLE i umieszczony jest w osobnym pliku tekstowym z rozszerzeniem .css. Style zawarte w arkuszu zewnętrznym mozna ściagnąć na dowolną strone (do dowolnego pliku Ÿródłowego ) przez spisanie do sekcji head następującego kodu:

<link rel="stylesheet" href="style2A.css" type="text/css">

Oczywiście należy podać prawidłową nazwę pliku .css i ścieżkę dostępu do tego pliku. To wszystko.


dalej