Что такое layer в html

Тег layer

Тег (англ. layer — слой) — тег-контейнер, создает слой с абсолютным позиционированием.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

Атрибуты

above	имя нижнего, по сравнению с текущим, слоя
background	URL фоновой картинки
below	имя верхнего, по сравнению с текущим, слоя
bgcolor	цвет фона
clip	координаты видимой области слоя
height	задает высоту слоя
id	уникальный индетификатор
left	смещение слоя влево относительно родительского контейнера
name	уникальное имя слоя
onblur	потеря фокуса элементом
onfocus	получение фокуса элементом
onload	окончание загрузки слоя
onmouseout	смещение указателя мыши с элемента
pagex	х-коотдината абсолютного позиционирования слоя
pagey	y-коотдината абсолютного позиционирования слоя
src	URL документа, который будет показан в границах слоя
top	смещение слоя вниз относительно родительского контейнера
visibility	определяет видимость слоя. Возможные варианты show, hide, inherit
width	задает ширину слоя
z-index	высота слоя. Обычно используется в случае перекрывающихся слоев

Пример

Рекомендации по использованию

• закрывающий тег обязателен ()
• элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
• обязательных атрибутов нет
• тег отсутствует в стандартах HTML, не пройдет валидацию
• поддерживается только браузерами Netscape
• тег не рекомендуется использовать, вместо него следует применять тег со свойством position: absolute

Твой код:

Результат:

