Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
185
Добавлен:
10.05.2015
Размер:
1.14 Mб
Скачать

31. Фоновые изображения css

Рассматриваются основы работы с фоновыми изображениями CSS, включая применение фоновых изображений с помощью CSS, настройка их размещения, укладка их вертикально или горизонтально, и объединение фоновых изображений с помощью спрайтов CSS для улучшения производительности сайта.

Введение

Согласитесь! С первой лекции этого курса вам не терпелось узнать, как сделать свой сайт энергичным и привлекательным. Возможно, что вы даже перескочили вперед сразу к этому разделу?

Фоновые изображения должны сделать сайт более привлекательным, но вы можете быть удивлены, как тесно они опираются на фундаментальные концепции, которые вы уже изучили.

Как было показано ранее в курсе, одним из самых важных изменений, которое произошло вместе с появлением CSS, стала возможность разделить презентацию, или способ представления информации, и семантику, или что она означает. Фоновые изображения CSS являются одним из самых важных инструментов, которые имеются в вашем распоряжении, так как позволяют применять декоративные изображения в определенных частям HTML, не добавляя ничего в код HTML. Ранее авторы были вынуждены заполнять свой код тегами img.

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

В этой лекции рассматриваются основы работы с фоновыми изображениями CSS, включая применение фоновых изображений с помощью CSS, настройка их размещения, укладка их вертикально или горизонтально, и объединение фоновых изображений с помощью спрайтов CSS (http://www.alistapart.com/articles/sprites/) для улучшения производительности сайта (http://developer.yahoo.com/performance/index.html).

Лекция имеет следующую структуру:

  • Как это работает?

    • Свойства фона

  • Пример создания тревожного сообщения

    • Дизайн

    • Код

      • Создание зацепки CSS, или селектора

      • Добавление цвета фона

      • Применение фонового изображения

      • Управление повторением фона

      • Присоединение

      • Позиционирование изображения

      • Использование сокращения для общего объединения

    • Эксперименты с кодом

    • Тестирование качества

  • Спрайты

    • Пример сложного спрайта и фонового изображения

      • Создание спрайта

  • Заключение

    • Сведения об авторах изображений

  • Контрольные вопросы

  • Дополнительное чтение

Как это работает?

CSS для оформления фона расщепляется на несколько различных свойств. Используя эти свойства, такие как position и color, можно управлять внешним видом страницы. В этой лекции мы подробно рассмотрим фоновые изображения CSS и шаг за шагом создадим в качестве примера тревожное сообщение.

Сначала давайте узнаем немного больше об имеющихся в нашем распоряжении различных свойствах.