CSS — wygląd strony

HTML opisuje, co jest na stronie, a CSS — jak to wygląda. Rozdzielenie treści od wyglądu pozwala zmienić wygląd całej witryny jednym plikiem.

Reguła CSS ma selektor i deklaracje: p { color: navy; font-size: 18px; }. Selektor wskazuje elementy, deklaracje ustawiają ich właściwości.

Do stylowania grup elementów służą klasy (kropka w selektorze), a do pojedynczych — identyfikatory (krzyżyk). Klasę można nadać wielu elementom.

• selektor — wskazuje, co stylujemy
• właściwość — co zmieniamy, np. color
• wartość — na co zmieniamy, np. navy
• .klasa — selektor klasy
• #id — selektor identyfikatora

• class — atrybut grupujący elementy
• id — unikalny identyfikator elementu
• Model pudełkowy — margin, border, padding, content
• link rel=stylesheet — podpina zewnętrzny plik CSS

Co opisuje CSS?

Wygląd elementów strony.

Z czego składa się reguła CSS?

Z selektora i deklaracji w klamrach.

Jak zapisać selektor klasy?

Kropka i nazwa, np. .menu

Jak zapisać selektor identyfikatora?

Krzyżyk i nazwa, np. #naglowek

Ile elementów może mieć ten sam id?

Jeden — id jest unikalny.

Co to model pudełkowy?

Treść, padding, obramowanie i margines wokół elementu.

Czym różni się padding od margin?

Padding jest wewnątrz ramki, margin na zewnątrz.

Jak podpiąć zewnętrzny arkusz stylów?

Znacznikiem link rel=stylesheet w sekcji head.

Co ustawia właściwość font-size?

Wielkość tekstu; za krój pisma odpowiada font-family.

Czym oddzielamy deklaracje w regule CSS?

Średnikiem.

Co oznacza wartość 2px solid black właściwości border?

Ramkę grubości dwóch pikseli, ciągłą, w kolorze czarnym.

Czy element może mieć więcej niż jedną klasę?

Tak — nazwy klas rozdziela się spacją.

1. CSS odpowiada za:

1. Strukturę treści
2. Wygląd strony
3. Bazę danych
4. Adres serwera

2. W regule p { color: red; } słowo color to:

1. Selektor CSS
2. Właściwość
3. Wartość
4. Klasa

3. Deklaracje wewnątrz reguły CSS oddzielamy…

1. Przecinkiem
2. Średnikiem
3. Kropką
4. Spacją

4. Selektor p, h1 stylizuje…

1. Tylko akapity
2. Akapity i nagłówki pierwszego stopnia
3. Akapity znajdujące się wewnątrz nagłówków
4. Nic

5. Selektor klasy zaczyna się od:

1. kropki
2. krzyżyka
3. gwiazdki
4. myślnika