Элементы-контейнеры. Атрибут style

Free Preview
Продолжительность: 11 мин

Давайте продолжим знакомство с основными HTML тегами и рассмотрим теги <div> и <span>.

Тег <div>

Тег <div> в HTML предназначен для группировки каких либо элементов. Фактически <div> это универсальный контейнер, который не несет никакой смысловой нагрузки, но позволяет нам сгруппировать несколько элементов, например для того, чтобы в последующем, применить к ним какой-либо визуальный эффект.

Давайте попробуем добавить <div> на страницу с которой мы уже работали:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок моей первой страницы</title>
  </head>
  <body>
    <h1 title="Главный заголовок страницы">Мой первый HTML-документ</h1>
    <p>Это первый абзац</p>
    <div>
      <p>Это второй абзац</p>
      <p>
        Это абзац содержащий
        <a href="https://ya.ru/" target="_blank">ссылку на внешний ресурс</a>
      </p>
    </div>
  </body>
</html>
html

Посмотрите результат в браузере. Обратите внимание, что добавление <div> никаким образом не повлияло на отображение контента на странице. Элемент <div> используется для разметки структуры страницы, он может содержать что угодно (текст, изображения, кнопки и другие блоки). Div'ы чаще всего применяются для стилизации и JavaScript логики.

Атрибут style

Для каждого видимого HTML-элемента мы можем добавить атрибут style, с помощью которого мы можем изменять визуальное отображение соответсвующего элемента.

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

Итак, чтобы с помощью атрибута style изменить отображение элемента, необходимо использовать следующий синтакис style="css-свойство: значение;". Изучению CSS у нас будет посвящен отдельный модуль, а сейчас наша цель просто понять принцип и возможность использования CSS-свойств. Давайте добавим какое-нибудь свойство к нашему div. Например, свойство color отвечает за цвет текста и ему можно присвоить какое-нибудь значение, например, можно указать red чтобы текст стал красным.

<div style="color:red">
  <p>Это второй абзац</p>
  ...
</div>
html

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

<div style="color:red; background-color: yellow;">
  <p>Это второй абзац</p>
  ...
</div>
html

Вы можете попробовать использовать другие цвета, такие как green, blue, violet и т.д. Мы более подробно поговорим о возможных значениях в следующем модуле. В результате у вас должна получиться страница наподобие вот этой: first-document-with-first-styles.png

Блочные и строковые (инлайн) элементы

Вы могли заметить, что цвет фона, который мы применили к элементу <div> использовался браузером чтобы закрасить все доступное пространство по ширине. Это происходит потому, что элемент div является блочным (block). Такие элементы занимают всю доступную ширину родителя и всегда начинаются с новой строки. Уже рассмотренные нами теги <h1> и <p> также являются блочными.

Существует другой тип элеметов - строчные (или inline). Такие элементы занимают только ширину своего содержимого и не переносятся на новую строку. Как правило такие элементы используется для визуального измененения какого-либо слова внутри текста.

Наиболее часто в современной разработке используется элемент <span>. Он предназначен для выделения части текста или мелкого контента без изменения структуры страницы. Давайте рассмотрим следующий абзац (его можно добавить к уже существующему HTML-документу):

<p>
  Это <span>важное</span> слово.
</p>
html

Без CSS <span> никак не влияет на внешний вид текста, но теперь мы можем добавить атрибут style и применить какое либо визуальное преобразование только для одного слова внутри параграфа. Например:

<p>
  Это <span style="color: red; font-weight: bold;">важное</span> слово.
</p>
html

Другие инлайн элементы

В стандарте HTML существует большое количество других инлайн элементов. Вот некоторые из них:

  • <a> - уже знакомый нам тег для создания ссылок является инлайновым
  • <strong></strong> - делает текст жирным и используется для смыслового акцента (несет не только визуальную составляющую, но и смысловую)
  • <em></em> - выделяет текст курсивом, также несет смысловую нагрузку.
  • <b></b> - выделяет текст жирным без измнения семантики.
  • <i></i> - делает текст курсивом.

Важное правило - блочные элементы не должны быть потомками инлайн элементов. В целом, браузер сможет разобраться с такой ситуацией и сможет отрисовать страницу с такой ошибкой, но так делать не следует.

Предыдущий урокСледующий урок