• HTML тег b | назначение, синтаксис, атрибуты, примеры
• HTML тег — комментарии в HTML | назначение, синтаксис, атрибуты, примеры
• HTML тег a | назначение, синтаксис, атрибуты, примеры
• HTML тег abbr | назначение, синтаксис, атрибуты, примеры
• HTML тег acronym | назначение, синтаксис, атрибуты, примеры
• HTML тег address | назначение, синтаксис, атрибуты, примеры
• HTML тег applet | назначение, синтаксис, атрибуты, примеры
• HTML тег area | назначение, синтаксис, атрибуты, примеры
• HTML тег base | назначение, синтаксис, атрибуты, примеры
• HTML тег basefont | назначение, синтаксис, атрибуты, примеры
• HTML тег bdo | назначение, синтаксис, атрибуты, примеры
• HTML тег bgsound | назначение, синтаксис, атрибуты, примеры
• HTML тег big | назначение, синтаксис, атрибуты, примеры
• HTML тег blink | назначение, синтаксис, атрибуты, примеры
• HTML тег blockquote | назначение, синтаксис, атрибуты, примеры
• HTML тег body — синтаксис, атрибуты
• HTML тег br | назначение, синтаксис, атрибуты, примеры
• HTML тег button | назначение, синтаксис, атрибуты, примеры
• HTML тег caption | назначение, синтаксис, атрибуты, примеры
• HTML тег center | назначение, синтаксис, атрибуты, примеры
• HTML тег cite | назначение, синтаксис, атрибуты, примеры
• HTML тег code | назначение, синтаксис, атрибуты, примеры
• HTML тег col | назначение, синтаксис, атрибуты, примеры
• HTML тег colgroup | назначение, синтаксис, атрибуты, примеры
• HTML тег comment | назначение, синтаксис, атрибуты, примеры
• HTML тег dd | назначение, синтаксис, атрибуты, примеры
• HTML тег del | назначение, синтаксис, параметры, примеры
• HTML тег dfn | назначение, синтаксис, атрибуты, примеры
• HTML тег dir | назначение, синтаксис, атрибуты, примеры
• HTML тег div | назначение, синтаксис, атрибуты, примеры
• HTML тег dl | назначение, синтаксис, атрибуты, примеры
• HTML тег dt | назначение, синтаксис, атрибуты, примеры
• HTML тег em | назначение, синтаксис, атрибуты, примеры
• HTML тег embed | назначение, синтаксис, атрибуты, примеры
• HTML тег fieldset | назначение, синтаксис, атрибуты, примеры
• HTML тег font | назначение, синтаксис, атрибуты, примеры
• HTML тег form | назначение, синтаксис, атрибуты, примеры
• html тег frame | назначение, синтаксис, атрибуты, примеры
• HTML тег frameset | назначение, синтаксис, атрибуты, примеры
• HTML тег head | назначение, синтаксис, атрибуты, примеры
• HTML тег hr | назначение, синтаксис, атрибуты, примеры
• HTML тег html | назначение, синтаксис, атрибуты, примеры
• HTML тег i | назначение, синтаксис, атрибуты, примеры
• HTML тег iframe | назначение, синтаксис, атрибуты, примеры
• HTML тег ilayer | назначение, синтаксис, атрибуты, примеры
• HTML тег img | назначение, синтаксис, атрибуты, примеры
• HTML тег input | назначение, синтаксис, атрибуты, примеры
• HTML тег ins | назначение, синтаксис, атрибуты, примеры
• HTML тег isindex | назначение, синтаксис, атрибуты, примеры
• HTML тег kbd | назначение, синтаксис, атрибуты, примеры
• HTML тег label | назначение, синтаксис, атрибуты, примеры
• HTML тег layer | назначение, синтаксис, атрибуты, примеры
• HTML тег legend | назначение, синтаксис, атрибуты, примеры
• HTML тег li | назначение, синтаксис, атрибуты, примеры
• HTML тег link | назначение, синтаксис, атрибуты, примеры
• HTML тег listing | назначение, синтаксис, атрибуты, примеры
• HTML тег map | назначение, синтаксис, атрибуты, примеры
• HTML тег marquee | назначение, синтаксис, атрибуты, примеры
• HTML тег menu | назначение, синтаксис, атрибуты, примеры
• HTML тег meta | назначение, синтаксис, атрибуты, примеры
• HTML тег multicol | назначение, синтаксис, атрибуты, примеры
• HTML тег nobr | назначение, синтаксис, атрибуты, примеры
• html тег noembed | назначение, синтаксис, атрибуты, примеры
• HTML тег noframes | назначение, синтаксис, атрибуты, примеры
• HTML тег noindex | назначение, синтаксис, атрибуты, примеры
• HTML тег noscript | назначение, синтаксис, атрибуты, примеры
• HTML тег object | назначение, синтаксис, атрибуты, примеры
• HTML тег ol | назначение, синтаксис, атрибуты, примеры
• HTML тег optgroup | назначение, синтаксис, атрибуты, примеры
• HTML тег option | назначение, синтаксис, атрибуты, примеры
• HTML тег p | назначение, синтаксис, атрибуты, примеры
• HTML тег param | назначение, синтаксис, атрибуты, примеры
• HTML тег plaintext | назначение, синтаксис, атрибуты, примеры
• HTML тег pre | назначение, синтаксис, атрибуты, примеры
• HTML тег q | назначение, синтаксис, атрибуты, примеры
• HTML тег s | назначение, синтаксис, атрибуты, примеры
• HTML тег samp | назначение, синтаксис, атрибуты, примеры
• HTML тег script | назначение, синтаксис, атрибуты, примеры
• HTML тег select | назначение, синтаксис, атрибуты, примеры
• HTML тег small | назначение, синтаксис, атрибуты, примеры
• HTML тег sound | назначение, синтаксис, атрибуты, примеры
• HTML тег spacer | назначение, синтаксис, атрибуты, примеры
• HTML тег span | назначение, синтаксис, атрибуты, примеры
• HTML тег strike | назначение, синтаксис, атрибуты, примеры
• HTML тег strong | назначение, синтаксис, атрибуты, примеры
• HTML тег style | назначение, синтаксис, атрибуты, примеры
• HTML тег sub | назначение, синтаксис, атрибуты, примеры
• HTML тег sup | назначение, синтаксис, атрибуты, примеры
• HTML тег table | назначение, синтаксис, атрибуты, примеры
• HTML тег tbody | назначение, синтаксис, атрибуты, примеры
• HTML тег td | назначение, синтаксис, атрибуты, примеры
• HTML тег textarea | назначение, синтаксис, атрибуты, примеры
• HTML тег tfoot | назначение, синтаксис, атрибуты, примеры
• HTML тег th | назначение, синтаксис, атрибуты, примеры
• HTML тег thead | назначение, синтаксис, атрибуты, примеры
• HTML тег title | назначение, синтаксис, атрибуты, примеры
• HTML тег tr | назначение, синтаксис, атрибуты, примеры
• HTML тег tt | назначение, синтаксис, атрибуты, примеры
• HTML тег u | назначение, синтаксис, атрибуты, примеры
• HTML тег ul | назначение, синтаксис, атрибуты, примеры
• HTML тег var | назначение, синтаксис, атрибуты, примеры
• HTML тег wbr | назначение, синтаксис, атрибуты, примеры
• HTML тег xmp | назначение, синтаксис, атрибуты, примеры
• HTML теги заголовков (h1, h2, h3, h4, h5, h6) | назначение, синтаксис, атрибуты, примеры
• О DOCTYPE | назначение, варианты, использование

