Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 9 видеоуроку по CSS Размер: 29.51 kB, скачали: 498 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Блочные элементы в CSS
К блочным элементам относятся:
- Тег <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;
}
Сохраним, посмотрим, что у нас получилось.
Два слова: «написать» и «книгу» — стали жирными и приняли красный цвет.
Свойство display
Мы только что видели, что тег <span> ведет себя как встроенный элемент. Давайте теперь разберемся с тем, как сделать встроенный элемент блочным и наоборот. Делается это с помощью одного простого свойства — display. Оно относится ко многим тегам и может принимать очень много различных значений, но, для начала, мы разберем только три. Итак, первое значение этого свойства – значение block.
span {
color: red;
font-weight: bold;
display: block;
}
Сохраняем. Все теги <span> стали блочным элементом. Как мы видим, он просто переместился на следующую строку, как и текст после него.
Давайте то же самое сделаем со словом «PHP». Смотрим, где оно располагается в исходном коде. Можем даже присвоить ему класс, чтобы не затронуть другие элементы, помеченные жирным. Пусть он называется «strong1».
<strong class="strong1">PHP</strong>
Сохраняем. Прописываем ему стили:
b.strong1 {
display: block;
}
То есть, тег <b> с классом «strong1» принимает стиль «display: block».
Сохраняем. Смотрим, что у нас получается. Мы видим, что слово PHP приняло те стили, которые мы ему прописали и стало блочным элементом.
Что ж, давайте теперь разберемся с тем, как сделать блочный элемент встроенным. Для этого создадим тег <div> с классом «inline»:
<div class="inline">я предпочел потратить</div>
Переходим в таблицу стилей:
div.inline {
display: inline;
}
Сохраняем. Ищем то словосочетание, которое мы выделили в тег <div>. По нашей логике с ним не должно ничего произойти. Обновляем. Произошел перенос после слова «Но», однако не произошло переноса следующего остатка предложения. Почему такое произошло? Я специально это инсценировал, чтобы удалить все недопонимания, которые могли бы у вас возникнуть в будущем. Давайте перейдем в наш исходный код. Мы можем видеть, что тег <div> располагается в теге <p>. По логике разметки HTML, тег <p> должен располагаться, наоборот, в теге <div>, а не быть его родителем. Именно поэтому у нас возникло такое недопонимание. Если мы сейчас поменяем тег <div> на тег <p> , а тег <p> на тег <div>:
<div class="purple"> Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как создать свой сайт в этом большом и наверняка всем известном пространстве. Я бы мог <span> написать книгу</span>, которая бы лежала на n-ой полке какого-нибудь магазина, а то и вовсе у читателей, которым было бы также лениво приступать к ее изучению. Но я предпочел потратить больше времени и подать информацию в более <strong> удобном </strong> варианте ее восприятия для пользователей. Сейчас Вы смотрите данный видеоурок и скорее всего: <ul type="square"> <li>Вы со мной согласны.</li> <li>Вы со мной не согласны.</li> <li>Вы в замешательстве.</li> </ul> <hr size="5" /> <ol type="I"> <li>Вы со мной согласны.</li> <li>Вы со мной не согласны.</li> <li>Вы в замешательстве.</li> </ol> </div>
И такие же изменения сделаем в таблице стилей:
p.inline {
display: inline;
}
Теперь всё должно быть верно. Напомню, что тег <p> также является блочным элементом. Переходим и обновляем нашу страницу. Мы видим, что никаких изменений на этот раз у нас не произошло. То есть, если бы мы не применили display:inline, то эти три слова «я предпочел потратить» располагались бы как отдельный абзац на следующей строке. Давайте быстро это проверим
p.inline {
}
Видим на реальном примере. Возвращаем.
p.inline {
display: inline;
}
И снова всё работает.
Теперь, если мы зададим этому абзацу отступ сверху, например,
p.inline {
display: inline;
padding: 30px 0;
}
Мы видим, что никаких изменений у нас не произошло. Все потому, что встроенные элементы не реагируют на верхние и нижние отступы. Если мы попробуем сделать отступ в 10 пикселей со всех сторон:
p.inline {
display: inline;
padding: 10px;
}
то мы увидим, что отступ у нас стал только слева и справа. То же самое происходит со всеми встроенными элементами.
На этом можно было бы уже закончить, но хочу вам дать пару советов на будущее, когда вы уже будете верстать сайты.
Что это за советы:
Применяйте теги абзаца <p> и теги заголовков <h1>, <h2>, <h3>, когда используете текст. Если же текст не используется, то задумайтесь над тем, чтобы применять блоки <div>, например, или любые другие теги, которые мало связаны с текстом. Используя эти простые правила, у вас не должно возникнуть много проблем. То есть, для заголовков – заголовки, для текста – абзацы, для блоков – блоки. Ведь не нужно создавать отдельные классы и присваивать им крупный размер шрифта, если для этого есть заголовки. Ведь не нужно создавать отдельные классы, применять к ним стили жирности и присваивать эти классы некоторым текстам, если для этого есть теги <strong> и <b>. Я хочу, чтобы вы соблюдали эти правила. Тогда поисковики будут относиться к вам лучше, и загрузка ваших страниц значительно ускорится за счет минимизации кода.
Напоследок я обещал рассказать о третьем свойстве display. Это значение none.
p.inline {
display: none;
padding: 10px;
}
Нескладное предложение у нас появилось, правда? Замечаете, что произошло? Тот самый абзац <p> с классом “inline” исчез.
На этом я заканчиваю данный урок и прошу вас поэкспериментировать над изученным материалом, после чего можете смело переходить к блочной верстке одноколоночного макета.
Info-line.net