KURS HTML


Witam po raz szósty! Co? Dzisiaj miało być o stylach? O rany! Zapomniałem! ;P Dobra, trzeba się do tego wziąć jak najszybciej. Style, jest to bardzo szeroki temat i bardzo możliwe, że nie uda mi się go wyczerpać w tym numerze... Ale co się odwlecze, to nie uciecze ;PP. Do czego służą style? Przede wszystkim, dzięki nim, nie jest potrzebne np. wpisywanie do każdej komórki tabeli (TD) parametru bgcolor=#FFFFFF. Za pomoca stylów, możemy to ustalić już w sekcji HEAD dokumentu i od razu dla wszystkich komórek... Poza tym, style pozwalają osiągnąć bardzo dużo nowych efektów, o których webmaster nie korzystający z CSS (Cascading Style Sheets - Arkuszy stylów kaskadowych) nawet nie śnił! CSS wprowadza całkiem nową erę w webmasterstwie. Pozwala na zdefiniowanie wszystkich parametrów textu, tła, koloru już w sekcji HEAD, bez konieczności wpisywania tych wszystkich parametrów w sekcji BODY! Jest przy tym jednak mały problem. Mianowicie różne przeglądarki, różnie interpretują CSS... Chodzi tu głównie o Netszkapę. Wiele świetnych efektów, które można oglądać pod IE, pod Netscapem po prostu nie wychodzi. Dlaczego napisałem: "mały problem"? Ponieważ ze statystyk wynika, że ok. (staty w Polsce) 95% użytkowników i-netu korzysta z przeglądarki Microsoftu, a pozostałe 5% i tak się prędzej, czy później przesiądzie na IE, bo Netszkapa coraz bardziej zaczyna oddalać się od produktu Billa G., który jest synem pana Gatesa ;)).

A więc zaczynajmy! Proponuję najpierw poznać sposoby wstawiania stylów do dokumentu (nie słyszę sprzeciwu ;P). Można to zrobić na trzy sposoby. Pierwszy sposób:

<STYLE TYPE="text/css"><!--
tu należy wstawić poszczególne style (jak to zrobić? o tym później)
--></STYLE>

Pewnie zastanawiacie się, dlaczego wstawiłem tutaj znaczniki komentarzy (<!-- i -->)... Dzięki nim, przeglądarki które nie interpretują stylów, będą ten wycinek kodu omijać i nie będą wyświetlać informacji o błędzie. Drugi sposób polega na utworzeniu osobnego pliku ze stylami (z rozszerzeniem *.css), aby go potem uruchomić, za pomocą (w sekcji HEAD):

<LINK REL="STYLESHEET" HREF="plik_ze_stylami.css" TYPE="text/css">

Trzecim sposobem jest zagnieżdżanie stylów wewnątrz dokumentu, jako parametr dla danego znacznika. Schematycznie może to wyglądać tak:

<TAG style="tu_wpisz_style_oddzielone_średnikami">Tekst, który zostanie poddany transformacjom</TAG>

Nie zwracajcie, broń Boże, uwagi na nazwę tagu ("TAG"), ponieważ jest to tylko schematyczny zarys. ;)) Teraz przyszła pora na omówienie poszczególnych stylów i ich wstawiania. Wykaz wszystkich stylów znajdziecie, klikając tutaj... Nie będę więc tu się rozlewał nad podstawowymi stylami, tylko opiszę jak je wstawić. Tak dla pierwszego, jak i drugiego sposobu, style można zagnieżdżać w dwojaki sposób. Pierwszą możliwością jest wpisanie nazwy tagu, a następnie (w nawiasach klamrowych), poszczególnych stylów, oddzielonych średnikami, np:

BODY {font-family:Arial; font-size:20pt}

oznacza, że w całym dokumencie będzie użyta czcionka Arial o rozmiarze 20 punktów. Jeśli natomiast chcemy takie parametry użyć np. tylko w obrębie znacznika <P>, to wtedy wpisujemy analogicznie:

P {font-family:Times New Roman; font-size:10pt}

Całość może wieć wyglądać tak:

<STYLE TYPE="text/css"><!--
BODY {font-family:Arial; font-size:20pt}
P {font-family:Times New Roman; font-size:10pt}

