webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 1

Łączenie CSS z HTML-em

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

szukaj: osadzenie css osadzenie css łączenie css z html łą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:

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:

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:

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:

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

Zagadnienia poruszane w tej części kursu:

Chcesz zaoszczędzić czas i pieniądze?
Projektowanie stron internetowych.
Zobacz nasze realizacje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org