Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

url

CSSurl
mangohost

Тип данных <url> - это указатель на ресурс. Аббревиатура URL расшифровывается как «Uniform Resource Locator» (Единый указатель ресурса). URL представляет собой указатель (или ссылку) на ресурс, такой как изображение или ресурс, который должен использоваться в свойстве.

Общие сведения

CSS свойства, которые используют тип данных <url> принимают значение с помощью функциональной нотации url(). То есть, указатель на ресурс (например изображение) может быть передан свойству через функцию url(), которая принимает location or pointer на изображение в качестве аргумента.

Например, свойство background-image используемое для указания фонового изображения элемента, принимает значение <url>, например так:

.example {
    background-image: url('https://www.example.ru/example-background.jpg');
}

Поддержка браузерами

url() поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE, и на Android и на iOS.

Примечание

Абсолютные и относительные URL

URL может быть абсолютным (полный путь до ресурса) или относительным. Относительные URL'ы относятся к URL таблицы стилей (а не к URL веб-страницы). Например, если в таблице стилей мы ссылаемся на изображение вот так url("example.jpg");, предполагается что изображение находится в той же директории что и сама таблица стилей, а не в корневой директории страницы, которая подключает таблицу стилей.

URI в качестве значения

Функция url() также может принимать data URI в качестве значения. Data URI может быть использован для того чтобы встраивать изображения непосредственно в страницу. Например, вы можете добавить фоновое изображение элементу передав data URI следующим образом:

.example { 
  background: url(data:image/png;base64,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) no-repeat center;
}
           

Какая разница между URL и URI

URL - это URI. URI расшифровывается как «Uniform Resource Identifier» (Единый идентификатор ресурса) и может быть URL (местоположением) или URN (именем) ресурса.

Так как URL почти не используется в CSS3, URL был представлен с помощью функции url(), которая обозначает тип данных <url>, а не более общий тип <uri>, как это было в предыдущих версиях CSS.

Пример

Ниже показан пример использования функции url():

mangohost