04. Стили сайта и фон элемента
На этой странице:
Описание стилей для сайта
Обычной практикой является указание стилей для сайта в отдельном файле. Для
таких файлов используют расширение css. В отдельном
файле стилевые определения записываются точно так же, как внутри
тега STYLE:
Имя тега (или имена тегов через запятые)
{
свойство: величина;
...
свойство: величина;
}
Например, в файле style.css можно записать:
Файл style.css
BODY
{
background: white repeat-y url("./pic/fon.gif");
color: black;
margin-left: 100px;
}
H1,H2,H3,H4,H5,H6
{
color: #009900;
font-family:sans-serif;
}
Для подключения этих указаний в головной части
HTML-кода (элементе <HEAD>...<HEAD>)
нужно поместить ссылку на стилевой файл:
Теперь, при загрузке HTML-кода в браузер стили начнут работать.
Файл index.htm
Картинка для фона элемента
Среди стилевых описаний элемента BODY
задано интересное правило:
background: white repeat-y url("./pic/fon.gif");
Объясним его смысл.
В качестве фона страницы (элемент BODY задаёт целиком
страницу) указан белый цвет (ключевое слово white),
и, кроме того, задана фоновая картинка fon.gif
(из подкаталога pic) при помощи выражения
url("./pic/fon.gif").
Вот эта картинка:
Параметр repeat-y заставляет браузер повторять картинку
вниз от левого верхнего угла элемента на экране и до его окончания (для BODY
до конца страницы):
Вот почему на экране получается вертикальная полоса!
Картинка fon.gif имеет ширину в 90 пикселов, поэтому
указание margin-left:100px, также записанное для
BODY, будет обеспечивать необходимый отступ содержимого
страницы от левого края.
Высота картинки fon.gif на иллюстрациях равна 20 пикселов.
Так сделано ради наглядности объяснений, но для построения
вертикальной полоски достаточно высоты в один пиксел (именно такая
высота у фоновой полоски в этой книге).
Кроме repeat-y допускаются другие значения,
задающие режим укладки “паркета”.
Ключевое слово repeat-x заставляет браузер повторять
картинку по горизонтали:
Значение repeat приводит к укладке паркета на всём
пространстве элемента в окне браузера:
Ключевое слово no-repeat запрещает укладку
“паркета”. Картинка выводится в единственном экземпляре в
левом верхнем углу:
Указание no-repeat можно дополнить ключевыми словами,
задающими положение картинки:
Так указание
background: white no-repeat top right url("./pic/fon.gif")
заставит браузер вывести фоновую картинку в правый верхний угол.
Для уточнения положения фоновой картинки можно вместо ключевых слов
задавать абсолютные координаты, отсчитываемые от левого верхнего
угла элемента.
Так указание
background: white no-repeat 200px 50px url("./pic/fon.gif")
выведет картинку в соответствующее место на экране:
Наконец, можно вместо абсолютных координат задавать значения в процентах
от ширины и высоты элемента:
При прокрутке содержимого элемента фоновая картинка по умолчанию
также перемещается. Это свойство можно явно указать при помощи
дополнительного параметра scroll или отменить его,
указав значение fixed. Проверьте действие этих параметров
на следующем испытателе.
Значения свойства background
Таким образом, значение свойства background записывается в
виде последовательности (отдельные значения могут
отсутствовать) следующих параметров:
background: цвет скролл повтор координаты картинка
Свойство background не передаётся по наследству. Это
означает, что если один элемент вложен в другой, то потомок
ничего не знает о фоне своего родителя.
Подробное описание всех свойств (в том числе указание
наследственности) приводится в стандарте W3C (ссылка на главной
странице урока).
Атрибут background тега BODY
Для элемента BODY предусмотрен атрибут
background, который позволяет задать фоновую картинку
для гипертекстовой страницы документа.
Картинка, использованная в качестве фона, приводится ниже:
Атрибут background позволяет задать картинку лишь
для сплошного фонового паркета, и не имеет возможностей
одноимённого стилевого свойства.
Кроме того, атрибут background можно записывать только для
элемента BODY, в то время как стилевое свойство
background можно назначать любому элементу на странице.
Дизайн фона
Рассмотрим вопросы дизайна, связанные с использованием
картинки для фона.
Плитки плохо стыкуются
Чтобы фоновый “паркет” смотрелся красиво, необходима визуальная
стыковка плиточек между собой. Это надо учитывать при создании фоновой
иллюстрации.
Плохая стыковка плиточек.
Очень плохая стыковка плиточек.
Хорошая стыковка простых плиточек.
Хорошая стыковка сложных плиточек.
С фоновыми картинками нужно обращаться очень осторожно. Если нет
уверенности, что паркет улучшает восприятие документа, лучше
использовать одноцветную заливку: на гладком фоне текст всегда
читается лучше.
Текст не читается
На шершавом фоне текст всегда читается хуже, чем на гладком:
Когда фоновая картинка кажется необходимой, текст надо выводить в
гладкие области:
Повторение фоновой картинки в широких окнах
В узком окне сайт смотрится нормально:
Фон страниц на нём образован при помощи длинной фоновой “плиточки”:
У разработчика небольшой монитор и он даже не подозревает, что на
экранах с высоким разрешением с сайтом происходит катастрофа:
Что произошло? Ширина окна превысила длину фоновой плиточки, и браузер
стал повторять её по горизонтали.
Избежать подобной неприятности можно двумя путями.
Первый способ рекомендует конструировать плиточку, длина которой
превосходит разумную ширину окна пользователя. Но возникают проблемы с
определением этой самой “разумной” ширины. Не так давно трудно
было себе представить экраны с шириной большей 1280 пикселов. Сейчас
никого не удивишь монитором с горизонтальным разрешением 1600 пикселов.
Второй способ не зависит от разрешения экрана. Он будет работать в окнах
любого размера. Суть его в том, чтобы разрешить браузеру повторять
фоновую плиточку только по вертикали, а по горизонтали запретить.
Такое указание можно задать при помощи CSS-свойства background:
BODY
{
background: #FBEEE7 repeat-y url("./pic/fon.gif");
color: black;
}
Значение repeat-y разрешает повторение фоновой картинки
fon.gif только по вертикали, а параметр #FBEEE7
задаёт нужный цвет справа от плиточки.
Теперь в качестве фоновой картинки можно использовать совсем короткое
изображение:
Высоту такой фоновой картинки нужно делать, конечно, в один пиксел. На
иллюстрации плиточка показана высокой для наглядности.
Необходимость атрибутов bgcolor и text в теге BODY
Атрибуты bgcolor и text, записанные в теге
BODY, задают цвет фона и цвет текста на странице.
Если атрибуты не заданы, браузер будет использовать цвета фона и текста
по умолчанию (разные в разных браузерах).
Нужно обязательно записывать эти атрибуты явно, чтобы не потерять
контроль над важными визуальными параметрами страницы.
Атрибут bgcolor нужно записывать и в том случае, если
используется фоновая картинка (заданная атрибутом background).
Для этой рекомендации есть две причины:
-
В браузере графика может быть отключена, и фоновую картинку пользователь
не увидит.
-
Фоновая картинка “приходит” по сети после того, как страница
построена и заменяет фоновый цвет, заданный атрибутом bgcolor.
Чтобы такая перемена не “ударила” по глазам пользователя,
нужно подбирать цвет bgcolor близким к доминирующему цвету
фоновой картинки.
“Удар” по глазам пользователя:
Плавный переход от гладкого фона к фактурному:
А если фоновая картинка, цвет фона и цвет текста задаются при
помощи стилевых свойств?
BODY
{
background: #FBEEE7 repeat-y url("./pic/fon.gif");
color: black;
}
Может быть в этом случае не нужно записывать соответствующие атрибуты
для тега BODY?
Рекомендуется и в этом случае не игнорировать эти важные атрибуты.
На всякий случай. Для браузеров, которые не поддерживают язык CSS.
|