Источник

@layer

Правило @layer CSS используется для объявления каскадного слоя, а также может использоваться для определения порядка приоритета в случае нескольких каскадных слоев.

Syntax

@layer layer-name @layer layer-name; @layer layer-name, layer-name, layer-name; @layer

Это набор правил CSS в каскадном слое.

Description

Правила внутри каскадного слоя каскадируются вместе,предоставляя веб-разработчикам больше контроля над каскадом.Любые стили,не входящие в слой,собираются вместе и помещаются в один анонимный слой,который идет после всех объявленных слоев,именованных и анонимных.Это означает,что любые стили,объявленные вне слоя,будут перекрывать стили,объявленные в слое,независимо от специфики.

Правило @layer используется для создания каскадного слоя одним из трех способов.

Первый способ заключается в создании именованного каскадного слоя с правилами CSS для этого слоя внутри,как показано ниже:

@layer utilities < .padding-sm < padding: .5rem; > .padding-lg < padding: .8rem; > >

Второй способ заключается в создании именованного каскадного слоя без назначения стилей.Это может быть один слой,как показано ниже:

Можно определить сразу несколько слоев,как показано ниже:

@layer theme, layout, utilities;

Это полезно, потому что первоначальный порядок объявления слоев указывает, какой слой имеет приоритет. Как и в случае с объявлениями, последний слой в списке будет иметь преимущество, если объявления будут найдены в нескольких слоях. theme и utilities будет найдено конкурирующее правило, правило в utilities выиграет и будет применено.

Правило в utilities будет применяться, даже если оно имеет более низкую специфичность , чем правило в theme . Это связано с тем, что после установления порядка слоев специфичность и порядок появления игнорируются. Это позволяет создавать более простые селекторы CSS, потому что вам не нужно гарантировать, что селектор будет иметь достаточно высокую специфичность, чтобы переопределить конкурирующие правила; все, что вам нужно, это убедиться, что он появится на более позднем слое.

Примечание. Объявив имена слоев, тем самым установив их порядок, вы можете добавить правила CSS к слою, повторно объявив имя. Затем стили добавляются к слою, и порядок слоев не изменяется.

Третий способ-создать каскадный слой без имени.Например:

Это создает анонимный каскадный слой . Этот слой функционирует так же, как именованные слои; однако правила не могут быть назначены ему позже. Порядок приоритета для анонимных слоев — это порядок, в котором слои объявлены, именованы или нет, и ниже, чем стили, объявленные вне слоя.

Другой способ создать каскадный слой — использовать @import . В этом случае правила будут в импортированной таблице стилей. Помните, что правило @import должно предшествовать всем другим типам правил, кроме правил @charset .

@import 'theme.css' layer(utilities); 

Nesting layers

Слои могут быть вложенными.Например:

@layer framework < @layer layout < >>

Чтобы добавить правила к слою layout внутри framework , соедините два имени расширением . .

@layer framework.layout < p < margin-block: 1rem; > >

Formal syntax

@layer [ layer-name># | layer-name>? < stylesheet> > ]

Examples

Simple example

В следующем примере создаются два правила CSS. Один для элемента вне любого слоя и один внутри слоя с именем type для .box p .

Без слоев селектор .box p имел бы самую высокую специфичность, и, следовательно, текст Hello, world! будет отображаться зеленым цветом. Поскольку текстовый слой предшествует анонимному слою, созданному для содержания type содержимого, текст будет фиолетовым.

Также обратите внимание на порядок. Несмотря на то, что мы сначала объявляем неслоистый стиль, он все равно применяется после стилей слоя.

HTML

div class="box"> p>Hello, world! p> div> 

CSS

p < color: rebeccapurple; > @layer type < .box p < font-weight: bold; font-size: 1.3em; color: green; > >

Result

Назначение правил существующим слоям

В следующем примере создаются два слоя без применения правил, затем к этим двум слоям применяются правила CSS. Базовый base определяет color , border , font-size и padding . Специальный special определяет другой цвет. Когда special слои были определены последними, используется цвет, который он предоставляет, а текст отображается с помощью rebeccapurple . Все остальные правила из base остаются в силе.

HTML

div class="item">I am displayed in code>color: rebeccapurple code> because the code>special code> layer comes after the code>base code> layer. My green border, font-size, and padding come from the code>base code> layer. div> 

CSS

@layer base, special; @layer special < .item < color: rebeccapurple; > > @layer base < .item < color: green; border: 5px solid green; font-size: 1.3em; padding: .5em; > >

Result

Specifications

Источник