![]() ![]() ![]() ![]() ![]() ![]() |
|||
|
KURS HTML
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! <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... | |||