Łączenie CSS z HTML-em

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: osadzenie css łączenie css z html

Istnieje kilka podstawowych metod łączenia 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łówku strony:

Jest to już sposób lepszy od poprzedniego. Pozwala na wielokrotne wykorzystanie 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 // 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!

Patryk 'yarpo' Jar

szukaj: osadzenie css łączenie css z html

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!