Krótka lekcja CSS

menu ↓

Szokujące jest jak wielu webmasterów nie zna podstaw CSS. Oto minutowa lekcja rzeczy oczywistych.

Gazylion klas

CSS posiada gamę selectorów. Te najważniejsze działają w IE i należy z nich korzystać.

Zamiast tak okropnej konstrukcji jak:

<a class=„bla”>raz</a>
<a class=„bla”>dwa</a>
<a class=„bla”>trzy</a>
<a class=„bla”>cztery</a>
<a class=„bla”>…</a>

można by użyć po prostu:

<div class=„bla”>
<a>raz</a>
<a>dwa</a>
<a>trzy</a>
<a>cztery</a>
<a>…</a>
</div>

dzięki zmiance CSS z oznaczającego „tag a klasy bla”:

a.bla {}

na „tag a wewnątrz klasy bla”:

.bla a {}

Przy okazji pamiętaj, że tag jest lepszy od klasy.

Gazylion ID

Do oznaczenia obiektu, który występuje tylko raz używa się id i odpowiadającej mu konstrukcji CSS:

#id {}

Nie wolno nadawać tego samego ID więcej niż jednemu obiektowi. Do tego służą właśnie aż za dobrze znane klasy.

Link w komórce tabeli

Popularnym efektem jest podświetlenie się komórki tabeli w której jest link. Standardowe rozwiązanie używa bardzo nieeleganckiego JavaScript, a można to zrobić lepiej i prościej.

Zatem wymiana:

<table><tr>
<td onmouseout=„koszmar” onmouseover=„tragedia” onclick=„horror”>link</td>
<td onmouseout=„koszmar” onmouseover=„tragedia” onclick=„horror”>link</td>
<td onmouseout=„koszmar” onmouseover=„tragedia” onclick=„horror”>link</td>
</tr></table>

na niepohackowane:

<td><a>link</a></td>

albo od razu porzucając tabele:

<cokolwiek id=„menu”>
<a>link</a>
<a>link</a>
<a>link</a>
<a>link</a>
</cokolwiek>

a „brudną robotę” wykona CSS:

#menu a {display: block; margin: 0; padding: 0.5em 1em; border: 1px solid; border-color: white black black white;}

display: block zrobi z a element blokowy – rozciągnięty na całą dostępną szerokość, jeden w linii. Wyzerowany margines zapewni, że linki będą obok siebie, a ustawiony padding zwiększy ich powierzchnię (jeśil link jest w tabelce to dla odpowiedniego efektu td powinno mieć wyzerowany padding!). Ramka dla bajeru.

Autor: porneL.