Css map что это

Демо¶

Изображения и мультимедиа

Синтаксис¶

1 2 3

map name=""> area /> map> 

Закрывающий тег обязателен.

Атрибуты¶

name¶

Имя идентификатора, которое однозначно определяет карту-изображение. Значение атрибута name элемента должно соответствовать имени в usemap . При этом значение атрибута usemap у начинается с символа решётки.

Синтаксис

map name="">. map> 

Значения

Любое подходящее уникальное имя, оно чувствительно к регистру.

Значение по умолчанию

Спецификации¶

• HTML Living Standard
• HTML 5
• HTML 4.01 Specification

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

 html> head> meta charset="utf-8" /> title>MAPtitle> style> #title  line-height: 0; /* Изменяем межстрочное расстояние */ > #title img  border: none; /* Убираем рамку вокруг изображения */ > style> head> body> div id="title"> img src="image/ecctitle.png" width="640" height="158" alt="Детский образовательный центр" />br /> img src="image/navigate.png" width="640" height="30" alt="Навигация по сайту" usemap="#Navigation" /> div> p> map name="Navigation"> area shape="poly" coords="113,24,211,24,233,0,137,0" href="page/inform.html" alt="Информация" /> area shape="poly" coords="210,24,233,0,329,0,307,24" href="page/activity.html" alt="Мероприятия" /> area shape="poly" coords="304,24,385,24,407,0,329,0" href="page/depart.html" alt="Отделения" /> area shape="poly" coords="384,24,449,24,473,0,406,0" href="page/techinfo.html" alt="Техническая информация" /> area shape="poly" coords="449,24,501,24,525,0,473,0" href="page/study.html" alt="Обучение" /> area shape="poly" coords="501,24,560,24,583,0,525,0" href="page/work.html" alt="Работа" /> area shape="poly" coords="560,24,615,24,639,0,585,0" href="page/misk.html" alt="Разное" /> map> p> body> html> 

Мапы (Ассоциативные массивы)

Мапы, или ассоциативные массивы, представляют собой связь между ключами и значениями, где ключи используются для поиска значений. Они позволяют легко собирать значения в именованные группы и получать доступ к этим группам динамически. Они не имеют прямого аналога в CSS, хотя они синтаксически похожи на media-запросы:

$map: (key1: value1, key2: value2, key3: value3); 

$map: (key1: value1, key2: value2, key3: value3) 

В отличие от списков, мапы всегда должны быть заключены в скобки и всегда должны быть разделены запятыми. И ключи и значения в мапах могут быть любыми объектами SassScript. Мап может иметь только одно сопоставление с заданным ключом (хотя это значение может быть списком). Значение ключа, конечно же, может быть сопоставлено многим значениям.

Как и со списками, манипуляции с мапами в основном происходят через функции SassScript. Функция map-get смотрит значение в мапе, функция map-merge объединяет две мапы в одну новую. Директива @each может быть использована для добавления стилей для каждой пары ключ-значение в мапе. Порядок пар всегда остается неизменным с момента создания мапа.

Мапы можно использовать везде, где применимы списки. Если для манипуляции мапами используются функции для списков, то мапы будут рассматриваться как список пар. Например, (key1: value1, key2: value2) будет рассматриваться этими функциями как вложенный список key1 value1, key2 value2. Однако, обратное утверждение верно только для пустого списка () , в остальных случаях списки не могут рассматриваться как мапы. () представляет собой одновременно мапы без пар ключ-значение и список без элементов.

Заметьте, что ключами мапа может быть любой тип Sass данных (даже другой массив) и синтаксис для объявления мапа допускает произвольное применение SassScript-выражений, которые будут рассчитаны для определения ключа мапа.

Мапы не могут быть преобразованы в обычный CSS. Использование мапов в качестве значения переменной или аргумента CSS функции приведет к ошибке. Использование функций inspect($value) для получения результирующей строки полезно для отладки мапов. Например:

$status-colors: ( primary: #000, success: #27BA6C, info: #03a9f4, warning: #FF8833, danger: #ff1a1a ); .message  @each $status, $color in $status-colors  &--#  background: $color; > > > 

$status-colors: ( primary: #000, success: #27BA6C, info: #03a9f4, warning: #FF8833, danger: #ff1a1a ) .message @each $status, $color in $status-colors &--# background: $color 

.message--primary  background: #000; > .message--success  background: #27ba6c; > .message--info  background: #03a9f4; > .message--warning  background: #f83; > .message--danger  background: #ff1a1a; > 

Css map что это

Узнайте, что включено в Bootstrap, включая наши скомпилированные и исходные коды. Помните, что для плагинов JavaScript Bootstrap’у требуется jQuery.

Предварительно компилированный Bootstrap

Строение скачанного архива BS4 будет таким:

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

Это базовая форма Bootstrap: перекомпилированные файлы для быстрого подключения в почти любой веб-проект. Доступны: компилированные файлы CSS и JS ( bootstrap.* ), как и компилированные «облегченные» файлы ( bootstrap.min.* ). Карты исходного кода CSS ( bootstrap.*.map ) доступны для использования лишь с определенными инструментами разработчика в браузере. Связанные JS-файлы ( bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js ) включают Popper, но не jQuery.

Кодовые карты дают независимый от языка способ показа соответствия рабочего кода и исходных кодов (sources), написанных вами при разработке.

Файлы СSS

Bootstrap включает несколько параметров для подключения всех ваших компилированных CSS.

Css map что это

Узнайте, что включено в Bootstrap, включая наши скомпилированные и исходные коды. Помните, что для плагинов JavaScript Bootstrap’у требуется jQuery.

Предварительно скомпилированный Bootstrap

После загрузки распакуйте сжатую папку, и Вы увидите что-то вроде этого:

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map 

Это базовая форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте. Мы предоставляем скомпилированные CSS и JS ( bootstrap.* ), а также скомпилированные и минимизированные CSS и JS ( bootstrap.min.* ). source maps ( bootstrap.*.map ) доступны для использования с инструментами разработчика некоторых браузеров. Связанные файлы JS ( bootstrap.bundle.js и минифицированные bootstrap.bundle.min.js ) включают Popper, но не jQuery.

Файлы СSS

Bootstrap включает несколько параметров для подключения всех ваших компилированных CSS.