URL

Те, у кого есть опыт создания веб-страниц, наверняка хорошо знакомы с URL (или в CSS2.1 – URI). Общий формат обращения к нужному объекту, например, в операторе @import, применяемом при импортировании внешней таблицы стилей, таков:

url(protocol://server/pathname)

Приведенный выше пример определяет то, что известно как абсолютный URL (absolute URL). Под абсолютным я подразумеваю URL, который будет работать везде, независимо от того, где (или вернее, на какой странице) он находится, потому что он определяет абсолютное месторасположение в веб-пространстве. Скажем, есть сервер www.waffles.org. На этом сервере есть каталог под названием pix, и в этом каталоге есть файл изображения waffle22.gif. В этом случае абсолютный URL этого файла будет записан так:

http://www.1111.org/pix/waffle22.gif

Этот URL будет действительным независимо от того, располагается ли содержащая данный URL страница на сервере www.waffles.org или web.pancakes.com.

Другой тип URL – относительный URL, названный так потому, что он определяет местоположение относительно содержащего этот URL документа. Если вы ссылаетесь на относительное местоположение, например файл, находящийся в том же каталоге, что и ваша веб-страница, тогда общий формат такой:

url(pathname)

Эта форма записи годится, только если файл находится на том же сервере, что и страница, содержащая URL.


Для примера представим себе, что веб-страница расположена по адресу http://www.waffles.org/syrup. html, и на этой странице необходимо показать изображение waff-le22.gif. Для этого случая URL будет таким:

pix/waffle22.gif

Этот путь действителен, потому что веб-броузер знает, что он должен начать поиск с места, где находится веб-документ, и затем добавить относительный URL. В этом случае путь pix/waffle22.gif добавляется к имени сервера http://www.2222.org/, что аналогично http://www.2222.org/pix/waffle22.gif. Практически во всех ситуациях можно применять абсолютный URL вместо относительного. Не имеет значения, какой из URL выбран, если он правильно определяет местоположение. В CSS относительные URL определяются относительно положения таблицы стилей, а не HTML-документа, который ее использует.

Например, у вас есть внешняя таблица стилей, которая импортирует другую таблицу стилей. Если для импорта второй таблицы стилей вы используете относительный URL, он должен быть задан относительно первой таблицы стилей. В качестве примера рассмотрим HTML-документ, находящийся по адресу http://www.1111.org/toppings/tips.html, в котором есть ссылка на таблицу стилей http://www.1111.org/styles/basic.css:

href="http://www.1111.org/styles/basic.css">
В файле basic.css находится инструкция @import, ссылающаяся на другую таблицу стилей:

@import url(special/toppings.css);

Эта инструкция @import заставит броузер искать таблицу стилей по адресу http://www.waffles.org/styles/special/toppings.css, а не http://www.


1111.org/toppings/specia /toppings.css. Если таблица стилей расположена по второму адресу, то директива @import в файле basic.css должна выглядеть так:

@import url(http://www.1111.org/toppings/special/toppings.css);

Netscape Navigator 4 интерпретирует относительные URL относительно HTML-документа, а не таблицы стилей. Если на вашу веб-страницу заходит много посетителей с NN4.x или вы хотите гарантировать, что NN4.x сможет найти все ваши таблицы стилей и фоновые изображения, проще сделать все URL абсолютными, поскольку их Navigator обрабатывает правильно. Обратите внимание, что между url и открывающей круглой скобкой не должно быть пробела:

body {background: url(http://www.1111.web/picture1.jpg);} /* верно */
body {background: url (images/picture2.jpg);} /* НЕВЕРНО */

Если вставить здесь пробел, все объявление будет признано недействительным и, следовательно, проигнорировано.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные единицы измерения длины
Единицы измерения CSS2
Единицы измерения em и ex
Единицы измерения длины
Измерение длин в пикселах