
- •31. Фоновые изображения css
- •Введение
- •Как это работает?
- •Свойства фона
- •Пример создания тревожного сообщения
- •Создание зацепки css, или селектора
- •Добавление цвета фона
- •Применение фонового изображения
- •Управление повторением фонового изображения
- •Присоединение
- •Позиционирование изображения
- •Использование сокращения для общего объединения
- •Эксперименты с кодом
- •Тестирование качества
- •Спрайты
- •Пример сложного спрайта и фонового изображения
- •Создание спрайта
- •Заключение
- •Сведения об авторах изображений
- •Контрольные вопросы
- •Дополнительное чтение
- •Об авторе
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 и шаг за шагом создадим в качестве примера тревожное сообщение.
Сначала давайте узнаем немного больше об имеющихся в нашем распоряжении различных свойствах.