WODIiP OPOLE - Style kaskadowe

STYLE KASKADOWE - JAK Z NICH KORZYSTAĆ?

Style kaskadowe - co to jest?

Jeżeli stworzyłeś już swoją stronę Internetową dosyć dawno temu, to zapewne nadszedł czas na "odmłodzenie" jej wyglądu. Każda strona po pewnym czasie się opatrzy i wygląda pospolicie. Najczęściej zmienia się wtedy tło, kolor czcionki, krój nagłówków, itp. I tu pojawia się problem. Jeżeli Twoja witryna składa się z wielu podstron to zmiany należy dokonać na każdej z nich. Jeżeli jednak korzystałeś przy tworzeniu stron ze styli kaskadowych to nie musisz zmieniać każdej z nich osobno, ale wystarczy zmienić tylko opis w jednym małym pliku, a wszystkie strony automatycznie zmienią swój wygląd! Style kaskadowe pozwalają nie tylko zmieniać szybko wygląd witryny, ale też podnosić jej atrakcyjność dzięki wielu możliwościom precyzyjnego określania wyglądu elementów na stronie. Ja jednak zajmę się tylko podstawami styli kaskadowych, tak aby poznać je na tyle by samodzielnie móc je wykorzystywać w najprostszej postaci.

Jeżeli znasz choć trochę język HTML, to zrozumienie stylów kaskadowych nie powinno sprawić Ci problemu. Otóż język HTML powstał bardzo dawno temu i nie przystaje do dzisiejszych stron Internetowych. Jeżeli chcesz uzyskać nietypowy wygląd strony musisz się nieźle natrudzić. Dlatego wprowadzono rozszerzenie HTML-a pod nazwą DHTML, ale i to nie pozwoli nam na łatwą i szybką zmianę wystroju strony. Style kaskadowe (CSS - czyli Cascading Style Sheets) pozwolą Ci precyzyjnie zdefiniować wygląd i położenie poszczególnych elementów Twojej strony i wszystko to zapisać w jednym pliku, z którego będą korzystały wszystkie nasze strony.

Do dzieła - pierwsza strona oparta na CSS

Chciałbym, aby tekst na moich stronach był wyświetlany na czerwono. Oczywiście mogę to łatwo osiągnąć w każdym edytorze stron Internetowych (np. FrontPage Express), ale późniejsza zmiana koloru wiąże się z ponowną edycją tej strony. Spróbujmy jednak zastosować style kaskadowe. Oto jak powinna wyglądać nasza strona:

<html>
<head>
<style type="text/css">
P {
color: red;
}
</style>
</head>
<body>
.................
</body>
</html>

W ten sposób tekst na naszej stronie będzie czerwony. A oto jak to działa:

- początek definicji stylu kaskadowego
- definicja dla akapitu (literka P oznacza akapit)
- kolor ustawiam na czerwony (red)
- koniec definicji akapitu
- koniec definicji CSS

Ważne aby definicję umieścić w nagłówku strony (blok <head> </head>). Pamiętaj jednak, że jeżeli formatujesz tekst ręcznie na swojej stronie, to nie zawsze format tekstu będziesz mógł zmieniać definiując style kaskadowe. Tak więc tworząc strony staraj sięj, aby nie formatować tekstów "ręcznie", oraz by wybierać style na pasku narzędzi edytora graficznego (najczęściej jest to lista rozwijana na lewo od wyboru kroju czcionki). Czyli jeżeli chcesz na stronie umieścić nagłówek, to najpierw wybierz styl Nagłówek 1 w FrontPage Express lub Heading 1 w FrontPage 2000 (dla nagłówka pierwszego poziomu - czyli "najważniejszego"). Zwykły tekst pisz zawsze stylem Zwykły w FrontPage Express; Normal w FrontPage 2000), zostanie on umieszczony wtedy wewnątrz znacznika <P>.

Przykładowa strona może więc wyglądać nastepująco:

<html>
<head>
</head>
<body>
<h1>Witaj na mojej stronie</h1>
<p>Miło mi, że tu zajrzałeś.</p>
</body>
</html>

- początek dokumentu HTML
- początek nagłówka
- koniec nagłówka
- początek opisu strony
- nagłówek pierwszego poziomu <h1>
- akapit <p>
- koniec opisu strony
- koniec dokumentu HTMA

Jeżeli chcesz zobaczyć jak wygląda taka strona to kliknij tutaj: >>>>>POKAŻ PRZYKŁAD<<<<<.

Połączmy teraz naszą przykładową stronę ze stylami kaskadowymi, a otrzymamy >>>>>POKAŻ PRZYKŁAD<<<<<:

