На этой странице:

• Методические комментарии
• Ответы на вопросы
• Решения зачётных классов
• Ответы на задания практикумов
• Наброски решений проектов

Методические комментарии

Знакомство со средствами CSS рекомендуется начинать на самых ранних стадиях изучения сайтостроения, чтобы ученики сразу приучались отделять визуальную разметку (в CSS-файле), от структурой (в HTML-файле). Ведь использование CSS позволяет:

• Упростить HTML-разметку документа, оставив в ней только структурные элементы.
• Сократить объём HTML-кода, за счёт удаления из тегов значительной части атрибутов.
• Упростить работу по изменению внешнего вида сайта. Редактировать придётся единственный файл со стилевыми определениями, а не многочисленные файлы с кодами гипертекстовых страниц.

Кроме того, CSS предлагает гораздо больше свойств и значений, чем атрибуты HTML. Например, при помощи CSS можно отображать элементы на экране, используя реальные координаты, отсчитываемые от левого верхнего угла окна браузера и многослойное пространство. При работе с материалом рекомендуется использовать две опорные схемы, приведённые на главной странице урока.

Ответы на вопросы

• 01. HTML и CSS
• 02. Основные правила языка CSS
• 03. Селекторы
• 04. Стилевые свойства
  • 1. Значения свойств и единицы измерения
  • 2. Коробочная модель (Box Model)
  • 3. Внешние отступы
  • 4. Рамки
  • 5. Внутренние отступы
  • 6. Цвет и фон
  • 7. Ширина и высота
  • 8. Шрифты
  • 9. Текст
  • 10. Списки
• 05. Позиционирование элементов
  • 1. Абсолютное позиционирование
  • 2. Фиксированное позиционирование
  • 3. Относительное позиционирование
  • 4. Z-индекс, вид и видимость
  • 5. Пример 1
  • 6. Пример 2
  • 7. Пример 3
• 06. Плавающие блоки
  • 1. Свойство float

Решения зачётных классов

• 01. HTML и CSS
• 03. Селекторы: Зачёт 1 | Зачёт 2
• 04. Стилевые свойства
  • 3. Внешние отступы
  • 4. Рамки
  • 5. Внутренние отступы
  • 6. Цвет и фон
  • 7. Ширина и высота
  • 8. Шрифты
  • 9. Текст
  • 10. Списки
• 05. Позиционирование элементов
  • 1. Абсолютное позиционирование
  • 3. Относительное позиционирование
  • 4. Z-индекс, вид и видимость
• 06. Плавающие блоки
  • 1. Свойство float

Ответы на задания практикумов

• 02. Основные правила языка CSS (решения в каталоге ./work/unit10/1002/)
  • Задание 1 Заголовок должен быть красного цвета
  • Задание 2 Заголовок должен быть цвета #009900
  • Задание 3 Приватные и публичные программы
  • Задание 4 Как Знайка придумал воздушный шар
  • Задание 5 Над облаками 1
  • Задание 6 Над облаками 2
• 03. Селекторы (решения в каталоге ./work/unit10/1003/)
  • Задание 1 Математики и ювелиры 1
  • Задание 2 Математики и ювелиры 2
  • Задание 3 Задание 3
  • Задание 4 Задание 4
• 04. Стилевые свойства (решения в каталоге ./work/unit10/1004/)
  • 6. Цвет и фон
    • Задание 1 Над облаками
    • Задание 2 Азы программирования 1
    • Задание 3 Азы программирования 2
  • 7. Ширина и высота
    • Задание 1 Над облаками 1
    • Задание 2 Над облаками 2
    • Задание 3 Над облаками 3
  • 8. Шрифты
    • Задание 1 Курсоры
    • Задание 2 Единица em
  • 9. Текст
    • Задание 1 Курсоры
  • 10. Списки
    • Задание 1 Во весь опор
• 05. Позиционирование элементов (решения в каталоге ./work/unit10/1005/)
  • Задание 1 Поиск информации
  • Задание 2 Сказки Андерсена
  • Задание 3 Поиск картинок
• 06. Плавающие блоки (решения в каталоге ./work/unit10/1006/)
  • Задание 1 Дизайн 1
  • Задание 2 Дизайн 2

Наброски решений проектов

Наброски решений расположены в каталоге ./projects/10/.

• Практикум 1 Жёсткий дизайн, выровненный по центру окна
• Практикум 2 Поток с двумя абсолютно позиционированными блоками
• Практикум 3 Жёсткий дизайн на плавающих блоках
• Практикум 4 Резиновый дизайн на плавающих блоках

вверх | возврат