CSS to technologia, która pozwala na dużą swobodę w formatowaniu dokumentów HTML. Upraszcza nie tylko tworzenie stron WWW, ale również ich późniejszą modyfikację. W artykule stawiamy pierwsze kroki w definiowaniu stylów.
Początki internetu były skromne. Miał służyć naukowcom do wymiany poglądów i porównywania wyników badań. Dopiero z biegiem lat uległ komercjalizacji.
Pierwsze strony internetowe były oparte na języku HTML, który pozwalał zarówno na przekazywanie treści, jak i odpowiadał za prezentację, czyli wystrój graficzny strony.
Gwałtowny rozwój sieci sprawił, że rozpoczęto prace nad stworzeniem technologii ułatwiającej formatowanie dokumentów HTML. Tak powstały Kaskadowe Arkusze Stylów – CSS. Tworząc arkusz CSS ustalamy, jak będzie wyglądał dokument HTML, np. czy będzie miał tło czarne, białe, czy tłem będzie zdjęcie. Gdy będziemy chcieli np. zmienić kolor tła na wszystkich podstronach, wystarczy dokonać zmiany włącznie w jednym pliku CSS.
Co to jest styl?
Styl CSS jest to zbiór reguł, którym mają podlegać wskazane znaczniki lub całe sekcje znaczników HTML.
Strona z zastosowanymi stylami CSS
Prezentowana witryna została stworzona przy użyciu technologii XHTML (obecny standard, który zastąpił HTML, bardzo zbliżony do HTML 4.0) i CSS 2.1 (obowiązująca wersja CSS). Witryna składa się ze strony HTML oraz pliku CSS, który ustala wszystkie style. Strona wykorzystuje metodę projektowania bez użycia tabel (rewolucja w podejściu do tworzenia stron).
Strona z wyłączonym stylami
Ukazuje się witryna pozbawiona formatowania, ponieważ wyłączono style. Treść nie ma na tej stronie nic wspólnego z formatowaniem tekstu. I o to właśnie chodzi w CSS.
Kod HTML prezentowanej witryny
Żaden element w kodzie nie ma parametrów! Są tylko najprostsze znaczniki {html}
{/html} czy {html}
{/html} pozbawione jakichkolwiek atrybutów. To zaleta, bo wyjściowy kod HTML jest bardzo krótki.
Jak wygląda kod?
Zobaczmy to na przykładzie. Gdy w HTML-u chcieliśmy pokolorować tekst w paragrafie na niebiesko, robiliśmy to tak:
{html}Jakiś tekst.{/html}
W CSS zrobimy to już bez pomocy znacznika {html}{/html}:
{html}
Jakiś tekst.{/html}
Przestawiamy się na znacznik {stala}style=\”\”{/stala} i zauważamy, że w deklarowaniu stylu występuje inna składnia:
{stala}cecha: wartość;{/stala}
Gdy chcemy zadeklarować więcej parametrów, dodajemy kolejne, nie zapominając o separatorze – średniku:
{stala}cecha: wartość; cecha: wartość{/stala}
Celowo zostały użyte dodatkowe znaki spacji. Są one dozwolone, lecz ich pominięcie sprzyja powstawaniu krótszego kodu.
Dlaczego warto korzystać z CSS?
- Pozwala ustalić zbiorczy styl dla całej witryny.
- Wszelkie modyfikacje oznaczają zmiany tylko w jednym pliku stylów.
- Rozmiar plików HTML po zastosowaniu stylów maleje, czasem bardzo pokaźnie.
- Mniejsze pliki to mniejszy transfer i szybsze ładowanie stron.
- Przeglądarka przechowuje plik CSS w swoim buforze.
Sposoby wprowadzania stylów
Style można definiować w trzech różnych, niewykluczających się miejscach: korzystając z zewnętrznego pliku, umieszczając style w nagłówku dokumentu HTML oraz tworząc atrybut \”style\” w dowolnym znaczniku HTML. Wszystkie trzy metody można stosować jednocześnie, lecz obowiązuje tu zasada priorytetów.
Im bliżej znacznika HTML znajdują się właściwości CSS, tym bardziej przebija on inne właściwości CSS umieszczone wcześniej. Tym sposobem raz zadeklarowany kolor paragrafu w pliku zewnętrznym może zostać zmieniony na zielony przez lokalne umieszczenie deklaracji stylu.
Style umieszczane lokalnie
Jest to najprostsza metoda definiowania stylu dla danej sekcji witryny. W przykładzie dla znacznika {html}
Ta metoda wprowadza bałagan w kodzie, lecz gdy konkretnego stylu używamy tylko raz, umieszczanie stylów lokalnie może być uzasadnione. Jednak profesjonalni webmasterzy nie używają tej metody, bo nie spełnia ona zasady: osobno treść, osobno prezentacja.
Style w nagłówku strony
Wirtualna Polska wszystkie swoje style umieszcza w nagłówku kodu źródłowego każdej strony. Wszystkie ustalenia CSS są umieszczane pomiędzy znacznikami {html}
Jakiś tekst.
Wewnątrz znacznika {html}
Jakiś tekst
Jeżeli dla znacznika {html}
{/html} określimy czcionkę, dajmy na to Verdanę, reguła ta będzie dotyczyła wszystkich jego potomków. Tym sposobem cały nasz tekst w paragrafie {html}{/html} zostanie wyświetlony przy użyciu czcionki Verdana. Taka metoda przyznawania reguł to dziedziczenie. Elementy potomne w hierarchii dziedziczą od korzeni.
Jeżeli z kolei ustalimy, że znacznik {html}{/html} zawierający słowo \"tekst\" ma go dodatkowo podkreślać, reguła ta będzie dotyczyła tylko znaczników {html}{/html}. Jeżeli jakaś wartość nie została określona w stylach (np. margines), to wykorzystywane są wartości domyśle. Każda z przeglądarek może tu nieco się różnić.
Dlatego ważne jest, by sprawdzać poprawność wyświetlania strony za pomocą przynajmniej kilku wiodących przeglądarek.
Selektory
Tworzenie stylów CSS nie miałoby sensu, gdyby wszystkie paragrafy wyglądały tak samo. Dlatego wprowadzono tak zwane selektory, określające do który elementów strony styl ma zostać zastosowany. Dotychczas zaprezentowaliśmy przykłady, które odnosiły się albo do wszystkich elementów {html}
{/html}, albo do wszystkich {html}{/html}.
Selektor elementu. Reguła jest stosowana do konkretnego elementu HTML. W przykładzie określamy odstęp pomiędzy kolejnymi liniami tekstu. Wynosi ona półtorakrotnie więcej niż wysokość tekstu:
p {
line-height: 1.5;
}
Selektor uniwersalny. Reguła stosowana jest do wszystkich elementów w dokumencie:
* {
font-family: Verdana;
}
Selektor klasy. Na stronie mamy trzy paragrafy. Chcemy, by dwa z nich były niebieskie, a jeden czerwony. Możemy to zrobić poprzez utworzenie dwóch klas, czyli odrębnych stylów dla tych samych znaczników {html}
{/html}. Zobaczmy kod:
Jakiś tekst
Jakiś tekst
Jakiś tekst
Spróbujmy do powyższego kodu dodać jeszcze jedną linijkę:
{html}
{/html}
Co się stanie? Tekst nie zostanie sformatowany, bowiem określimy styl tylko dla paragrafów o nazwie klasy \"n\". Klasa może dotyczyć wszystkich elementów HTML, jeżeli zapiszemy ją w następujący sposób:
.n {
color: blue;
}
Jeden element HTML może należeć do wielu klas, dzięki czemu zadziała konstrukcja:
{html}
...
{/html}
Selektor identyfikatora. Za pomocą tego selektora możemy jednorazowo zmienić reguły obowiązujące dla danego elementu HTML. Do zadeklarowania tego selektora używamy znaku #. Możliwości są analogiczne do selektora klasy, z jednym wyjątkiem - możemy go użyć w dokumencie HTML tylko raz. Identyfikator musi być unikalny dla całego dokumentu:
Jakiś tekst
Możliwe jest łączenie selektora klasy i identyfikatora:
{html}
Jakiś tekst.
{/html}
Grupowanie selektorów. Reguły można stosować do kilku znaczników HTML jednocześnie, oddzielając elementy przecinkami:
h1, h2 {
color: blue;
font-size: 20px;
}
W przykładzie ustaliliśmy kolor nagłówków {html}
{/html} i {html}
{/html} na niebieski i określiliśmy ich rozmiar na 20 px (jeden piksel to jeden punkt na monitorze). Nie występują żadne ograniczenia jakiego typu elementy możemy ze sobą łączyć. Definiujemy więc taki sam margines wokół tych dwóch elementów (równy 5 px) oraz ustawiamy ten sam kolor tła (źółty):
p.tekst, strong {
background-color: yellow;
margin: 5px;
}
p.tekst, strong {
background-color: yellow;
margin: 5px;
}
Selektor pseudoklasy. Ten typ selektorów nie ma swojego odpowiednika w kodzie HTML i służy głównie do obsługi odnośników. Wyróżniamy następujące selektory pseudoklas:
- :hover (odsyłacz nad którym znajduje się kursor),
- :active (odsyłacz wybrany przez użytkownika),
- :focus (odsyłacz podświetlony),
- :link (odsyłacze, które nie zostały do tej pory wybrane),
- :visited (odsyłacze już wcześniej wybrane),
- :lang (atrybut lang w HTML-u).
Jeśli chcemy określić, jak mają wyglądać odnośniki po naprowadzeniu na nie kursora myszki, tworzymy następujący kod:
a:hover {
color: red;
}
Selektor potomka. Możliwe jest ustalenie reguły dla potomków wskazanych elementów HTML. Jeżeli więc chcemy ustalić, w jaki sposób ma wyglądać odnośnik, który zostanie umieszczony wewnątrz paragrafu, korzystamy z selektora potomka:
p a {
color: green;
}
Przydatne serwisy
http://www.csszengarden.com/tr/polish/
Zen Garden - o tym, co można osiągnąć przy użyciu CSS.
http://developer.mozilla.org/pl/docs/CSS
Na_początek - oficjalny kurs Mozilli.
