HTML & CSS - серия 3 Серия 1 Серия 2
Выравнивание текста в абзаце На время забудем про 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> можно также выравнивать по центру любые другие объекты, например, изображения:  <center><img src="URL_картинки"></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.
Источник Проксима
|
|
В этом уроке мы поговорим о том, как быстро и просто перевести найденный в Интернете текст (или сайт) на другой язык.