Reguły CSS - ciąg dalszy

Kontynuujmy analizę pliku style.css naszego szablonu.

Tym razem podam tylko te atrybuty, które mogą być dla Ciebie nowe. Ewentualne dotarcie do tego, dlaczego coś wygląda tak a nie inaczej pozostawiam Tobie :-)

letter-spacing: -2px;

Definiuje nam odstępy między literami. Ponieważ jest to wartość ujemna, litery będą się trochę do siebie przyciskać.

background: #FFF url('../images/background-main.png') repeat-y;

Pełna definicja tła. Określony jest zarówno jego kolor, jak również podana jest ścieżka do obrazka, który ma stanowić tło oraz określone jest, że obrazek ten ma być powtarzany tylko w pionie (repeat-y - bo oś y to oś pionowa).

list-style-type: none;

Używane przy listach. Określa nam, że lista nie będzie posiadać żadnych znaczków wypunktowania (typu kropka, kreska itp).

display: block;

Zmienia nam sposób wyświetlania danego elementu. Musisz więdzieć bowiem, że znaczniki dzielą się na liniowe i blokowe. Liniowe to te, które mogą pojawiać się w jednej linii tekstu, jak na przykład <a>, <span>. Blokowe natomiast są wyświetlane jako prostokątne bloki (na przykład <div>, <ul>).

Ważną zasadą jest, że nie wolno umieszczać znaczników blokowych w liniowych (czyli na przykład pojemnika w akapicie), za to odwrotnie jak najbardziej (akapit w pojemniku).

W tym przypadku reguła wystąpiła aby elementy menu głównego wyglądały jak prostokątne przyciski.

border: 1px solid #CCC;

Pełne określenie obramowania, podana jest szerokość ramki (1px), rodzaj kreskowania (ciągłe czyli solid) i kolor (#CCC czyli szary).

Ramka niekoniecznie może być wokoło, możemy określić żeby wyświetlała się ona tylko z jednej strony elementu (jak to jest w przypadku znacznika blockquote):

border-left: 3px solid #FC0;

No i jeżeli dobrze spoglądam w zawartość pliku CSS, to nie widzę tam już żadnych nowych dla Ciebie atrybutów. Pozostało nam jedynie powrócić do deklaracji wyglądu klasy bottom:

.bottom
{
   clear: both;
}

O co chodzi z tym clear: both?

Jak pamiętasz, niektóre znaczniki miały zdefiniowane opływanie, czyli atrybut float. Gdybyśmy jednak pozostawili to w ten sposób, to już do samego końca wszystkie elementy strony starały by się opływać te znaczniki i wszystko by nam się rozsypało.

Dlatego właśnie w kodzie strony potrzebne były te dodatkowe, pomocnicze, puste pojemniki klasy bottom, których obecność mówi przeglądarce, że już ma sobie dą spokój i niczego niczym nie opływać, tylko po prostu zacząć od nowa wyświetlać kolejne elementy blokowe jeden pod drugim.

W ten sposób omówiliśmy całkowicie wygląd naszego w pełni profesjonalnie wykonanego szablonu strony internetowej :-)