Istnieje kilka podstawowych metod łaczenia CSS z HTML-em. W tej lekcji opiszę po
krótce każdy z nich.
W treści strony:
Jest to najdłuższy i najgorszy sposób, ponieważ nie można wtedy tworzyć
klas - a więc za każdym razem trzeba od nowa opisywać właściwości
kolejnego obiektu, nawet kiedy jest identyczny do poprzedniego.
Przykład:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Tytuł strony</title></head>
<body>
<p style=" // 1
color: blue; text-decoration: underline;"> // 2
To jest przykładowy text</p> // 3
</body>
<html>
|
Opis:
1 - otwieram tag akapitu 'p' i zaczynam określać stylami CSS wygląd tylko i
wyłącznie tego akapitu.
2 - opisuję każdą właściwość po kolei wg schematu: właściwość1:wartość;
właściwość2:wartość;
3 - Przykładowy napis, tak to wygląda.
Jak widzisz jest to sposób prosty, aczkolwiek bardzo pracochłonny. Przypuśćmy,
że nagle chciałbyś zmienić kolor każdego nagłówka na stronie (tych nagłówków
byłoby ze 100) :-( - mnóstwo roboty. Dlatego odradzam używanie tego sposobu
jako podstawowej metody umieszczenia stylów.
W nagłównku strony:
Jest to już sposób lepszy od poprzedniego. Pozwala na wielokrotne
wykorzytanie fragmentu kodu, ale tylko w obrębie danej strony. Cały opis dla
poszczególnych obiektów umieszczamy w sekcji head między znacznikami <style
type="text/css"> </style>
Przykład:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"> <html> <head> <title>Tytuł
strony</title> <style type="text/css">
p.klasa1 { właściwość1:wartość; właściwość2:wartość;} // 1
table {właściwość1:wartość; właściwość2: wartość;} // 2
span.gorne {właściwość1:wartość; właściwość2: wartość;} // 3
</style> </head> <body> <p class="klasa1">To
jest przykładowy text</p> // 4
| <table> // 5 <tr> <td> ... </td> </tr>
</table> |
<span >To jest fragment textu</span> // 6 </body>
</html>
|
Opis:
* - wg najnowszych standardów W3C
tag font jest przestarzały. Należy używać span.
1,2,3 - w sekcji head wstawiam kolejno opis właściwości kolejnych selektorów
4 - wstwiam tag i przypisuję do niego klasę. Przeglądarka wie, że wcześniej
taka klasa została opisana i nadaje wszystkie cechy tej klasy danemu
selektorowi [obiektowi na stronie]
5 - Zobacz na opis tabeli w sekcji head - nie użyłem klasy. Tak więc każda
tabela będzie posiadać cechy przypisane do 'table'.
6 - Tekst, który bedzie miał właściwości klasy 'gorne'
Jak widzisz nazwy klas mogą być inne niż klasa1, klasa2, itp.
Wykorzystując ten sposób zaoszczędziłem sporo miejsca. Być może nie jest
to tak widoczne w tej chwili, ale gdybym wstawił jeszcze kilka tabel i akapitów,
a każdy miałby wyglądać tak samo, to różnica byłaby już baaardzo
widoczna.- (zamiast zrobić jedną klasę, musiałbym za każdym razem wpisywać
kilka linijek kodu).
W osobnym pliku:
Jest to najlepszy i najpopularniejszy sposób łączenia htm z css. Aby móc
skorzystać z tej metody należy w jakiś sposób poinformować przeglądarkę z
jakiego pliku ma czytać. Wszystko dzieje się w sekcji head:
Przykład:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" // 1
href="plikstyli.css" // 2
type="text/css" /> // 3
</head>
<body>
W tym miejscu umieszczasz treść strony. Możesz skorzystać ze wszystkich klas
opisanych w pliku 'plikstyli.css'.
</body>
</html>
|
Opis:
1 - każę przeglądarce nastawić się na to, że za chwilę będzie wczytywać
plik css [stylesheet].
2 - Podaję ściężkę do pliku, w którym są opisane style. Powinien to być
plik o rozszerzeniu *.css.
3 - Określamy typ.
W tym miejscu nie muszę pisać chyba żadnego schematu, ponieważ w tym
wypadku należy zmienić jedynie ścieżkę do pliku, aby wszystko działało
jak trzeba. Główną zaletą tej metody jest to, że dzięki odesłaniu do
jednego pliku cały wygląd strony może być opisany w jednym miejscu, tak więc
oszczędność miejsca i czasu w ewentualnych zmianach. Z jednego pliku może
korzystać nawet kilka witryn, gdyż można wpisać np. 'href="http//www.strona.pl/plik.css"'
- a to sprytne!:-)
Mieszanka
Istnieje jeszcze jedna możliwość - pomieszanie wszystkich metod. Przykładowo,
chcesz aby wszystkie tabele na twojej witrynie wyglądały identycznie. Jest
jednak jedna tabele, którą chcesz jakoś szczególnie oznaczyć. Możesz wtedy
wczytać plik '*.css' w sekcji head, przypisać tabeli odpowiednią klasę, a
dodatkowo w tej wyjątkowej tabeli opisać style.
Przykład:
<table class="tabele" style="właściwość1:wartość; właściwość2:wartość;...właściwośćn:wartość;">
<tr>
<td> ... </td>
</tr>
</table>
|
Opis:
Zasada jest bardzo prosta -im "bliżej" znacznika tym bardziej znaczący
opis. Czyli najważniejszy jest opis w style=" ", trochę
mniej ważny jest opis w sekcji head, a najmniej znaczący w
osobnym pliku. Oczywiście chodzi jedynie o sytuacje, kiedy właściwości
jakiegoś selektora opisane są w więcej niż w jednym miejscu.
Tym sposobem skończyła się część teoretyczna tego kursu - przechodzimy
do praktyki! Jak na razie nie próbuj niczego ćwiczyć - po następnej lekcji będzie
to wskazane, ale nie teraz, gdyż jeszcze nie znasz żadnych właściwości:-)
opisywanych przez CSS, ale już spokojnie, ten stan nie utrzyma się długo:-).
Zapraszam dalej!
|
