Основы CSS
- 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)
- 7. Способы подключения CSS: глобальный стиль документа
- 8. Способы подключения CSS: встроенные (inline) стили
- 9. Способы подключения CSS: связанные (подключаемые) стили Это способ предпочтителен!
- 10. Типы носителей • all — все типы • screen — дисплей монитора • print — печатная версия • braille — вывод посредством системы Брайля (для людей с нарушениями зрения) Подробнее на http://htmlbook.ru/samcss/tipy- nositeley
- 11. Подключение стиля для конкретного типа носителя
- 12. Селекторы Селектор — это указатель на элемент или группу элементов, к которым должен быть применен определенный стиль. селектор { свойство: значение; свойство: значение; … }
- 13. Типы селекторов • Селекторы тегов (p, h1 и пр.) • Классы • Идентификаторы
- 14. Классы Обратите внимание: к последнему абзацу применено сразу два класса, их действие — комбинируется
- 16. Идентификаторы Каждый идентификатор должен быть уникальным (неповторяющимся) внутри документа
- 17. Результат использования идентификаторов
- 18. Свойства и их значения http://htmlbook.ru/css
- 19. Общие свойства для нескольких селекторов h1, #about, .s1 { color: red; } p, .s1 { font-family: sans-serif; font-weight: bold; } К одному набору свойств можно привязать сразу несколько селекторов, перечислив их через запятую. Также в примере класс s1 будет обладать сразу тремя свойствами: красный цвет, рубленый шрифт, жирное начертание.