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 :-)
Definiuje nam odstępy między literami. Ponieważ jest to wartość ujemna, litery będą się trochę do siebie przyciskać.
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).
Używane przy listach. Określa nam, że lista nie będzie posiadać żadnych znaczków wypunktowania (typu kropka, kreska itp).
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.
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):
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:
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 :-)
-- XHTML --
-- CSS --
-- Ćwiczenia --