NEXT
Обновление
Данная тема появится после следующего обновления документации, обновления выходят каждые 12 дней
Атрибуты в HTML
В статье с изучением HTML мы с вами разбирали работу с классами, и был момент где мы стерли все атрибуты и оставили только классы.
Я написал эту статью позже, потому-что атрибуты на самом деле второстепенны в рамках изучения кода. В 90% хватит работы с классами, и если вы научились создавать селекторы используя классы и id, то вам этого хватит. Но есть и другие 10% когда требуется вызвать элемент именно через атрибут.
Когда такое требуется?
Я написал эту статью позже, потому-что атрибуты на самом деле второстепенны в рамках изучения кода. В 90% хватит работы с классами, и если вы научились создавать селекторы используя классы и id, то вам этого хватит. Но есть и другие 10% когда требуется вызвать элемент именно через атрибут.
Когда такое требуется?
- Когда нет уникального класса/id
- Когда нет возможности добавить уникальный класс/id
- Когда легче обратится к элементу через атрибут, например когда в форме обратной связи вы присвоили имя переменной для поля, тогда легче будет использовать такую конструкцию: input[name="имяПеременной"] { css... }
- Когда вам в целом пофиг что использовать, но хочется попробовать атрибут :)
<div class="t396__elem tn-elem tn-elem__7922642091470210224069"
data-elem-id="1470210224069" data-elem-type="shape" data-field-top-value="255"
data-field-left-value="750" data-field-height-value="100" data-field-width-value="100"
data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid"
data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px"
data-field-widthunits-value="px"
data-fields="width,height,top,left,container,axisx,axisy,widthunits,heightunits,leftunits,topunits"
style="width: 100px; left: 862.5px; top: 255px; height: 100px;">
<div class="tn-atom"></div>
</div>Если вдруг забыли где находится этот момент, то перейдите на прошлую страницу с изучением HTML и посмотрите о каком моменте идет речь
<div class="t396__elem tn-elem tn-elem__7922642091470210224069">
<div class="tn-atom"></div>
</div>Такое у нас вышло после того как мы убрали все атрибуты из элемента.
То-есть из этого мы можем понять, что все что находится внутри <div ... > - является атрибутом, кроме id и классов, их принято считать id и классами.
Все остальные конструкции, которые вы сможете увидеть в коде нашего элемента (из кода выше) является атрибутами. Давайте я выпишу некоторые из них:
data-elem-id="1470210224069"
data-elem-type="shape"
data-field-top-value="255"
Что мы тут видим? Во первых атрибуты содержат какую-то информацию в кавычках, во вторых действительно атрибут делится на 1 часть до знака =, и после него значение в кавычках.
Именно так оно и читается
data-elem-id - атрибут
"1470210224069" - значение атрибута
Атрибуты разделяются пробелом.
Также вы можете заметить в конечной точке перед закрытием перечисления атрибутов - есть строка: style="width: 100px; left: 862.5px; top: 255px; height: 100px;"
То-есть из этого мы можем понять, что все что находится внутри <div ... > - является атрибутом, кроме id и классов, их принято считать id и классами.
Все остальные конструкции, которые вы сможете увидеть в коде нашего элемента (из кода выше) является атрибутами. Давайте я выпишу некоторые из них:
data-elem-id="1470210224069"
data-elem-type="shape"
data-field-top-value="255"
Что мы тут видим? Во первых атрибуты содержат какую-то информацию в кавычках, во вторых действительно атрибут делится на 1 часть до знака =, и после него значение в кавычках.
Именно так оно и читается
data-elem-id - атрибут
"1470210224069" - значение атрибута
Атрибуты разделяются пробелом.
Также вы можете заметить в конечной точке перед закрытием перечисления атрибутов - есть строка: style="width: 100px; left: 862.5px; top: 255px; height: 100px;"
<div class="t396__elem tn-elem tn-elem__7922642091470210224069"
data-elem-id="1470210224069" data-elem-type="shape" data-field-top-value="255"
data-field-left-value="750" data-field-height-value="100" data-field-width-value="100"
data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid"
data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px"
data-field-widthunits-value="px"
data-fields="width,height,top,left,container,axisx,axisy,widthunits,heightunits,leftunits,topunits"
style="width: 100px; left: 862.5px; top: 255px; height: 100px;">
<div class="tn-atom"></div>
</div>Что это такое?
Это стили, которые также можно вшивать в "формате атрибута", тот же самый CSS, но со своей структурой, как видите все написано в строчку.
В коде можно так делать, тильда это использует и зачастую стили, которые мы устанавливаем в панели управления - тильда добавляет именно так.
Я советую вам не заострять внимание на этой штуке и в будущем когда вы будете писать сайты кодом, то также не советую особо использовать данный подход. Иногда можно.
Итак, давайте теперь рассмотрим несколько элементов и составим несколько селекторов под каждый.
Это стили, которые также можно вшивать в "формате атрибута", тот же самый CSS, но со своей структурой, как видите все написано в строчку.
В коде можно так делать, тильда это использует и зачастую стили, которые мы устанавливаем в панели управления - тильда добавляет именно так.
Я советую вам не заострять внимание на этой штуке и в будущем когда вы будете писать сайты кодом, то также не советую особо использовать данный подход. Иногда можно.
Итак, давайте теперь рассмотрим несколько элементов и составим несколько селекторов под каждый.
Как я писал выше, атрибуты можно использовать с формами, например когда вам надо через js или css обратится к конкретному полю по его переменной.
Для этого и существует данная строка в панели управления формой.
Для этого и существует данная строка в панели управления формой.
Попробуйте открыть инспектор и навести инструментов инспектирования на поле для ввода, и вы в атрибутах сможете заметить вашу переменную. Вы сможете это сделать прямо на этой странице
Как видите, существует определенный input элемент, и имеет внутри атрибут name со значением email900
А значит для кастомизации я буду писать CSS вот так:
<style>
input[name="email900"] {
border: none !important;
background-color: red !important;
}
</style>
Попробуйте создать у себя на странице аналогичную форму, и дать ей другое значение переменной, и после этого по примеру выше - добавьте CSS код и опубликуйте.
Если обводка исчезнет и поле превратится в красное, значит вы выиграли!
Теперь давайте попробуем достучаться к шейпу, который находится в зеро.
А значит для кастомизации я буду писать CSS вот так:
<style>
input[name="email900"] {
border: none !important;
background-color: red !important;
}
</style>
Попробуйте создать у себя на странице аналогичную форму, и дать ей другое значение переменной, и после этого по примеру выше - добавьте CSS код и опубликуйте.
Если обводка исчезнет и поле превратится в красное, значит вы выиграли!
Теперь давайте попробуем достучаться к шейпу, который находится в зеро.
Также открываем инспектор -> выбираем элемент через инструмент инспектирования -> анализируем весь элемент и убеждаемся, что мы нашли именно его -> берем атрибут и пробуем что-то сделать
Как мы знаем зеро блок оборачивает каждый элемент в .tn-elem, поэтому мы будем брать атрибут именно из этого элемента. Можем также заметить, что в дочернем элементе с классом .tn-atom нет атрибутов, а значит тем более, мы будем стучаться к .tn-atom именно через атрибут
Возьмем атрибут data-elem-id="1470210224069"
Почему именно его? Потому-что название атрибута говорит само за себя, разработчики тильды вероятно для удобства также добавили уникальное значение для элемента и завернули его в атрибут data-elem-id
Хочу также сказать, data-elem-id - это действительно атрибут с уникальным значением, поэтому чтобы достучаться исключительно до нужного элемента в ZERO вы можете использовать его.
Каким образом у нас получится достучаться до элемента?
<style>
[data-elem-id="1470210224069"] {
background-color: red !important;
}
</style>
Вы также можете добавить название тега вначале, как мы это сделали с input в прошлом примере, вот так получится:
<style>
div[data-elem-id="1470210224069"] {
background-color: red !important;
}
</style>
В чем большая разница? В том, что мы отсеиваем все другие элементы, которые могли бы использовать этот же атрибут с таким же значением, но т.к значение итак уникальное, то можно подобное не делать. Выбор в данном случае за вами
Попробуйте сделать тоже самое в своем документе. Создайте шейп в зеро, зайдите в инспектор, проанализируйте ваш элемент и попробуйте достучаться до него.
Напишите простой CSS скрипт, который превратит квадрат из желтого в красный с таким свойством: background-color: red !important;
И если у вас все получилось, значит вы выиграли! А если нет, то для начала попробуйте снова пройтись по инструкции, а после чего обязательно пишите в наш чат или мне в личку в тг, я вам обязательно помогу.
Почему именно его? Потому-что название атрибута говорит само за себя, разработчики тильды вероятно для удобства также добавили уникальное значение для элемента и завернули его в атрибут data-elem-id
Хочу также сказать, data-elem-id - это действительно атрибут с уникальным значением, поэтому чтобы достучаться исключительно до нужного элемента в ZERO вы можете использовать его.
Каким образом у нас получится достучаться до элемента?
<style>
[data-elem-id="1470210224069"] {
background-color: red !important;
}
</style>
Вы также можете добавить название тега вначале, как мы это сделали с input в прошлом примере, вот так получится:
<style>
div[data-elem-id="1470210224069"] {
background-color: red !important;
}
</style>
В чем большая разница? В том, что мы отсеиваем все другие элементы, которые могли бы использовать этот же атрибут с таким же значением, но т.к значение итак уникальное, то можно подобное не делать. Выбор в данном случае за вами
Попробуйте сделать тоже самое в своем документе. Создайте шейп в зеро, зайдите в инспектор, проанализируйте ваш элемент и попробуйте достучаться до него.
Напишите простой CSS скрипт, который превратит квадрат из желтого в красный с таким свойством: background-color: red !important;
И если у вас все получилось, значит вы выиграли! А если нет, то для начала попробуйте снова пройтись по инструкции, а после чего обязательно пишите в наш чат или мне в личку в тг, я вам обязательно помогу.
