Łączenie CSS z HTML-em

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-21

szukaj: osadzenie css łączenie css z html

Internet rozwija się wręcz rewolucyjnie. Dlatego też zaistniała potrzeba szybkiego rozwoju nowoczesnych technologii tworzenia stron internetowych - takich ja CSS, czy XHTML. Tematem tej porady będą sposoby łączenia CSS z HTML/XHTML.

W kodzie strony:

Jest to sposób najmniej zalecany, choć oczywiście prawidłowy. Dlaczego jest niezalecany? To proste, powoduje zwiększenie rozmiaru strony - a przecież CSS miał działać w drugą stronę! Poza tym, zmiana wyglądu kilku stron na raz jest dużo bardziej pracochłonna, ponieważ trzeba zmieniać każdy pojedyńczy wpis.

...
<body>
<p style="margin: 2px; font: 1em arial, sans-serif;">To jest akapit</p>
<p style="margin: 2px; font: 1em arial, sans-serif;">To jest akapit</p>
</body>
</html>

Jak widzisz to bardzo proste. Używa się zwykłego schematu:

<tag style="właściwość: wartość; właściwość: wartość;">Tu treść</tag>

Sam jednak widzisz, że dla dwóch identycznych akapitów musiałem dwukrotnie deklarować style. Ile roboty i ile kodu! A dodatkowo bardzo nieczytelna struktura dokumentu.

W sekcji head:

Ta metoda jest już lepsza od poprzedniej, gdyż pozwala tworzyć reguły dla konkretnych znaczników, a także klasy i pseudoklasy. Ma jednak także swoje mankamenty - z jednego arkusza stylów może korzystać tylko jedna strona - ta, w której arkusz ten jest zapisany.

...
<head>
<style type="text/css">
p {
 margin: 2px;
 font: 1em arial, sans-serif;
}
</style>
<body>
 <p>To jest akapit</p>
 <p>To jest akapit</p>
</body>
</html>

Teraz musiałem zadeklarować style tylko raz, tworzą odpowiednią regułę dla znacznika p - akapitu. Wszystkie akapity na stronie będą miały określony w tej regule wygląd. Dzięki temu - nie dość, że oszczędzamy dużo pracy pisząc tylko jedną regułę dla wszystkich elementów, to jeszcze zaoszczędzimy mnóstwo pracy przy dokonywaniu zmian wyglądu strony - będziemy musieli je przeprowadzać tylko w jednym - znanym nam miejscu. Dodatkowo otrzymujemy zdecydowanie bardziej przyjazny kod HTML.

W osobnym pliku:

Jest to metoda zdecydowanie najlepsza. Ma wiele zalet i właściwie brak wad. Przede wszystkim - otrzymujemy bardzo mały kod strony, po drugie - banalnie łatwą zmianę wyglądu poszczególnych elementów na setkach stron - osobny plik z CSS może być wykorzystany na nieskończonej liczbie stron www!

<head>
<link rel="stylesheet" href="plik.css" type="text/css" />
</head>
<body>
 <p>To jest akapit</p>
 <p>To jest akapit</p>
</body>
</html>

Oraz kod w osobnym pliku:

p { margin: 2px; font: arial, sans-serif; }

Jak widzisz z przykładu pierwszego wynika, że do każdej strony dodajemy tylko 1 linijce kodu. Natomiast kod CSS umieszczamy w osobnym pliku [o rozszerzeniu .css], do którego jedynie się odwołujemy [fragment href="ścieżka_do_pliku.css"]. Plik CSS tworzymy ze zwykłego pliku txt - zapisując taki plik [nawet w notatniku] zmieniamy jedynie rozszerzenie [po zmianie rozszerzenia, nadal używamy zwykłego edytora tekstowego do edycji pliku css]. A teraz pomyśl sobie, że masz 100 stron i na każdej masz zmienić rozmiar czcionki o 1px - niby nic, ale ile byłoby to roboty, gdybyś podczas tworzenia strony korzystał z pierwszej poznanej tu metody, ile w przypadku umieszczania CSS w sekcji head, a ile w osobnym pliku. Odpowiedź jest oczywista - najmniej pracy wymagałaby zmiana w osobnym pliku.

Dołączanie pliku css do CSS:

A to co znowu:-) Nic takiego. Czasem kod css jest tak rozległy, że pewne jego częśvi umieszcza się w osobnych plikach – np., gdy nie na każdej stronie są tabele, a reguły tabel są bardzo rozbudowane i mogłyby znacznie spowalniać pracę. Korzysta się wtedy z importu pliku. W kodzie wygląda to tak:

@import url(inny_plik.css);
p {
 margin: 2px;
 font: 1em arial, sans-serif;
}

W ten sposób dodatkowo zostanie wczytany jeszcze jeden plik css. Ważne: słowo kluczowe '@import' musi się znajdować na samej górze kodu CSS. Można jednocześnie zaimportować kilka dodatkowych plików - umieszczając linia pod linią kolejne '@import url();'.

Uwagi końcowe

Jest jeszcze jedna rzecz warta zapamiętania - jeśli używamy na jednej stronie wszystkich 3 sposobów łączenia CSS z HTML to ten który jest "bliżej" znacznka jest ważniejszy. Tzn., że jeśli mamy dołączony osobny plik z deklaracją akapitu, ale w sekcji head mamy ponownie regułę dla akapitu, to ważniesza jest ta z sekcji head, gdyż jest "bliższa" tagowi. Jednak, jeśli w kodzie strony mamy po raz kolejny zadeklarowane właściwości [wewnątrz tagu], wtedy ta deklaracja jest obowiązująca - na tym konkretnym elemencie.

Jeśli chcesz dowiedzieć się więcej to zapraszam do zapoznania się z moim kursem na temat kaskadowych arkuszy stylów.

Patryk 'yarpo' Jar

szukaj: osadzenie css łączenie css z html

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!