Элементы верстки сайта. Работаем с абзацем.
Несколько небольших статей, начиная с этой, я решил посвятить отдельным элементам верстки, таким как: абзац, ссылка, изображение, список и т.п.
Обычно при описании тэгов html, о которых собственно и идет речь, пишут либо очень много, либо совсем ничего, и при этом валят все в кучу. Отчего в головах только каша, разброд и шатания. Я постараюсь пройтись по каждому элементу отдельно и рассказать доходчиво и просто о его свойствах и способах применения.
Заранее предупреждаю, что рассказывать буду о самых простых вещах. Если тэги HTML для вас как 2х2, то можете смело пропустить пару-тройку последующих тем, дабы не заскучать.
Начнем мы с самого часто-употребляемого и простого с виду тэга абзаца — <p>, задача которого разбивать текст на отдельные блоки, сиречь абзацы, дабы глаз человечий мог упорядоченно скакать по странице, а мозг — успевать переваривать прочитанное и вычленять отдельные смысловые части текста.
Тэг этот парный. То есть, всегда должен иметь закрывающий хвост </p>.
Свойства тэга p
Прежде, чем рассмотреть его свойства, хочу прояснить один факт из блочной верстки. Довольно часто начинающие изучать этот современный вид верстки делают одну и ту же ошибку — сыпят «дивами» направо и налево не жалея скобок.
Так вот, div был изначально задуман как элемент крупнокалиберный, предназначенный для разделения страницы на функциональные блоки, такие как: шапко, подвалко, тушко и менюшко. Писать же что-то вроде:
<div class="pamparam"><p>Лорем ипсум, ипсум лорем</p></div>
— это почти тавтология. Браузер такое съест и не подавится, но этот код избыточен. Это все равно, что заворачивать подарок в массу картона, дабы казался крупнее. Можно и нужно эту запись сократить до:
<p class="pamparam">Лорем ипсум, ипсум лорем</p>
То есть, приписать class непосредственно к тэгу <p>, не добавляя лишнего «дива». Надеюсь, это понятно.
Ну а теперь о свойствах этого замечательного тэга <p>.
Первый и самый явный признак того, что абзац — это абзац, а не мешок картошки — четкое отделение одного куска текста от другого. Задается такое разделение посредством свойства margin. Например, если мы в листе стилей CSS пропишем для тэга <p>:
p {margin: 10px 0 0 0;}
то каждый из абзацев будет иметь сверху отступ в 10 пикселей.
Если вы хорошо учились в школе, то помните, что такое «красная строка». В вебе элемент этот спорный. Кто-то считает его насущной необходимостью, кто-то совсем даже наоборот. Я думаю, что если страница сайта имеет закос под книжку, со шрифтом типа Таймс (с засечками), всяческими вензелями и буквицами, то данный элемент как нельзя кстати.
Но обычная IT-шная статья в блоге выглядит с этими отступами как-то бестолково. Однако, как бы там ни было, но знать об этой фишке абзаца полезно. Задается «красная строка» свойством text-indent. Например, следующий код сделает в начале каждого абзаца небольшой отступ (в 15 пикселей) у первой строки:
p {text-indent: 15px;}
Задавать его можно как в пикселях, так и в процентах. Причем, не только на положительную, но и на отрицательную величину. Хотя выглядит такое, мягко говоря, странно.
Теперь поговорим за выравнивание. Все, кто когда-либо что-либо печатал в Ворде, знают, что в инструментах этого замечательного редактора есть что-то вроде линеек. Клацнул по одной — текст прилепился к правому краю экрана. Клацнул по другой — выстроился в середке по типу стихотворения гражданина Маяковского В.В. Все это и называется выравниванием.
По-умолчанию браузеры выравнивают текст по левому краю монитора. Если вас это не сильно устраивает, то можете принудительно сместить его в нужном направлении. Отвечает за это дело свойство text-align. Пример:
p {text-align: right;}
выравнивает абзац по правому краю монитора.
Здесь необходимо дать кое-какие пояснения. Часто бывает, что используя в качестве основы для собственного сайта чужую верстку и пытаясь ее переделать, никак не получается сместить этот чертов абзац куда бы то ни было. Вот прилип к левой стороне и хоть ты тресни.
Происходит такое из-за так называемых «глобальных» правил. Поясняю: если в листе стилей для тэга <p> задано выравнивание по левому краю, то все абзацы будут подчиняться этому правилу. И как бы вы не пытались у какого-либо блока изменить это выравнивание — ничего не получится.
Здесь работает так называемая «наследственность». Чтобы ее обойти, нужно у тэга <p> удалить заданное правило и прописывать его только там, где необходимо, используя классы.
Кроме выравнивания право-лево-центнер можно задать абзацам красивое выравнивание «по-всему-полю». То есть, текст выравнивается одновременно и по правому и по левому краю, создавая впечатление ровного столбика.
Это не есть выравнивание по центру! В действительности, это означает отключение вообще какого бы то ни было выравнивания. Задается это так:
p {text-align: justify;}
Однако у данного типа выравнивания есть одно не самое красивое свойство: когда места для строк абзаца мало (например, при обтекании картинки), то слова, а в особенности короткие и всякие там дефисы, растягиваются, создавая между словами весьма заметные промежутки.
Так что, если собираетесь использовать это свойство, то лучше там, где есть достаточная ширина для текста.
Еще очень важное свойство текста — высота строки. По-умолчанию текст абзаца выводится браузером довольно плотно. Читать такой текст не удобно. Чтобы немного «разрядить» обстановку, достаточно в правилах задасть свойство line-height. Например:
p {line-height: 1.5em;}
увеличит расстояние между строками ровно в полтора раза.
Парочка советов:
1. Как поступить, если нужно буквально одной строке или даже одному-двум словам в абзаце задать другое, отличное от основного текста, отображение? Можно пойти двумя путями. Один из них быстрый, другой правильный. Быстрый — это так называемый «местный стиль». Валидаторы его не уважают, но от этого он не перестает быть вполне рабочим. Выглядит это так:
<p>Лорем ипсум <span style="color: #f00;">красный папуас</span></p>
Здесь style="color: #f00;" является местным стилем. Местный стиль силен тем, что браузер считает его более важным, нежели все остальное, что прописано в листе стилей CSS. Иногда это довольно удобно.
Более правильный способ — это прописать для данного нейтрального тэга <span> дополнительный класс в листе стилей. Например:
.krasnyj {color: #f00;}
а непосредственно в абзаце внедрить это дело таким образом:
<p>Лорем ипсум <span class="krasnyj">красный папуас</span></p>
2. Не мешайте абзац с другими тэгами. Иногда можно увидеть довольно странную конструкцию вроде:
<p><ul><li></li></ul></p>
или наоборот:
<ul><li><p></p></li></ul>
Это все равно, что затащить в машину велосипед и пытаться там ездить на нем. Есть определенная иерархия тэгов. Некоторые могут быть вложены в другие. Например, тэг ссылки <a> можно вложить и в абзац и в список, а другие должны четко отделяться друг от друга.
Код — это красиво, а не как попало!