<html>
<head>
<style type="text/css">
P {
color: red;
}
</style>
</head>
<body>
<h1>Witaj na mojej stronie</h1>
<p>Miło mi, że tu zajrzałeś.</p>
</body>
</html>

Otrzymaliśmy więc czerwony tekst. Wystarczy teraz tylko zmieniać nazwę koloru w wierszu color: red; na inny, a cały tekst napisany przy pomocy znacznika <P> zmieni swój kolor. Nazwy innych kolorów znajdziesz na TUTAJ. Zwróć uwagę, że nagłówek się nie zmienił, gdyż został napisany w znaczniku <h1>, a definicja stylu określa jedynie wygląd tekstu dla akapitu (znacznik <p>).

Korzystanie jednak ze stylów kaskadowych w taki sposób nie pozwoli nam na zmianę wyglądu innych stron. Dlatego wygodniej jest "wyprowadzić" definicję do osobnego pliku. Ten sam efekt co poprzednio uzyskamy jeżeli wpiszemy:

<html>
<head>
<link rel="stylesheet" href="styl.css" type="text/css">
</head>
<body>
<h1>Witaj na mojej stronie</h1>
<p>Miło mi, że tu zajrzałeś.</p>
</body>
</html>

Należy jednak dodatkowo utworzyć nowy plik z definicjami styli. W moim przykładzie plik ten nazywa się styl.css i jest zapisany w tym samym folderze co strona. Zawartość tego pliku musi być następująca:

P {
color: red;
}

Jeżeli chcesz sobie to przećwiczyć na moich przykładowych plikach to możesz je stąd POBRAĆ.

Wiersz <link rel="stylesheet" href="styl.css"> oznacza, że definicja styli dla tej strony jest zapisana w pliku o nazwie styl.css. Ten sam wiersz musisz zawsze dodać w nagłówku każdej nowej strony, która ma być oparta na stylach. Pamiętaj jednak o odwołaniach względnych, jeżeli twoja strona jest zapisana w podfolderze to wskazanie do pliku z opisem styli musisz poprawić na: href="../styl.css".

Tworzymy swoje pierwsze style

Zajmiemy się teraz głównie modyfikacją zawartości pliku styl.css. Jeżeli chcesz zmienić kolor tekstu w zwykłych akapitach na niebieski, to wystarczy poprawić opis na następujący (nie zapomnij odświeżać stron po modyfikacji pliku z opisem styli):

P {
color: blue;
}

Zmieńmy teraz sposób formatowania nagłówka naszych stron. Chcemy by był on zielony. Pamiętasz zapewne, że znacznik nagłówka pierwszego stopnia to <h1>, wystarczy więc w naszym pliku styl.css dopisać definicję dla tego znacznika, tak by ostatecznie otrzymać >>>>>POKAŻ PRZYKŁAD<<<<<:

P {
color: blue;
}
h1 {
color: green;
}

Oprócz definiowania kolorów można także zmieniać znacznie więcej parametrów tekstu. Możesz m.in. ustalić stały rozmiar czcionki. W tym celu należy wpisać wiersz:

font-size: 12pt;

dzięki czemu tekst będzie pisany czcionką o rozmiarze 12 punktów.

Aby ustalić krój tekstu możemy wpisać następujący wiersz:

font-family: verdana, georgia, arial, serif;

Zapis ten oznacza, że tekst ma być wyświetlany przy użyciu czcionki verdana, jeżeli jednak w systemie na którym ktoś ogląda naszą stronę nie będzie zainstalowanej tej czcionki, to wtedy ma zostać użyta georgia, a i jeżeli tej nie ma to kolejno należy stosować czcionki: arial, serif.

Jeżeli chcesz, aby tekst był wyświetlany w pogrubieniu to wpisz:

font-style: bold;

Jeżeli miał być pochylony (kursywa) to należy zamiast bold wpisać italic. Inne sposoby formatowania akapitów to:

line-height
word-spacing
letter-spacing

- wysokość wiersza, np wysokość 18 punktów:
- odstęp między wyrazami, np:
- odstęp między znakami, np:

line-height: 18pt;
word-spacing: 15;
letter-spacing: 5;

Spróbujmy to teraz zastosować w naszym pliku styl.css. Zmieńmy go tak aby miał postać >>>>>POKAŻ PRZYKŁAD<<<<<:

P {
color: blue;
font-family: verdana, georgia, arial, serif;
}
h1 {
color: green;
font-style: bold;
letter-spacing: 10;
}

Uzyskaliśmy pogrubiony zielony nagłówek z "rozstrzelonymi" znakami, oraz niebieski tekst pisany czcionką verdana.

