К блочным элементам относятся:

• Тег  <div>
• Абзацы
• Нумерованные списки
• Маркированные списки

А также много-много других тегов.

Встроенные элементы в CSS

К встроенным элементам относятся:

• Универсальные теги <span>. Они ничего не передают и созданы исключительно для применения стилей, так же, как и теги <div>.
• Ссылки

В чем же отличие блочных элементов от встроенных?

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

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

• Первый блочный элемент со словами «Добро пожаловать на мою страничку мыслей». Это тег <div>.
• Второй блочный элемент со словами «Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт info-line.net». Тоже тег <div>.
• Списки снизу
• Заголовки

Встроенные элементы:

• Ссылки
• Выделение жирным
• Выделение курсивом

В чем же их отличие? Если мы вспомним коробочную или, как часто ее называют, блочную модель, то мы увидим, что она имеет четыре стороны: верх, низ, лево, право. Блочные элементы работают именно по такой модели. Поэтому они  не могут находиться на одной строке. Они будут располагаться друг за другом. Встроенные элементы не реагируют на верхние и нижние поля. Только на левое и правое. Поэтому будут располагаться на одной строке. Если они не будут вмещаться, то передвинутся на другую строку.

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

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

Вернувшись к первоначальному примеру, вы можете заметить то, что я только что вам рассказал. Думаю, комментарии будут здесь излишними. Единственное хочу сказать, что тег <div> создан для того, чтобы создавать блоки (блочные элементы) и применять к ним стили, также как и тег <span> создан для того, чтобы создавать встроенные элементы и тоже применять к ним стили. Например, с помощью тега <div> мы можем, создать целую структуру документа без использования таблиц. А с помощью тега <span> — присвоить стили, какой либо области текста. Но нужно соблюдать правило:  блочные элементы включают в себя встроенные. Или по-другому, встроенные элементы входят в блочные. То есть, открывается тег <div>, потом открывается тег <span>, потом закрывается тег <span>, и закрывается тег <div>.

Давайте перейдем в исходный код нашей страницы и создадим, тег <span>. Присваиваем его любой области текста.

Я бы мог <span> написать книгу </span>, которая бы лежала на n-й полке

Давайте сохраним и присвоим ему еще стили.

span {
color: red;
font-weight: bold;
}

Сохраним, посмотрим, что у нас получилось.

Два слова: «написать» и «книгу» — стали жирными и приняли красный цвет.

Мы только что видели, что тег <span> ведет себя как встроенный элемент. Давайте теперь разберемся с тем, как сделать встроенный элемент блочным и наоборот. Делается это с помощью одного простого свойства — display. Оно относится ко многим тегам и может принимать очень много различных значений, но, для начала, мы разберем только три. Итак, первое значение этого свойства – значение block.

span {
color: red;
font-weight: bold;
display: block;
}

Сохраняем. Все теги <span> стали блочным элементом. Как мы видим, он просто переместился на следующую строку, как и текст после него.

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

Псевдо-класс должен добавляться к селектору элемента, отделяясь от него двоеточием (:).

Оформление для псевдо-классов должно задаваться в порядке перечисленном ниже.

• a:link - определяет оформление обычной не посещенной ссылки.
• a:visited - определяет оформление посещенной пользователем ссылки.
• а:hover - определяет оформление ссылки, на которую наведен курсор мыши.
• a:active - определяет оформление ссылки, на которую щелкнули мышкой.

Используя результаты практической работы из урока №6, создать для каждого пункта меню гиперссылку на страницу.

Предварительно создайте 5 страниц html и назовите их:

• str 1
• str 2
• str 3
• str 4
• str 5

На каждую страницу введите следующий текст:

• «это страница 1»
• « это страница 2»
• « это страница 3»
• « это страница 4»
• « это страница 5»