Różnice pomiędzy formatowaniem za pomocą XHTML/HTML i CSS

Różnice pomiędzy formatowaniem za pomocą XHTML/HTML i CSS

Zacznę od prostego przykładu formatowania akapitu za pomocą atrybutów samego języka XHTML/HTML. Pamiętaj, że to sposób już przestarzały i niezalecany przez konsorcjum W3C.

<p><font color=”green” face=”arial”>Tekst akapitu</font></p>

Teraz sprawdzę, w jaki sposób ten sam akapit może być poddany formatowaniu za pomocą CSS.

<html>
<head>
<style type=”text/css”>
P
{
color: green; font-family: Arial;
}
</style>
</head>
<body>
<p>Tekst akapitu</p>
</body>
</html>

Listing ten jest przykładem arkusza stylów osadzonego w nagłówku dokumentu. Zwróć uwagę, że między znacznikami <style></style> znajduje się szereg poleceń, nadających wygląd akapitowi. Na moim przykładzie jest to kolor zielony oraz czcionka Arial.

Akurat ten przykład w stosunku do zapisu w czystym języku XHTML/HTML nie oszczędza cennych bajtów w kodzie strony, a wręcz produkuje ich znacznie więcej. Jednak wyobraź sobie, że dokument ma pięć akapitów o identycznym wyglądzie. W takim przypadku czysty XHTML/HTML musiałby powtarzać formatowanie dla każdego akapitu oddzielnie, natomiast CSS w postaci w powyższego listingu zajmuje się kompleksowo wszystkimi akapitami. Dopiero teraz rozumiesz, ile można zaoszczędzić i jak łatwo zmienić wygląd wszystkich akapitów.