• доступно о веб-разработке
16.10.2012 HTML

Параграф и перенос строк

Сегодня нас ждет простой, но крайне важный урок. Необходимо раз и навсегда осознать разницу между параграфом и переносом строки.

Начнем с того, что в гипертекстовом языке разметки HTML автоматического разбиения строк нет. То есть, если вы пишите в Notepad++ код страницы, то нажимая Enter для перевода строки в редакторе, вы не повлияете на отображение текста на сайте. Он так и будет отображаться в одну строчку, без разрыва.

Разрыв строки

Все потому, что для этих целей существует специальный тег — <br/>. От английского break — разрыв.

Обратите внимание на то, что это закрытый тег. То есть внутри него не может быть содержимого.

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

Тег  <br/> предназначен только для разрыва строки текста. В крайнем случае его можно использовать для иных целей.

Данный тег принято использовать «голым», то есть без применения каких-либо атрибутов или параметров.

Параграф

Напротив, тег параграфа <p></p>открытый. То есть внутри него может быть содержимое.

По-умолчанию, параграф имеет отступ от других элементов:

И стиль параграфа, как раз, можно менять, как душе удобно.

Вот как будет выглядеть встроенный стиль:

<h1>Привет мир!</h1> <!-- Заголовок первого уровня -->
<p style="padding: 30px; font-size: 1.5em;"> <!-- Параграф -->
Меня зовут <b>ДвижКод</b>!  <!-- Впишите вместо «ДвижКод» своё имя -->
</p>

Мы увеличили внутренний отступ (на картинке выделен зеленым цветом) и размер шрифта в относительных единицах.

Давайте отдельно укажем стиль, который слово «ДвижКод» в коде сделает красным.

<style>
p b{
    color: red;
}
</style>


Обратите внимание на селектор «p b». Мы говорим тем самым, что для всех элементов типа (тег выделения жирным) внутри всех элементов типа p будет действовать следующее правило — цвет:красный.

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

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

 

Как и обещал, более подробно останавливаюсь на основах. О чем еще вы хотите узнать более подробно в ближайшее время?

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Как редактировать сайт. WinSCP

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

Закрыть