наверх






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

В данном уроке будут приведены лишь основные HTML атрибуты, которые поддерживаются практически всеми тегами.

class


Атрибут указывает класс элемента, чтобы в последующем данный элемент можно было стилизовать посредствами CSS.
Данный атрибут можно добавить практически ко всем тегам страницы и у всех этих элементов будет один и тот же стиль.
Есть возможность указать сразу несколько классов одному или нескольким элементам в атрибуте разделяя их через пробел, а каждому из этих классов указать свой стиль. Элементу будут присвоены все указанные в значение атрибута класса стили.

<div class="font10 color-red">Hello!</div>


В CSS:

.font10 {
  font-size: 10pt;
}

.color-red {
  color: red;
}


При обработке браузером страницы элементу будут выданы следующие стили:

font-size: 10pt;
color: red;


id


В отличии от класса данный атрибут указывает идентификатор элемента. Следовательно, указанное значение в данном атрибуте не желательно использовать повторно на странице в значении других идентификаторов. То есть значение идентификатора должно быть уникальным.

<div id="myBlock" class="wrap">Hello!</div>
<div id="right" class="wrap"></div>


В CSS:

.wrap {
  font-size: 10pt;
}

#myBlock {
  padding: 5px;
}

#right {
  padding: 2px;
  border: 1px solid #000;
}


В приведенном выше примере у обоих элементов указан класс, в стилях мы его стилизовали и данным элементов будет присвоено свойство font-size: 10pt;. Так же у них разные идентификаторы и в CSS мы их так же по разному стилизовали, следовательно элемент с идентификатором myBlock получит дополнительно к font-size: 10pt; еще и padding: 5px;. Так же обстоит дело и с right.

title


Данный атрибут описывает элемент в виде всплывающей подсказки.

<img src="/home/cat.png" title="Кошка">


При наведении на изображение у курсора всплывет подсказка, в которой будет написано слово "Кошка". Еще один способ применения в тех же тегах изображения: данная подсказка может показываться вместо предполагаемого изображения, если сам файл с изображением недоступен (удален, перемещен).

style


Атрибут предназначен для быстрого указания списка стилей элементу. То есть, не нужно указывать элементу класс или идентификатор со стилем, можно сразу написать все CSS свойства в данный атрибут. Это отличный способ указания стилей для одиночных элементов. Но если этих элементов на странице много, то способ окажется неудачным. Ведь в последующем может оказаться, что нужно добавить какое-нибудь дополнительно свойство и придется его добавлять всем элементам, поэтому в данном случае выигрывает атрибут класса.

<div style="font-size: 10pt; color: red; border: 1px solid #333; padding: 2px;">Hello!</div>






Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.