salary 1319059 ml

Co oznacza kaskadowość stylów CSS?

Jeśli zerkniemy na definicje CSS to znajdziemy tam często rozwinięcie skrótu CSS które brzmi Cascading Style Sheets co oznacza Kaskadowe Arkusze Stylów. Co tak naprawdę oznacza kaskadowość stylów?

Oznacza to mniej więcej tyle, że wygląd każdej ze stron jest wynikową co najmniej kilku arkuszów styli. Jak to jest możliwe? Jeśli przeczytałeś już nasz kurs CSS, to doskonale wiesz, że style mogą być zewnętrzne, wewnętrzne lub wpisane inline’owo poprzez atrybut style="". Oprócz tego każda z przeglądarek posiada dodatkowo własne, wbudowane arkusze stylów, a użytkownik może dopisać własne (np. poprzez inspektor wbudowany w przeglądarkę). Mamy już więc 5 grup stylów które muszą ze sobą współgrać i utworzyć jednolity wygląd strony.

Taka zasada działania styli wprowadza nam wady i zalety. Zaletą na pewno jest to, że możemy nadpisywać style. Dla przykładu możemy ostylować h1 w pliku zewnętrznym, w atrybucie <head>, a na końcu dopisać jeszcze style inline’owo do pojedynczego elementu. Oczywiście najważniejszym stylem będzie ten zapisane inline’owo, ale nie oznacza to, że zostanie użyty tylko on. Przeglądarka sprawdzi każdą pojedynczą właściwość przypisaną do danego elementu i ustali, który ze stylów jest najważniejszy. Jeśli więc inline’owo zapiszesz np.

1
<h1 style="color: red; font-size: 24px;">To jest nagłówek</h1>

A w stylach zewnętrznych zapiszesz:

1
2
3
4
h1 {
  font-size: 22px;
  font-weight: 700;
}

To element h1 pobierze najpierw właściwości ze stylów zewnętrznych, a potem nadpisze właściwości poprzez te zapisane inline’owo. Jak widzisz w powyższym przykładzie style inline’owe nie nadpisują właściwości font-weight, więc wartość zostanie pobrana ze stylów zewnętrznych. Ostatecznie więc element h1 będzie posiadał style:

1
2
3
4
5
h1 {
  font-size: 24px;
  color: red;
  font-weight: 700;
}

Na tym właśnie polega kaskadowość stylów.

Wadą kaskadowości stylów są na pewno style wbudowane w przeglądarkę internetową. Właśnie w związku z tym strony mogą zostać różnie wyświetlone przez różne przeglądarki. Najczęściej różnice można zobaczyć w elementach takich jak input czy button. Style nie tylko różnią się między przeglądarkami, ale także między systemami operacyjnymi, ponieważ przeglądarka często próbuje ustawić style w taki sposób, aby elementy były podobne do tych, które znajdziemy w programach danego systemu operacyjnego.

Podsumowując kaskadowość stylów można opisać jako “walkę pomiędzy arkuszami stylów”. Dzięki temu mamy wiele możliwości nadpisywania stylów, ale także pojawiają się sytuacje, o których należy pamiętać przy ich tworzeniu. Zależności między wszystkimi arkuszami styli doskonale przedstawia ten obrazek:

CSS