--></STYLE>

Oznacza to, że w całym dokumencie będzie obowiązywać czcionka Arial o wielkości 20 punktów, ale w obrębie znacznika <P> będzie czcionka Times New Roman o wielkości 10 punktów... W taki sam sposób można np. zdefiniować kolor tła, czy styl czcionki w okienku textowym, czego bez CSS nie dało się osiągnąć. Drugim wyjściem z sytuacji jest zastosowanie klas. Zagnieżdżamy je w ten sam sposób jak w poprzednim przykładzie, z tym że nie wpisujemy nazwy znacznika, a swoją, wymyśloną nazwę, np. jeśli chcemy wstawić klasę, o nazwie "tytul", to wstawiamy to w miejsce nazwy znacznika, tyle tylko, że z kropką na początku, np.

.tytul {font-family:Comic Sans MS; font-size:18pt}

Od tej chwili, w obrębie tego taga, w którym umieścimy parametr: class="tytul", będzie obowiązywać czcionka Comic Sans MS o wielkości 18 punktów... Tym tagiem może być np. <DIV>, <SPAN>, <FONT> i wiele, wiele innych. Spróbujcie!

Czyżbym jeszcze o czymś zapomniał? Tak, na pewno. Można by było się tak rozpisywać o każdym rodzaju stylów... Dlatego też, od następnego numeru, w Textach rozpocznę cykl artykułów o CSS. Mam nadzieję, że wyjaśnią one Wam wszystkie wątpliwości związane z tym wspaniałym dodatkiem dla autora witryny... A teraz pora na opisanie pseudoklas...

Pseudoklasy są używane przede wszystkim w ramach znacznika linku (<A>)... Umożliwiają zmianę wszystkich właściwości textu, który jest odnośnikiem. Wyróżniamy cztery pseudoklasy: :link, :active, :visited, :hover. Najciekawszą pseudoklasą jest oczywiście :hover, która umożliwia nam zmianę właściwości textu, po najechaniu na jego obszar myszką (coś w rodzaju textowego rolloveru). Pseudoklasy umieszczamy w ten sposób:

<STYLE TYPE="text/css"><!--
A:link {właściwości_linku}
A:active {właściwości_linku_aktywnego}
A:visited {właściwości_linku_odwiedzonego}
A:hover {właściwości_linku_po_najechaniu_na_niego_myszką}

--></STYLE>

Jeżeli chcemy zrobić na stronie kilka rodzajów linków (o innych kolorach, itp.), to dodajemy do tych powyższych definicji klasy, które wpisujemy po znaczniku A, ale przed pseudoklasą. Następnie w tagu <A> (już w sekcji BODY) umieszczamy parametr class=tytul... Przykład:

A.tytul:hover {właściwości}

To by było na tyle w tym numerze... Niestety, nie jestem w stanie więcej wypocić w tym miesiącu... W chwili, gdy piszę te słowa, jest 12 czerwca i jutro mam zdawać na piątkę z biologii... Sami więc widzicie, że nie mam się zbytnio z czego cieszyć... A więc oddaję do przeczytania 6 odcinek mojego kursu. Jak już mówiłem, od następnego numeru startuje seria artykułów o CSS, oraz - mam nadzieję - rozpocznę omawianie podstaw JavaScriptu... Zobaczymy też, co wyjdzie z planowanego przeze mnie wykazu darmowych serwerów, na których moglibyście umieścić swoją stronę... To się okaże w następnym numerze. A na razie mówię: "Chleb, bułki, kostka masła". Ehhhmm ;) Nie ta kartka ;)) No to ładnie... Może w drugiej kieszeni? Arrghh, kieszeń mi się, lekko mówiąc, roz...darła ;). Teraz to już jest całkiem fantastycznie... Kartka mi gdzieś wypadła, a zakończenie jakieś trzeba napisać... Spróbuję coś wymodzić na miejscu, chociaż nie ręczę za skutki takiego czynu :). Eeeeeee, yyyyyy, uuuuuu, mmmmmm, zzzzzzzzz... Aaaale mi się ziewa ;) Nic na to nie poradzę, że już jest godzina 24... Eureka! Napiszę: KONIEC! ;)))))) Tak, to było genialne...

PELE

[na górę]