Pytanie dziwaczne, bo kto by się rozczulał nad „pięknem” kodu HTML. Akurat to jest dla wielu twórców stron kwestia mało istotna, wręcz niewidzialna, bo używając programów WYSIWYG, nawet nie znają języka HTML. Ale tym razem chcę pokazać, jak arkusze stylów ułatwiają i upraszczają pisanie stron WWW.
W tym celu zaprezentuję pewien przykład, całkowicie hipotetyczny. Uprzedzam jednocześnie, że wiele spraw dotyczących stosowania CSS poruszę awansem, bez szczegółowego wyjaśniania, ale zapewniam, że na wszystko przyjdzie kolej. Tymczasem proponuję bardzo ogólne spojrzenie na kod źródłowy strony, napisanej na trzy sposoby. Zachęcam do porównania i wyciagnięcia wniosków.
More maiorum
Celem jest zaprojektowanie zaledwie prostej linii. Linia ma posiadać zróżnicowaną grubość – na szerokości lewego marginesu (30% szerokości ekranu) ma być grubsza, w ten sposób akcentować będzie numer następujacego pod nią nagłówka i podkreślać światło obok tekstu zasadniczego (tekst będzie posiadał 30% lewy margines). Rozwiązaniem, które się narzuca, jest zastosowanie tabeli (wklej do pustego dokumentu poniższy kod i zapisz jako stronę HTML):
<html> <head> <title>Szlaczek - wersja pierwsza</title> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="background-color: #FF0000" rowspan="2" width="30%"> <img src="_nul.gif" width="1" height="6"></td> <td style="background-color: #FF0000"> <img src="_nul.gif" width="1" height="3"></td> </tr> <tr> <td><img src="_nul.gif" width="1" height="3"></td> </tr> </table> </body> </html>
Przedstawiony sposób jest całkiem dobry – ma jedną świetną zaletę – pozwala uzyskać identyczny efekt wizualny w różnych przeglądarkach. Ale co by nie mówić – kod HTML jest skomplikowany i trudny w analizie. Ponadto zastosowany trick z jednopikselowym GIF-em to może sprytne, ale dość nieeleganckie rozwiązanie. Spróbujmy zatem wykonać szablon z zastosowaniem arkusza stylów.
In nova fert animus mutatas dicere formas corpora
„W nową postać zmienione chcę opiewać ciała…” – powtórzymy za Owidiuszem i jego Metamorfozami.
Zastosowanie arkuszy stylów to nowa postać dokumentu HTML… szkoda jednak, że nie ma czego opiewać, ponieważ pokazane niżej rozwiązania są ciekawe, ale nie dają gwarancji, że użytkownicy wszystkich przeglądarek ujrzą zamierzony efekt. Tym razem chodzi jednak o pewną ideę, której zrealizowanie jest możliwe przy założeniu, że wszystkie przeglądarki wspierają jak najszerzej arkusze stylów. Wklej do pustego dokumentu poniższy kod i zapisz jako stronę HTML.
<html>
<head>
<title>Ozdobny szlaczek - wersja druga</title>
<style type="text/css">
<!--
.d1 {
width : 30%;
border-top : 6px solid red;
}
.d2 {
width : 70%;
border-top : 3px solid red;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="d1"> </td>
<td class="d2"> </td>
</tr>
</table>
</body>
</html>W przykładzie tym zastosowałem tradycyjnie tabelę, natomiast atrybuty jej komórek są już zdefiniowane „stylowo”. Początkujących webmasterów chcę od razu uspokoić, że w następnych odcinkach będę wyjaśniał wszystkie kwestie związane z zapisem arkusza, objaśnię dokładnie, jak arkusz jest budowany i co oznaczają jego poszczególne elementy. Teraz chcę zwrócić uwagę, że kod HTML istotnie został skrócony i uproszczony.
A czy da się jeszcze prościej? Oczywiście. Tym razem wykorzystałem własności blokowe i pozycjonowania. Pozwoliło to zupełnie zrezygnować z tabeli (wklej do pustego dokumentu poniższy kod i zapisz jako stronę HTML):
<html>
<head>
<title>Szlaczek - wersja trzecia</title>
<style type="text/css">
<!--
.start {
position : relative;
width : 100%;
}
.b1 {
position : absolute;
top : 0;
height : 6px; width : 30%;
font-size : 1px;
background-color : Red;
}
.b2 {
position: absolute;
top : 0; left : 30%;
font-size : 1px;
height : 3px; width: 70%;
background-color : Red;
}
-->
</style>
</head>
<body>
<div class="start">
<span class="b1"> </span><span class="b2"> </span>
</div>
</body>
</html>Powie ktoś – „co to za uproszczenie”, skoro tak skomplikowane definicje stylów zajmują większą część kodu. Ale proszę zwrócić uwagę na zawartość między znacznikami <BODY> </BODY> – są to zaledwie trzy linijki prostego zapisu. Natomiast zdefiniowane raz własności arkusza stylów mogą być wykorzystane na stronie wielokrotnie, mogą być zapisane w arkuszu zewnętrznym i stosowane w wielu dokumentach HTML.