CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym jest CSS?

CSS (Cascading Style Sheets, kaskadowe arkusze stylów) to język służący do opisu wyglądu strony internetowej. CSS określa m.in. kolory, czcionki, marginesy, rozmieszczenie elementów, tła, animacje i sposób wyświetlania strony na różnych urządzeniach.

Infografika przedstawiająca działanie CSS: po lewej strona WWW bez stylów (surowy HTML), pośrodku blok kodu CSS z selektorem, właściwością i wartością, po prawej ta sama strona ze stylami - kolory, marginesy, sformatowany nagłówek i menu.

CSS nie jest językiem skryptowym po stronie serwera. Nie wykonuje operacji na serwerze, nie łączy się samodzielnie z bazą danych i nie generuje dynamicznie odpowiedzi HTTP tak jak PHP, ASP czy Perl. Jego zadaniem jest formatowanie dokumentu HTML, głównie po stronie przeglądarki użytkownika.

Do czego służy CSS?

CSS pozwala oddzielić strukturę strony od jej wyglądu:

HTML odpowiada za strukturę i treść,
CSS odpowiada za prezentację,
JavaScript może odpowiadać za interakcję i logikę po stronie klienta.

Składnia CSS - budowa reguły

Każda reguła CSS składa się z trzech części:

selektor {
  właściwość: wartość;
}

selektor wskazuje, do którego elementu HTML stosuje się reguła (np. h1, .menu, #naglowek),
właściwość określa, co ma się zmienić (np. color, font-size, margin),
wartość podaje konkretną wartość właściwości (np. red, 14px, 10px).

Para właściwość-wartość zawsze kończy się średnikiem, a cała reguła jest otoczona klamrami { }.

Rodzaje selektorów

W CSS najczęściej spotyka się trzy podstawowe rodzaje selektorów:

selektor typu (np. h1, p, img) - wybiera wszystkie elementy danego typu,
selektor klasy (np. .menu) - wybiera elementy z atrybutem class="menu",
selektor identyfikatora (np. #naglowek) - wybiera element z atrybutem id="naglowek" (id powinno być unikalne w dokumencie).

Można też łączyć selektory, aby precyzyjnie wskazać element. Najważniejszy typ to selektor potomka - zapis p img oznacza "wszystkie obrazy znajdujące się wewnątrz akapitu".

Sposoby dołączania CSS do strony

CSS można dołączyć do dokumentu HTML na trzy sposoby:

zewnętrzny arkusz stylów - plik .css dołączany przez znacznik <link> w sekcji <head>:
html <link rel="stylesheet" href="style.css">
To zalecane rozwiązanie - jeden arkusz może obsłużyć wiele stron.
styl wewnętrzny (osadzony) - reguły umieszczone w znaczniku <style> w sekcji <head> dokumentu HTML.
styl liniowy (inline) - reguły zapisane w atrybucie style konkretnego elementu, np. <p style="color: red;">.

Jednostki miary w CSS

Najczęściej używane jednostki miary w pytaniach egzaminacyjnych to:

px - piksele (jednostka bezwzględna, np. font-size: 14px),
pt - punkty edytorskie (1 pt ≈ 1,33 px), używane głównie do druku,
% - procent wartości rodzica (np. width: 50%),
em - wielokrotność rozmiaru czcionki elementu,
rem - wielokrotność rozmiaru czcionki w <html>.

Zapis kolorów w CSS

Kolor w CSS można zapisać na kilka sposobów:

nazwa koloru - np. red, blue, white, navy,
zapis szesnastkowy (hex) - np. #FFFFFF (biały), #FF0000 (czerwony),
funkcja rgb() - np. rgb(255, 12, 12) (czerwony),
funkcja rgba() - jak rgb(), ale z dodatkową przezroczystością, np. rgba(255, 0, 0, 0.5).

Przykład - cztery zapisy tego samego białego koloru:

color: white;
color: #FFFFFF;
color: #FFF;
color: rgb(255, 255, 255);

Pseudoklasy

Pseudoklasa to specjalny zapis, który pozwala formatować element w określonym stanie. Najczęściej spotykane w pytaniach egzaminacyjnych:

:hover - element po najechaniu kursorem myszy,
:link - hiperłącze nieodwiedzone,
:visited - hiperłącze odwiedzone,
:active - element w trakcie kliknięcia,
:focus - element posiadający fokus (np. aktywne pole formularza).

Przykład formatowania linków:

a:link    { color: yellow; }   /* niedwiedzone */
a:visited { color: green;  }   /* odwiedzone */
a:hover   { color: red;    }   /* po najechaniu */

Obramowania (border)

Właściwość border ustawia obramowanie elementu. Składa się z trzech części: grubości, stylu i koloru:

border: 1px solid red;

Najczęstsze style obramowania:

solid - linia ciągła,
dashed - linia przerywana (kreskowana),
dotted - linia kropkowana,
double - linia podwójna,
none - brak obramowania.

Kolory poszczególnych boków można podać oddzielnie - kolejność to góra, prawo, dół, lewo (zgodnie z ruchem wskazówek zegara):

border-color: red blue green yellow;
/* góra=red, prawo=blue, dół=green, lewo=yellow */

Przykład CSS - pełny

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: navy;
  text-align: center;
}

.menu {
  background-color: #333;
  padding: 10px;
}

#stopka {
  font-size: 12px;
  color: gray;
}

