Internet rozwija się wręcz rewolucyjnie. Dlatego też zaistaniała potrzeba szybkiego rozwoju nowoczesnych technologii tworzenia stron internetowych - takich ja CSS, czy XHTML. Tematem tej porady będą sposoby łaczenia CSS z HTML/XHTML.
W kodzie strony:
Jest to sposob 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.
|
Kod:
|
...
<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:
|
Kod:
|
<tag style="właściwość: wartość; właściwość: wartość;">Tu treść</tag> |
Sam jednak widzisz, że dla dwóch identycznych akapitów musiałm 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.
|
Kod:
|
...
<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 otwrzymujemy zdecydowanie bardziej przyjazny kod HTML.
W osobnym pliku:
Jest to metoda zdecydowanie najlepsza. Ma wiele zalet i właściwie brak wad. Przede wszystkim - otzrymujemy bardzo mały kod strony, po drugie - banalnie łatwą zmienę wyglądu poszczególnych elementów na setkach stron - osobny plik z CSS może być wykorzystany na nieskończonej liczbie stron www!
|
Kod:
|
<head>
<link rel="stylesheet" href="plik.css" type="text/css">
</head>
<body>
<p>To jest akapit</p>
<p>To jest akapit</p>
</body>
</html> |
|
Kod:
|
p { margin: 2px; font: arial, sans-serif; } |
Jak widzisz z przykładu pierwszego wynika, że do każdej strony dodajemy tylko 1 linijke 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 jednynie 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ź jst 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ęsci umieszcza się w osobnych plikach - np, wtedy, gdy nie na każdej stronie są tabele, a reguły tabel są bardzo rozbudowane i mogłyby znacznie spowolniać pracę. Korzysta się wtedy z importu pliku, a w kodzie wygląda to tak:
|
Kod:
|
@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.
Napisane przez Patryk 'yarpo' Jar
Wygląd liniowy
