1. CSS (Cascading Style Sheets, каскадні
таблиці стилей)
• Призначені — для оформлення (і
дозволяють виділити задачі
оформлення від логіки документа)

2. Зліва — без стилей, зправа — та ж
сторінка із CSS-стилями

3. Основні можливості та функції CSS
• Відокремлюють оформлення від змісту
• Різне оформлення — для різних пристроїв і
носіїв
• Прискорюють роботу сайтів
• Один стиль на цілу множину документів
(виправлення вносяться в один файл, а
проявляються на всьому сайті)

4. Приклад CSS кода
h1 {
color: #dd0000;
text-align: center;
}
p {
margin-left: 20px;
font-family: sans-serif;
}
strong {
color: green;
font-size: 133%;
}

5. Початкова сторінка (без CSS)

6. Результат застосування CSS

7. Способи підключення CSS:
глобальний стиль документа

8. Способи подключения CSS:
вбудовані (inline) стилі

9. Способи підключення CSS: зв’язні
стилі

10. Типи носіїв
• all — всі типи
• screen — дисплей монітора
• print —версія для друку

11. Підключення стилю для конкретного
типа носія

12. Селектори
Селектор — вказівник на елемент або групу елементів, до
яких має бути застосовий визначений стиль.
селектор {
властивість: значення;
властивість: значення;
…
}

13. Типи селекторів
• Селектори тегів (p, h1 і т.д.)
• Класи
• Ідентифікатори

14. Класи
До останнього абзацу застосовано зразу два стилі, їх дія комбінується

15. Результат застосування класів

16. Идентифікатори
Кожен ідентифікатор повинен бути унікальним всередині документа

17. Результат використання
ідентифікаторів

18. Властивості і їх значення
http://htmlbook.ru/css

19. Загальні властивості для кількох
селекторів
h1, #about, .s1 {
color: red;
}
p, .s1 {
font-family: sans-serif;
font-weight: bold;
}
До одного набора властивостів можна прив’язувати
декяілька селекторів, перерахувавши їх через кому.
У прикладі клас s1 володітиме зразу троьма властивостями:
червоний колір, шрифт - sans-serif, жирне відображення.