Dziecinnie proste tworzenie stron

Arkusz stylów CSS

Jak wyglądałyby dzisiejsze strony internetowe bez korzystania z kaskadowych arkuszy stylów ? Ta technologia została opracowana w latach 90 XX wieku, ale do dzisiaj się rozwija i ma się bardzo dobrze.

Amp.cms zawiera w sobie mechanizmy, które ułatwiają tworzenie arkuszy CSS. Dzięki znacznikom, jakie wpisuje się w panelu przy tworzeniu poszczególnych elementów, można łatwo "przyczepić" fragment CSS do konkretnej części strony, podczas, gdy inna część może być objęta innym stylem.

Z oczywistych względów, nie znajdziesz tu kursu pisania arkusza CSS. Po taką wiedzę odsyłam do innych źródeł. Jest tu natomiast kilka uwag, które pozwolą Ci napisać arkusz CSS specjalnie dla Twojego serwisu.

Jeżeli chcesz dodać do swojej strony obrazek, przeważnie musisz poprzedzić jego nazwę bezwzględną ścieżką dostępu. Jeżeli jednak obrazek jest dodawany poprzez dyrektywę CSS znajdującą się wewnątrz osobnego pliku CSS (na przykład poprzez wpisanie kodu: background-image:url(obrazek.jpg);), jego ścieżka będzie liczona względem położenia pliku CSS. Nie musisz w takim przypadku używać znacznika PATH przed nazwą obrazka.

Znaczniki umieszczone w szablonie, o ile zostały wykorzystane w Twoim CMS-e, zamieniane są na boxy. Zwróć uwagę, że strona, która wstawiana jest do znacznika CONTENT, zachowuje się tak samo jak box.

Treść każdego boxa zaczyna się od tagu <div> o id w postaci nazwy znacznika, pisanej małymi literami. W przypadku braku znacznika, id tworzone jest na podstawie nazwy (tytułu) elementu. Jeżeli używasz na stronie kilku instancji jednego modułu na raz, każda z nich będzie miała takie same nazwy klas. Jednak dzięki tagom <div>, można ostylować każdy moduł niezależnie.

Aby ostylować element, który ma atrybut class, użyj składni:

.nazwa_klasy {   }

Jeżeli chcesz, możesz doprecyzować, którego tagu (na przykład <table>) dotyczy styl dla tej klasy:

table.nazwa_klasy {   }

Aby ostylować element, który ma atrybut id, użyj składni:

#id_elementu {   }

Otoczenie fragmentu kodu tagiem <div id="id_elementu"> pozwala zawęzić działanie stylów tylko do tego fragmentu. Aby ostylować konkretne tagi (na przykład <table>) wewnątrz tego fragmentu, użyj składni:

#id_elementu table {   }

Aby ostylować elementy o określonej klasie wewnątrz tego fragmentu, użyj składni:

#id_elementu .nazwa_klasy {   }

o ile występuje tylko jeden tag o tej klasie. Jeżeli występuje ich kilka, dopisz w tym miejscu, którego tagu ma dotyczyć styl:

#id_elementu table.nazwa_klasy {   }

Jeżeli chcesz ostylować kilka elementów na raz, rozdziel ich identyfikatory przecinkami:

#id_elementu table.nazwa_klasy , #id_elementu td.nazwa_klasy {   }