CSS (ang. Cascading Style Sheets – kaskadowe arkusze styli) to zasady opisujące wygląd elementów tworzących strony internetowe.
Każda strona internetowa składa się m. in. ze znaczników HTML i styli, czyli zasad opisujących wygląd tych znaczników. Dodanie styli nie jest obowiązkowe, aczkolwiek ich nieobecność sprawia, że strona nie wygląda atrakcyjnie. A przecież właśnie o to chodzi by nasza strona była ciekawa dla intenautów, którzy będą ją często i regularnie odwiedzać.
Na czym polega stylowanie elementów?
Stylowanie elementów polega na podaniu zasad opisujących wybrany element. Składa się ono z 2 etapów.
W pierwszym kroku informujemy przeglądarkę internetową który element chcemy ostylować. Możemy tego dokonać na 3 sposoby:
- Podając nazwę znacznika, np.
a. Ten sposób ostyluje w identyczny sposób wszystkie elementy o podanym znaczniku, co może nie być tym, co chcemy osiągnąć. - Podając identyfikator elementu (wartość atrybutu
id) poprzedzony symbolem#, np.#start. Ten sposób ostyluje tylko jeden element o podanym identyfikatorze (bo każdy identyfikator nie może pojawić się na stronie więcej niż jeden raz), co może nie być tym, co chcemy osiągnąć. - Podając klasę elementu (wartość atrybutu
class) poprzedzoną kropką, np..menuItem. Ten sposób ostyluje wszystkie elementy z podaną klasą, co będzie dokładnie tym, co chcemy osiągnąć.
Powyższe sposoby można mieszać, jednak nie jest to dobra praktyka. Style powinny nadawać się do ponownego użycia. Z tego powodu zaleca się aby strony internetowe były stylowane poprzez podawanie klasy elementu.
W drugim kroku podajemy zasadę opisującą wygląd elementu oraz jej wartość.
W jaki sposób dodać style do strony internetowej?
Style do strony internetowej można dodać na 3 sposoby:
- Stosując style in-line, czyli stylowanie elementów poprzez dodanie dla elementu atrybutu style z odpowiednią wartością. Przykład:
<li style="color: red;">Start</li>. - Stosując wewnętrzne zasady stylowania, czyli poprzez umieszczenie zasad wewnątrz znacznika
<style></style>w sekcji<head></head>dokumentu. Przykład:<style>.menuItem { color: red; }</style>. - Importując w sekcji
<head></head>dokumentu style umieszczone w zewnętrznym pliku.css. Przykład:<link href="style.css" rel="stylesheet" />.
Uzyskany efekt stylowania będzie identyczny w przypadku każdego powyższego sposobu. Główna różnica polega na tym, że style umieszczone w zewnętrznym pliku są znacznie łatwiejsze do zarządzania. Ale czy na pewno jest to jedyna różnica?
Kolejność stosowania styli dla elementu HTML
Wskazane jest korzystanie z tylko jednego sposobu stylowania elementów na stronie internetowej. Wiąże się to nierozerwalnie z kolejnością stosowania przez przeglądarkę opisanych zasad.
Najwyższy priorytet posiadają style in-line, następnie ładowane są style wewnętrzne, a style zaimportowane z zewnętrznego pliku znajdują się na końcu listy priorytetów.
To znaczy, że element, którego te same zasady stylowania opisujemy np. za pomocą styli in-line i zewnętrznych zasad przyjmie style opisane za pomocą sposobu in-line.
Priorytety zasad stylowania
Podając zasady opisujące elementy z pewną klasą możemy spotkać się z problemem priorytetów zasad stylowania. To oznacza, że zasada zdefiniowana wyżej zostanie nadpisana zasadą opisaną niżej. Czasami zamiana miejscami tych zasad rozwiąże problem. Ale co jeśli to nie pomoże?
Nadpisywanie styli
Style zdefiniowane wyżej można nadpisać na 2 sposoby.
Dodanie !important do styli zdefiniowanych niżej sprawi, że przeglądarka potraktuje te style jako najważniejsze i to one będą brane pod uwagę przy tworzeniu wyglądu strony. Będzie tak do czasu, aż niżej w kodze pojawi się kolejny !important dla tej samej zasady dla tego samego elementu… 😉
Dlatego zdecydowanie lepiej jest skorzystać z drugiego sposobu. Podając klasę (klasy) elementów nadrzędnych w bardziej jednoznaczny sposób wskażemy dla przeglądarki element, który ma ostylować. Jeśli stylowany element posiada klasę .menuItem, a jego rodzic ma klasę .menu, to określenie elementu za pomocą .menu .menuItem { ... } powinno rozwiązać problem.
Atrybuty styli
W kolejnym wpisie poznamy niektóre atrybuty styli oraz ich wartości, które pozwalają wygląd strony zmienić nie do poznania.