a:hover {
  color: red;
}

W tym przykładzie:

selektor body ustawia krój pisma i kolor tła całej strony,
selektor h1 formatuje nagłówki pierwszego poziomu,
selektor klasy .menu stylizuje element z class="menu",
selektor identyfikatora #stopka stylizuje element z id="stopka",
pseudoklasa a:hover zmienia kolor linku po najechaniu kursorem.

Kaskadowość i dziedziczenie

Nazwa "kaskadowe" odnosi się do sposobu, w jaki przeglądarka ustala, który styl zastosować, gdy wiele reguł dotyczy tego samego elementu. Priorytety (od najsilniejszego):

styl liniowy (atrybut style="...") - najwyższy priorytet,
selektor identyfikatora (#id) - silniejszy niż klasa,
selektor klasy (.klasa) - silniejszy niż selektor typu,
selektor typu (h1, p) - najsłabszy.

Przy równych priorytetach wygrywa reguła zdefiniowana później. Niektóre właściwości (np. color, font-family) są dziedziczone przez elementy potomne, dlatego ustawienie ich na body wpływa na większość treści strony.

CSS a języki po stronie serwera

Języki takie jak PHP, ASP lub Perl mogą być wykonywane na serwerze i generować kod HTML wysyłany do przeglądarki. CSS natomiast jest interpretowany przez przeglądarkę jako zestaw reguł wyglądu.

Technologia	Gdzie się wykonuje	Do czego służy
HTML	przeglądarka	struktura i treść strony
CSS	przeglądarka	wygląd i formatowanie
JavaScript	przeglądarka (głównie)	interakcja, walidacja
PHP	serwer	dynamiczne generowanie HTML
ASP	serwer	dynamiczne generowanie HTML
Perl	serwer	dynamiczne generowanie HTML

W pytaniach egzaminacyjnych CSS często pojawia się jako odpowiedź odróżniająca technologie front-endowe od technologii serwerowych.

Najczęstsze pytania egzaminacyjne o CSS

Czy CSS jest językiem programowania?
Nie. CSS to język opisu wyglądu (stylów), a nie język programowania. Nie zawiera klasycznych instrukcji warunkowych, pętli ani zmiennych programistycznych.

Po której stronie wykonuje się CSS?
Po stronie klienta (w przeglądarce). Serwer wysyła plik CSS bez modyfikacji, a interpretuje go dopiero przeglądarka.

Czym różni się selektor klasy od selektora id?
Klasa (.nazwa) może być użyta wielokrotnie w dokumencie, identyfikator (#nazwa) powinien być unikalny - tylko jeden element może mieć dany id.

Jaki znacznik HTML dołącza zewnętrzny plik CSS?
Znacznik <link> w sekcji <head> dokumentu:
<link rel="stylesheet" href="style.css">.

Gdzie umieszcza się wewnętrzny arkusz stylów?
W sekcji <head> dokumentu HTML, wewnątrz znacznika <style>.

Jaka pseudoklasa formatuje element po najechaniu kursorem?
Pseudoklasa :hover, np. a:hover { color: red; }.

Co zapamiętać na egzamin?

CSS to kaskadowe arkusze stylów - służą do opisu wyglądu strony.
CSS działa po stronie klienta (w przeglądarce), nie na serwerze.
Reguła CSS składa się z selektora, właściwości i wartości oddzielonej dwukropkiem: selektor { właściwość: wartość; }.
Trzy rodzaje selektorów: typu (h1), klasy (.nazwa), identyfikatora (#nazwa).
CSS można dołączyć zewnętrznie (<link>), wewnętrznie (<style> w <head>) lub inline (atrybut style).
Najczęstsze pseudoklasy to :hover, :link, :visited.
Kolory zapisuje się jako nazwę, hex (#FFFFFF) lub rgb().
Najczęstsze jednostki to px i pt (punkty edytorskie).