При
помощи Photoshop мы сделали изображение «бледным» — с тем, чтобы
фотография воспринималась именно как фон и не затрудняла чтение
расположенного поверх нее текста.
Используя свойство background-repeat, мы запретили размножение фонового
рисунка. В значении свойства background-attachment мы указали, чтобы
картинка прокручивалась вместе с текстом страницы. Изображение смещено на
50 пикселов вправо и на 150 пикселов вниз относительно левого верхнего
угла страницы благодаря применению свойства background-position.
Внешний вид страницы, описанной в листинге 3.6, приведен на рис. 3.12.
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 145
ШтшШ’шШгь:шщ>ш^шшшш^т
файл Ставка
Переход Закладки {инструменты Сдоавка
vjJJ ‘ |;. ! file.///2:/examples/03/06/index.html
«3 © ***** (ИГ
# Gsttfria Started iii; Latest Headtoet
Вставка фонового изображения
В эпоху, когда каскадные листы сшлен были еще в диковинку,
существовал лишь один алгоритм рендеринга фона — размножение
фонового изображения от верхнего левого угла того или иного
элемента странице по-в®0 площади последнего.
Благодаря С8|^|р^НШ с^фдств по управлению фоновыми
июс^^^^^^^^И^щ^фхгася.
отвечают четыре свойства:
at, background-attachment и
За овдрраздр
hackgromd-jjij
background-position.
Рис. 3.12. Страница, использующая фоновое изображение
( Примечание ^
Некоторые свойства, в том числе и background-position, позволяют
определять не только положительные, но и отрицательные значения с
использованием линейных единиц измерения. К примеру, указание background-
position: -25рх -50рх сместит фоновое изображение на 25 пикселов влево и
на 50 пикселов вверх относительно левого верхнего угла элемента, для
которого оно определено — таким образом, часть фонового изображения останется
«за кадром».
В CSS предусмотрено обобщенное свойство background, позволяющее
формулировать правила, относящиеся к управлению фоном, более кратко. Так,
лист стилей, описанный в листинге 3.6, можно сократить до такого вида:
j ЛИСТИНГ 3J, Использование СВОЙСТВа background
body {
color: #000;
background: #fff url(fortress.jpg) no-repeat scroll 50px 150px;
}
146
Часть I. Технологические основы
Зачастую в качестве фоновых изображений для веб-страниц используются
простейшие пиксельные текстуры, основу которых составляет многократно
повторяющееся «ядро», состоящее из считанных пикселов. При этом велик
соблазн оставить в фоновой картинке единственный экземпляр такого
«ядра» — мол, браузер самостоятельно повторит его столько раз, сколько нужно.
Это искушение следует, однако, преодолеть. В России живет достаточно
пользователей, для которых трехгигагерцовые четвертые «пентиумы» с
гигабайтами памяти на борту существуют лишь в мечтах. Попробуйте разыскать
какой-нибудь Pentium-100 с восьмью мегабайтами «оперативки» на борту
(а такие машины— отнюдь не редкость в отечественных провинциальных
офисах) и посмотрите, сколько времени подобный компьютер будет
отрисовывать такое вот фоновое изображение. Мораль напросится сама собой:
картинка, которая будет множиться в фоне страницы, должна иметь размер не
менее 50—100 пикселов по меньшей стороне (рис. 3.13).
Рис. 3.13. Размер фонового изображения, какой бы простой ни была его текстура,
необходимо довести до 50—100 пикселов по меньшей стороне
Форматирование текстовых блоков
Обсуждая основные элементы логического структурирования информации в
главе 2, мы всякий раз откладывали разговор о переопределении их внешнего
вида при помощи CSS до лучших времен.
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 147
И вот, кажется, такие времена наступили. В этом разделе мы вкратце
коснемся CSS-свойств, наиболее часто использующихся для управления визуальным
представлением фрагментов текстового содержания веб-страниц. Некоторые
подобные свойства уже мелькали в примерах к этой главе.
Свойства шрифта
Под шрифтом в самом общем и грубом смысле понимается некоторый
комплект знаков (символов), объединенных какими-либо общими визуальными
признаками, стилевыми особенностями и характерными чертами рисунка.
Начертание шрифта — характеристика, более детально отражающая форму
знаков, уточняющая толщину штрихов, наличие и характер наклона букв,
плотность и т. п.
|
5th Фев 2011
|
Теги:
|