1. CSS (Cascading Style
Sheets, каскадные таблицы стилей)
• Переназначены — для оформления (и
позволяют отделить задачи оформления от
логики документа)
• Существуют в версии CSS3, которая пока как
и HTML5 стандартом не является, но
готовится им стать
• Невозможны в отрыве от HTML

2. Слева — без стилей, справа — та же
страница с CSS-стилями

3. Главные возможности и функции CSS
• Отделяют оформление от содержания
• Разное оформление — для разных
устройств и носителей
• Ускоряют работу сайтов
• Один стиль на множество документов
(исправления вносятся в один файл, а
проявляются на всём сайте)
• CSS3 даёт новые возможности оформления

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 — печатная версия
• braille — вывод посредством системы
Брайля (для людей с нарушениями зрения)
Подробнее на http://htmlbook.ru/samcss/tipy-
nositeley

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 будет обладать сразу тремя
свойствами: красный цвет, рубленый шрифт, жирное
начертание.