Arkusze stylów CSS

ARKUSZE STYLÓW CSS – Kaskadowe arkusze stylów (CSS z ang. Cascading Style Sheets) to rodzaj języka skryptowego,
interpretowanego po stronie przeglądarki klienta, służącego do opisu wyglądu
poszczególnych elementów stron internetowych.

Arkusze stylów CSS powstały z potrzeby rozszerzenia możliwości definiowania wyglądu stron internetowych. Pozwolił oddzielić aspekt treści strony od kwestii jej formatowania. Zaletą styli CSS jest fakt, że do raz zdefiniowanego stylu dla danego elementu strony można się odwoływać wielokrotnie bez konieczności wielokrotnego powtarzania dyrektyw formatowanie. Arkusz składa się z reguł definiujących styl dla danego elementu strony internetowej (np. akapitu, tabeli itd., pola formularza). Reguła składa się z selektora oraz deklaracji stylu.
Style mogą zostać osadzone w dokumencie za pomocą trzech metod:
Poprzez osadzenie łącza do zewnętrznego pliku stylów, za pomocą znacznika link, który musi znajdować się w sekcji head dokumentu;Poprzez definicję stylu w nagłówku dokumentu, za pomocą znacznika style. Pamiętać należy, że definicja stylu musi znajdować się w sekcji head dokumentu;Poprzez bezpośrednią definicję stylu w parametrze „style” znacznika którego styl ma dotyczyć.
;

Arkusze stylów CSS powstały z potrzeby rozszerzenia możliwości definiowania wyglądu stron internetowych. Pozwolił oddzielić aspekt treści strony od kwestii jej formatowania. Zaletą styli CSS jest fakt, że do raz zdefiniowanego stylu dla danego elementu strony można się odwoływać wielokrotnie bez konieczności wielokrotnego powtarzania dyrektyw formatowanie. Arkusz składa się z reguł definiujących styl dla danego elementu strony internetowej (np. akapitu, tabeli itd., pola formularza). Reguła składa się z selektora oraz deklaracji stylu.

Style mogą zostać osadzone w dokumencie za pomocą trzech metod:

  • Poprzez osadzenie łącza do zewnętrznego pliku stylów, za pomocą znacznika link, który musi znajdować się w sekcji head dokumentu;
  • Poprzez definicję stylu w nagłówku dokumentu, za pomocą znacznika style. Pamiętać należy, że definicja stylu musi znajdować się w sekcji head dokumentu;
  • Poprzez bezpośrednią definicję stylu w parametrze „style” znacznika którego styl ma dotyczyć.

;

Grupy i rodziny selektorów

Zbiorowe definiowanie stylów może być zrealizowane dla grup selektorów lub dla rodzin
selektorów. W celu zdefiniowania wyglądu dla więcej niż jednego selektora wystarczy
wypisać nazwy selektorów których styl ma dotyczyć rozdzielone znakiem przecinka. Definicja stylu może być także zależna od miejsca, gdzie znajduje się formatowany znacznik stylu. Większość znaczników w języku HTML może posiadać parametry takie jak np. wyrównanie w
komórce < td align=”left”> czy szerokość obrazka < img width=”100px”>. Możliwe jest
określenie stylu dla danego znacznika w zależności od jego parametrów.

Pseudoklasy

W celu zastosowanie różnych stylów elementów w zależności od ich stanu stosuje się
określenia pseudoklas. Wyróżnić można następujące pseudoklasy: :link – pseudoklasa nieodwiedzanego jeszcze łącza (linka); :visited – pseudoklasa odwiedzonego już łącza; :hover – pseudoklasa wskazywanego myszą łącza; :active – pseudoklasa wybranego (klikniętego) łącza; :focus – pseudoklasa elementu, który został zaznaczony, lub wybrany klawiszem tabulatora
Wszystkie powyższe pseudoklasy mogą zostać użyte ze znacznikiem < a>, natomiast
ostatnia może dodatkowo dotyczyć wszystkich elementów formularzy. Pozwala to
określić inny wygląd łącza (linku) zanim został wybrany (kliknięty) oraz inny wygląd po
najechaniu nad link wskaźnikiem myszy. W przypadku pól formularzy, pseudoklasa :focus
pozwala na zdefiniowanie innego wyglądu nieaktywnych pół oraz innego dla pola w
którym znajduje się kursor (edytowanego pola).

Kaskadowa struktura stylów CSS

Nazwa „kaskadowe arkusze stylów” wywodzi się z faktu, iż style interpretowane są
hierarchicznie. Na pierwszym miejscu brany jest pod uwagę styl przeglądarki internetowej.
Styl ten został zdefiniowany przez autorów (programistów) tworzących przeglądarkę, i to oni
zadecydowali, jaki rozmiar, kolor, czy wyrównanie domyśle posiada tekst zawarty w sekcji
jakiegoś znacznika, jeśli nie ma jawnie zdefiniowanego wyglądu. Następnie pod uwagę brany
jest styl zdefiniowany w zewnętrznym pliku CSS (za pomocą znacznika link). W następnej
kolejności pod uwagę brany jest styl zdefiniowany w nagłówku strony, a na końcu styl
zdefiniowany w parametrze style konkretnego znacznika.

]]>