Co można zrobić z tłem

Formatowanie tekstu to nie wszystko. Możesz także definiować postać znacznika <body>, oznaczającego początek treści strony. Jeżeli chcesz, aby Twoja strona była żółta to dopisz następujący wiersz >>>>>POKAŻ PRZYKŁAD<<<<<:

body {
background-color: yellow;
}

Ustalenie wzorzystego tła na podstawie pliku graficznego jest możliwe dzięki zapisowi >>>>>POKAŻ PRZYKŁAD<<<<<:

body {
background-color: yellow;
background-image: url(tlo.jpg);
background-repeat: repeat;
}

Tło strony jest żółte, a plik który będzie wyświetlany jako tło jest zapisany w pliku tlo.jpg. Wyraz repeat oznacza, że tło ma być powtarzane na całej stronie.

Pora na hiperłącza

Innym przykładem zastosowania stylów kaskadowych jest ustalenie efektów po najechaniu kursorem myszki na hiperłącze. Standardowo hiperłącza są oznaczane jako podkreślony niebieski tekst. Zdecydowanie ładniej wygląda hiperłącze bez podkreślenia, ale pisane za to innym kolorem, który będzie się zmieniał po najechaniu na nie myszką. Zapewne zauważyłeś ten efekt na hiperłączach stosowanych na tej stronie (ta strona też jest oparta na CSS). A oto przykład styli dla hiperłącz stosowanych na tej stronie:

a:link,
a:visited,
a:active
{
color: blue;
font-size: 8pt;
text-decoration: none;
font-weight: bold;
font-family: verdana, georgia, arial, serif;
}
a:hover
{
color: red;
font-size: 8pt;
text-decoration: none;
font-family: verdana, georgia, arial, serif;
font-weight: bold;
}

- definicja dla hiperłącza
- definicja dla hiperłącza odwiedzonego
- definicja dla hiperłącza aktywnego (wskazanego tabulatorem)

- kolor niebieski
- rozmiar czcionki 8 punktów
- brak efektu dla tekstu (np. underline oznacza podkreślony)
- "waga" (ważność) tekstu
- zastosowany krój czcionki

- definicja dla hiperłącza wskazywanego przez kursor myszki

- kolor czerwony
- rozmiar czcionki 8 punktów
- brak efektu dla tekstu
- zastosowany krój czcionki
- waga kroju

Pierwsze trzy wiersze oznaczają, iż będziemy stosować identyczny styl dla hiperłącz, odwiedzonych (czyli tych które wskazują stronę na której już byliśmy) i hiperłącz aktywnych (wskazanych np. tabulatorem).

Opis stylu dla hiperłącza wskazanego przez kursor myszki wprowadza zmianę koloru na czerwony. Poza tą zmianą nie ma innych. Zdecydowanie odradzam definiowanie np. innego kroju czcionki, rozmiaru, czy też ustawienie pochylenia (kursywy) itp., gdyż powoduje to zmianę szerokości tekstu hiperłącza, przez co nasza strona będzie "skakać" na ekranie gdy tylko zostanie wskazane hiperłącze. Jest to bardzo nieeleganckie.

Oczywiście opisane tu sposoby to tylko niewielka część opisu styli kaskadowych. Moim celem było jedynie przybliżenie tego ciekawego rozszerzenia standardu HTML. Pamiętaj, że stosowanie styli od samego początku pozwoli na łatwe i szybkie modyfikacje wyglądu strony. Zyskujesz też na mniejszej objętości plików HTML, gdyż wszystkie efekty nie są opisywane w treści strony, a w osobnym pliku który jest wczytywany tylko jeden raz, co daje zauważalne zmniejszenie kodu w szczególności gdy Twoja witryna składa się z wielu stron.

Style kaskadowe pozwalają też na znacznie więcej, ale to wymaga dokładnego ich poznania. Zapraszam do eksperymentowania ze stylami. Poniżej efekt uzyskany przy pomocy CSS:

TEKST Z CIENIEM

Polecam strony o stylach kaskadowych

http://www.x86.pl/dhtml/main.htm - Kurs DHTML magazynu x86

http://www.wsp.krakow.pl/~andrus/style/style.html - Style stosowane. Poradnik niesystematyczny

Jeżeli poznałeś już trochę zasadę działania styli to koniecznie zajrzyj pod adres poniżej. Znajdziesz tam bardzo przyjazny kreator styli:

http://www.netmagia.pl/sk/ - netm@gia: STYLEKreator online - style kaskadowe CSS, strony WWW w HTML

Wojewódzki Ośrodek Doskonalenia Informatycznego i Politechnicznego