HTML & CSS - серия 3
Выравнивание текста в абзаце
На время забудем про style,
который мы использовали при оформлении текста, и вернёмся к "чистому"
HTML. Посмотрим, как можно выровнять текст в абзаце. Сразу же перечислим
все варианты, которых немного.
Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по ширине абзаца, т.е. как бы "подтягивается" к его краям: <р align="justify">. Добавим сюда ещё предложение для наглядности.
Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по правому краю: <р align="right">
Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по центру: <р align="center">
Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по левому краю: <р align="left">
В последнем случае align="left" можно было бы и не писать, поскольку выравнивание текста по левому краю производится по умолчанию.
Выровнять абзац по центру можно также с помощью парного тега <center>:
Получается такой же результат, что и в приведённом выше примере, но в данном случае используется конструкция <center><p>текст абзаца</p></center>
С помощью тега <center> можно также выравнивать по центру любые другие объекты, например, изображения:
URL_картинки (http://...) копируем из адресной строки браузера.
Отступы
Вы ещё не соскучились по style? Сейчас самое время его вспомнить.
В этом абзаце задана "красная строка",то есть отступ первой строки от левого края, который в данном случае равен 20px: <p style="text-indent:20px">текст абзаца</p>
Отступ может быть и отрицательным. В этом случае мы получим "висящую" строку. Однако, если просто написать text-indent:-20px, то мы "потеряем" часть текста:
В этом абзаце задано значение text-indent:-20px, и вот какое безобразие получилось.
Поступим несколько по-другому. Подвинем весь наш абзац на 20px вправо и снова зададим text-indent:-20px:
В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.
Используем отрицательный отступ и свойства шрифта для первой буквы, чтобы выделить начало нашего абзаца:
В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.
Возникает вопрос про padding (и margin),
которые необходимы при позиционировании текста и других объектов
(изображений, "встроенных" объектов, блочных элементов и т.д.) Но это -
достаточно большая тема, поэтому расскажу в другой раз. Сейчас только
замечу, что в нашем примере вместо padding:0 0 0 20px можно было бы написать padding-left:20px.
Источник Проксима
Комментариев нет:
Отправить комментарий