Coding-space.ru
menu

Типы элементов

До сих пор мы создавали элементы и даже не задумывались какой у них тип и почему они расположены именно так, а не иначе.

А вы не замечали почему некоторые элементы стоят в строку, а другие могут спокойно выстраиваться в ряд?

<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
<a>Ссылка 1</a>
<a>Ссылка 2</a>
</body>

Ссылки стоят на одной строке, хотя в разметке не так:

block and inline elems

Это происходит из-за того, что в HTML большинство элементов либо блочные либо строчные.

Строчные элементы

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

Примеры строчных элементов: картинки <img>, инпуты <input>, теги стилизации <b>, <strong> и т.д.

Элемент <span>

Элемент <span> - строчный элемент, который требует закрывающего тега. Частенько используется когда нужно обернуть текст чтобы сделать с ним что-то, например - изменить цвет.

<body>
<p>Это <span style="color: red;">красное</span> слово</p>
</body>

Результат:

span red word

Блочные элементы

Блочные - противоложоность строчным, они пишутся на новых строках.

Примеры блочных элементов: заголовки <h1>, тег параграфа <p>, форма <form>, списки <ul>, <ol>, <li> и т.д.

Элемент <div>

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

Атрибут style

Позволяет писать CSS свойства прямо в теге. Это считается плохой практикой, поэтому мы опустим этот атрибут.

Не переживайте - Вы научитесь стилизовать теги с помощью CSS.
<body>
<div style="background: lightgreen;">
<h1>Заголовок содержимого</h1>
<p>Обычный текст</p>
</div>
<p>Текст вне контейнера</p>
</body>

Задачи

Светофор

В рамках текущего урока сделайте вот такой светофор из текста:

task

Маленькая подсказка: элемент div - основной блок, чтобы сделать ему такой задний фон пропишите в стили background-color: #111;

<div style="background-color: #111;">
<h2 style="color: red;" align="center">красный</h2>
<h2 style="color: yellow;" align="center">жёлтый</h2>
<h2 style="color: green;" align="center">зелёный</h2>
</div>

Помогайте другим!

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