Podstawy budowy szablonu CSS
admin, 01.05.2010
Obecnie wszystkie profesjonalne strony WWW korzystają z szablonów CSS (Cascading Styles Sheets – Kaskadowe Arkusze Stylów). Żeby zrozumieć układ i działanie CSS trzeba mieć przynajmniej podstawową znajomość (X)HTML. Szablony mogą istnieć jako osobne pliki z rozszerzeniem .css (arkusze zewnętrzne).
Mogą być też określone wewnątrz pliku HTML (arkusze osadzone). Najczęściej stosuje się jedne i drugie, w zależności od potrzeby. Arkusz określa ustawienia dla poszczególnych elementów kodu HTML. Decyduje np. o kolorze, rodzaju, wielkości i grubości czcionki. Zasadniczo budowa każdego wersu w arkuszu CSS wygląda podobnie. Najpierw umieszczamy tzw. selektor – jest czasami całe słowo, a czasem jedna litera, oznaczająca odpowiednik elementu kodu HTML np. H1 – nagłówek, body – zawartość strony itp. Kolejnym elementem jest klasa. Określa ona selektor np. p: hover – oznacza akapit na który najechano kursorem.
Można wydać polecenie, aby taki akapit np. zmienił w tym momencie kolor tła: p.hover {background: yellow;}. To co zawarte jest w klamrach nazywa się cechą (w naszym przypadku background) oraz wartością (tutaj „yellow”). Można użyć kilku klas w jednym wersie. Jest to tzw. zbiór klas: selektor.klasa1.klasa2 itp. Jedną z ciekawszych funkcji CSS jest możliwość dodania w arkuszu dowolnej liczby linków do innych arkuszy.