HTML & CSS - серия 3

Четверг, 02 Июня 2011 г. 06:59 + в цитатник

Выравнивание текста в абзаце

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

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега . В данном случае текст выравнивается по ширине абзаца, т.е. как бы "подтягивается" к его краям: <р align="justify">. Добавим сюда ещё предложение для наглядности.

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега . В данном случае текст выравнивается по правому краю: <р align="right">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега . В данном случае текст выравнивается по центру: <р align="center">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега . В данном случае текст выравнивается по левому краю: <р align="left">

В последнем случае align="left" можно было бы и не писать, поскольку выравнивание текста по левому краю производится по умолчанию.

Выровнять абзац по центру можно также с помощью парного тега <center>:

Получается такой же результат, что и в приведённом выше примере, но в данном случае используется конструкция <center>текст абзаца</center>

С помощью тега <center> можно также выравнивать по центру любые другие объекты, например, изображения:

<center><img src="URL_картинки"></center>

URL_картинки (http://...) копируем из адресной строки браузера.

Отступы

Вы ещё не соскучились по style? Сейчас самое время его вспомнить.

В этом абзаце задана "красная строка",то есть отступ первой строки от левого края, который в данном случае равен 20px: текст абзаца

Отступ может быть и отрицательным. В этом случае мы получим "висящую" строку. Однако, если просто написать text-indent:-20px, то мы "потеряем" часть текста:

В этом абзаце задано значение text-indent:-20px, и вот какое безобразие получилось.

Поступим несколько по-другому. Подвинем весь наш абзац на 20px вправо и снова зададим text-indent:-20px:

В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: текст абзаца.

Используем отрицательный отступ и свойства шрифта для первой буквы, чтобы выделить начало нашего абзаца:

Возникает вопрос про padding (и margin),
которые необходимы при позиционировании текста и других объектов
(изображений, "встроенных" объектов, блочных элементов и т.д.) Но это -
достаточно большая тема, поэтому расскажу в другой раз. Сейчас только
замечу, что в нашем примере вместо padding:0 0 0 20px можно было бы написать padding-left:20px.