W innych artykułach temat CSS przedstawiłem ogólne racje, które przemawiają za stosowaniem arkuszy stylów, opisałem także hierarchię elementów języka HTML – co okaże się ważne przy zrozumieniu jak działają style.
Jesteśmy zatem przygotowani, aby przejść do konkretów. Tym razem nauczycie się budowania arkusza stylów.
Caro infirma, spiritus autem promptus
Pokażę teraz, jak budować definicję stylu. W pierwszym wierszu umieszczony jest prosty przykład, w drugim ogólny schemat. W tym momencie nie jest istotne, czy jest to osobny plik CSS, czy też kod wpisany do dokumentu HTML (o tym, jak włączać arkusze stylów do dokumentów HTML napiszę w następnej części).
Jako selektor występuje tu znany z języka HTML element <P>. Gdybyśmy więc użyli powyższego arkusza jako szablonu dla, powiedzmy, 20 dokumentów HTML, to w każdym z nich element <P> będzie identycznie wyświetlony. Selektorem może być każdy element dowolnego języka użytego do oznaczania dokumentu (a więc nie tylko elementy języka HTML, ale inne, należące do języków pokrewnych, np. XML). Definicja stylu może odnosić się do pojedynczego elementu (np. BODY) lub do kilku (np. P, TD, A, OL, UL, LI). W tym drugim wypadku kolejne selektory oddzielamy od siebie przecinkami.
W komórkach oznaczonych szarym tłem znajdują się niezbędne znaki gwarantujące poprawność „interpunkcji” arkusza stylów. Jak widać, za selektorem znajduje się zamknięta w nawiasach klamrowych lista własności oraz przypisanych im wartości. Po własności występuje dwukropek, po nim pojawia się wartość. Jeśli lista własności jest dłuższa (w prezentowanym przykładzie wymienione są dwie własności), to po określeniu wartości stawiamy średnik. Ostatni na liście średnik nie jest obowiązkowy, ale warto go umieszczać, gdyż w przypadku dodawania nowych cech, łatwo zapomnieć o dopisaniu przed kolejną własnością średnika. Przeglądarki nie znoszą takiego zapominalstwa.
A teraz drugi przykład:
P {
font-style : italic; /* kursywa */
font-weight : bold; /* pogrubienie */
font-size : 14px; /* rozmiar czcionki */
font-family : Georgia, Times, serif; /* nazwa czcionki */
color : Navy; /* kolor nie jest */
/* własnością wyłącznie czcionek */
/* słowo kluczowe Navy zastąpione może być przez #000080 */
/* ostatni średnik nie jest konieczny, */
/* ale wygodny - na wypadek */
/* dopisywania kolejnych własności */
}Pokazana definicja jest bardziej rozbudowana, lista własności dłuższa. Widać, że arkusz może być sformatowany tak, aby definicja stylu zajmowała wiele linii – definicję można złamać w kilka wierszy – dla przeglądarki jest to zabieg nieistotny, ale jest pomocne, gdyż czyni zapis czytelniejszym.
Autorowi strony w zachowaniu porządku w arkuszu pomagają również komentarze. Powyższy przykład opatrzony został komentarzami ujętymi w charakterystyczne nawiasy: /* komentarz */. Właśnie w ten sposób umieszczamy własne objaśnienia w arkuszu stylów. Są one ignorowane przez przeglądarkę, więc można sobie nie żałować.
Ze względu na niebezpieczeństwo popełnienia błędu przy pisaniu arkusza (chociaż coraz częściej wyręczają autora w tym zadaniu specjalistyczne edytory) nie polecam innej metody – skrótowego zapisu stylów. W naszym przykładzie wyglądałoby to tak:
P { font: italic bold 14px Georgia, Times, serif; color: Navy }Widać, że po selektorze nie jest wymieniona konkretna własność fontu (np. font-size), lecz od razu piszemy font i dalej następuje wyliczenie wartości. Teoretycznie to jest dobre, bo skraca zapis, praktycznie – aż się prosi o popełnienie jakiegoś głupiego błędu. Dodatkowo trzeba przestrzegać kolejności wymieniania wartości określonej własności – w tym wypadku musi być tak: font-style, font-weight, font-size, font-family – a nie są to przecież wszystkie własności czcionki, jakie można definiować. Niektóre grupy własności liczą kilkanaście pozycji, więc przy pełnym zestawie łatwo pomylić kolejność, pogubić przecinki, dwukropki, średniki, cudzysłowy i w ogóle się pogubić. Nie polecam stanowczo. Z podobnego powodu sceptycznie zapatruję się na kwestię stosowania stylu lokalnego (in-line), ale o tym zagadnieniu napiszę więcej w dalszej części.
Jeżeli arkusz stylów ma być zapisany w osobnym pliku, np. „style.css”, to dokument taki nie powinien zawierać nic więcej poza definicjami poszczególnych stylów, w żadnym razie nie powinien zawierać jakichkolwiek znaczników HTML.
Oto przykładowa zawartość pliku *.css:
/* start */
P, TD,TH, A, OL, UL, LI, H1, H2, H3 {
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : 12px;
}
H1 {
font-size : 24px;
}
H2 {
font-size : 20px;
}
H3 {
font-size : 17px;
}
/* koniec */Po tym ogólnym i formalnym spojrzeniu na budowę arkusza stylów, gdy wiemy już, jakie zasady interpunkcji stosuje się do najważniejszych składników definicji stylu, zajmę się w następnych odsłonach bliższym opisem, różnych postaci selektorów, następnie będzie małe co nieco o własnościach stylów i ich grupowaniu, a na koniec krótko o ich wartościach i jednostkach, które są przy tym wykorzystywane. Do przedstawionych zagadnień będę zresztą wracał wielokrotnie, z czasem coraz bardziej szczegółowo.