В случае HTML-документов теги работают больше на разметку контента, чем на указание того, как он должен быть представлен. Больший контроль над представлением достигается с помощью стилей. В этой статье я рассмотрю те стили, которые связаны с форматированием абзаца в HTML .
Тег
В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .
Выравнивание абзацаМожно выровнять абзац, используя атрибут align со следующими значениями:
text-align: left|right|center|justify|initial|inherit;
Скопируйте следующий код в файл .html .
Выравнивание абзаца с помощью атрибута Style
Этот абзац выровнен по центру
Этот абзац выровнен по правому краю
Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.
В окне браузера HTML код абзаца выглядит следующим образом.
Интервалы между строкамиВы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:
line-height: normal|number|length|initial|inherit;
Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:
Установка междустрочного интервала с помощью атрибута Style
В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.
Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.
: Устанавливает межстрочный интервал 13 пикселей;
: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;
: Устанавливает высоту строки 14 пикселей.
ОтступыЯ использовал термин »отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.
Ниже приводится пример абзацев с отступом слева и справа:
Отступы абзацев с помощью атрибута Style
Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.
Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.
А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.
Отступы между абзацами (отступ перед и отступ после абзаца)В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента
Padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега
Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:
Отступы между абзацами с помощью атрибута Style
Для этого абзаца не заданы отступы до или после. Это обычный абзац, выровненный по ширине. Как вы уже знаете, мы можем выровнять абзац по ширине с помощью кода style=”text-align:justify” внутри тега.
Этот абзац выронен по ширине. Он также имеет отступ в 10 пикселей перед абзацем и 50 пикселей после. Внутри тега я задал 3 стиля.
Это обычный абзац без отступов и с выравниванием по умолчанию.
Что следует помнить;
Данная публикация представляет собой перевод статьи «HTML Paragraph Formatting » , подготовленной дружной командой проекта
Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.
Все теги форматирования можно разделить на три группы:
1. Теги заголовков (h1-h6 ).
2. Теги оформления основного текста ( , , , , и т. д.).
3. Теги группировки (
,
,
)
Превращают обычный текст в заголовок определённого уровня. Тег создаёт заголовок первого уровня - самый большой и главный (обычно название статьи на странице), отвечает за заголовок шестого уровня - самый маленький и незаметный. Эти теги важны как для пользователей, так и для поисковиков - заголовки с подзаголовками любят и те, и другие. Иерархию уровней необходимо соблюдать, то есть за должен идти , и никак не наоборот.
Чтобы понять, как это работает, впишите в html-файл следующий код:
Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня Заголовок четвёртого уровня Заголовок пятого уровня Заголовок шестого уровня
Выглядеть в браузере это будет вот так:
Теги оформления основного текстаПозволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.
Жирный шрифтНужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова.
Отвечают за жирное начертание теги и .
Верхний и нижний индексыМогут использоваться в формулах, уравнениях, обозначении некоторых величин.
За создание нижних индексов отвечает тег , для верхних используется тег .
X1=32 м2
Уменьшение размераЕсли нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег
Обычный текст. Уменьшенный текст.
ПодчёркиваниеЭтот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.
Обычный текст. Подчёркнутый текст.
ЗачёркиваниеЗачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег .
КурсивНужен, чтобы акцентировать на тексте внимание, и может создаваться тегом или .
Ввод компьютерного текстаБывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.
В контейнер заключается код программы, при этом её переменные выделяются тегом , а результат выполнения - . Контейнер содержит текст, который при работе с программой должен с клавиатуры вводить пользователь, а всё, что заключено в теги , сохраняет исходный формат, включая лишние пробелы и переносы строк.
таким образом a, b, c, вот результат выполнения программы , а это – введённый пользователем текст отображается примерно так.
Цитаты и определенияПрограммный код будет выглядеть таким образом , переменные обозначаются так: a, b, c , вот результат выполнения программы , а это – введённый пользователем текст . Сохранение исходного форматирования отображается примерно так .
Цитата в теге blockquote.Цитата внутри контейнера cite.Короткая цитата с тегом q.Выделенное определение.Аббревиатура (НПО, ИП).
Общий примерЧтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.
Жирный текст можно сделать тегами strong и b. За курсив отвечают em и i.
Теги sub и sup используются для создания нижних (x1…xn) и верхних (42=16) индексов. Del зачёркивает, ins - подчёркивает.
Теги code, kbd, var и samp используются редко и нужны для отображения листинга программ
abbr нужен для обозначения аббревиатур (HTML). Теги blockquote, cite и q используются для оформления цитат (Уж небо осенью дышало)
Тег pre сохраняет изначальное форматирование текста, не удаляя пробелы и переносы строк.Браузер интерпретирует этот код так:
Теги группировкиНужны, чтобы текст не шёл одной сплошной строкой, а был разбит на логические составляющие.
Первый абзац
Второй абзац
Строка над линией. Строка под линией.
Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.
Абзац 1
Абзац 2
Каждый абзац начинается с тега
И заканчивается необязательным закрывающим тегом
.В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.
В примере 7.1 показано применение абзацев для создания отступов между строками.
Пример 7.1. Использование абзацев
Применение абзацев
В одних краях ещё февраль, в других - уже апрель.
Проходит время, вечный счёт: год за год, век за век...
Во всём - его неспешный ход, его кромешный бег.
В году на радость и печаль по двадцать пять недель.
Мне двадцать пять недель февраль, и двадцать пять - апрель.
По двадцать пять недель в туман уходит счёт векам.
Летит мой звонкий балаган куда-то к облакам.
М. Щербаков
Результат данного примера показан на рис. 7.1.
Рис. 7.1. Отступы на веб-странице при использовании абзацев
Как видно из рисунка, при использовании тега
Между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег
. В отличие от абзаца, тег переноса строки
не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.
Так, текст примера 7.1 с учетом переноса строк будет преобразован следующим образом (пример 7.2).
Пример 7.2. Тег
Переносы в тексте
В одних садах цветёт миндаль, в других метёт метель.
В одних краях ещё февраль, в других - уже апрель.
Проходит время, вечный счёт: год за год, век за век...
Во всём - его неспешный ход, его кромешный бег.
В году на радость и печаль по двадцать пять недель.
Мне двадцать пять недель февраль, и двадцать пять - апрель.
По двадцать пять недель в туман уходит счёт векам.
Летит мой звонкий балаган куда-то к облакам.
М. Щербаков
Результат примера продемонстрирован на рис. 7.2. Видно, что расстояние между строками текста уменьшилось и он приобрел более компактный вид.
Здравствуйте! Продолжим рассматривать основы программирования сайтов. Трудно представить хоть один из них, в коде которого не встречался бы тег абзаца. Сегодня рассмотрим, как его правильно прописывать и описание нескольких дополнительных действий с текстом.
ПримерДавайте на примере посмотрим, как сделать абзац в HTML коде.
Одно или несколько предложений.
Обязательным условием является наличие открывающего и закрывающего тега. Кстати, всё можно делать непосредственно в блокноте, просто потом нужно будет сохранить файл в соответствующем формате.
ФорматированиеДовольно часто подмечаю, что люди интересуются, как можно сделать красную строку. Для конкретного абзаца делается очень просто.
Включение таких параметров приведет к отступу первой строки на 15 пикселей от левого края. Если такие изменения следует применить для всех тегов P, то в файле CSS, который подключается к страницам сайта, можно прописать код, показанный ниже.
Лично я обычно не делаю красные строки при редактировании кода в блокноте или другом редакторе.
Я просто включаю отступы между текстовыми блоками. Для этого в CSS нужно прописать специальные параметры.
p{margin-bottom:25px;}
Если использовать данную конструкцию, то после каждого абзаца появится отступ в 25 пикселей.
На самом деле параметров для работы с HTML и различными стилями очень много. Я описал лишь некоторые из них, одной статьей все охватить весьма затруднительно.
Хотите узнать больше? Возможно, окажутся полезными мои прошлые публикации на следующие темы:
На этом статью буду завершать и, думаю, теперь сделать абзацы в HTML и красиво их оформить при помощи специальных тегов будет не сложно.
Желаю вам огромных успехов в освоение программирования. Кстати, не задумывались о заработке на информационных некоммерческих сайтах? Просто шикарную информацию предоставил специального для своих читателей в .
Нормальная работа и финансы в сети являются ключевыми темами этого блога. С отдельными перспективами в сети можете ознакомиться прямо сейчас из опубликованных материалов. Я продолжаю подготовку и публикацию нового, а главное реально полезного контента. Подписывайтесь на обновления Workip на свою электронную почту. До связи.
Читая какую-нибудь книгу, газету, журнал да и вообще любой нормальный текст, Вы встречали множество абзацов, причём первая строка каждого из них содержит небольшой отступ. В этой статье я покажу наилучший вариант задания отступов у абзаца через CSS .
Безусловно, любое количество пробелов можно вставить с помощью , тем самым, подобрав необходимый отступ, но, наверняка, Вы понимаете, что данный способ, мягко говоря, неудобный. А решение этой задачи очень простое.
Вы уже должны знать, что в HTML абзац создаётся с помощью тега . Таким образом, каждый абзац должен быть в своём теге . А для создания отступов первой строки каждого абзаца достаточно подключить такой CSS-код :
P {
text-indent: 10px;
}
В данном примере мы сделали отступ в 10 пикселей . Вы можете поиграться с этим значением, чтобы подобрать оптимальный для своего сайта.
Вот таким простым способом Вы можете задать отступ у первых строк любого абзаца в тексте на сайте.
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Комментарии (9 ):31.05.2013 13:10:03
Здравствуйте Михаил, помогите решить проблему со следующим css-кодом: .bam { border: 1px solid black; border-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%; } .bam .author { background-color: White; border-bottom: 1px solid black; border-top-right-radius: 8px; border-top-left-radius: 8px; font-weight: bold; padding:4px; } .bam .text { background-color: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; } Необходимо, чтобы внутри ".bam .text" переносился текст на другую строчку, если он не умещается на одной строке. Но почему-то он не переносится, а вылезает за пределы блока. Помогите решить эту проблему.
Ответить
06.06.2013 22:42:20
Здравствуйте Михаил, вы случайно не знаете, как найти выход из следующей ситуации: есть блок, а внутри него еще один блок, и в этот блок, что внутри записывается текст (длина текста заранее не известна). Так вот, как сделать так, чтобы высота блока-родителя зависела от высоты блока внутри него (с текстом)? А то у меня почему-то получается что высота блока-родителя меньше чем высота внутреннего.
Ответить
Admin 06.06.2013 23:32:40
Все внешние блоки растягиваются по в зависимости от размеров внутренних блоков. Это не надо делать, это уже по умолчанию должно быть.
Ответить
07.06.2013 11:11:09
а вы посмотрите: http://progbase.ru/about.php
Ответить
Admin 07.06.2013 21:54:37
Надо использовать - поставьте данный блок в разные места и смотрите, что меняется. Как только всё станет в порядке, там его и оставьте.
Ответить
13.09.2013 21:39:34
Здравствуйте! Помогите, пожалуйста,в окне этой подсказки при наведении сделать отступы,да и другие стили текста.Чуть-чуть что-то не получается и все.Спасибо заранее. .podskazka{ background-color: #FF6600; padding:0px; border:3px solid #66FFFF; position:absolute; margin: 3px; width: 200px; min-height: 50px; max-height: auto; white-space: normal; border-bottom: 1px dashed #000080; } function podskazka() { this.show = function(text,x,y) { var div = document.createElement("div"); div.className = "podskazka"; div.id = "metka"; div.innerHTML = text; var koordx = x + 0; var koordy = y + 20; div.style.left = koordx + "px"; div.style.top = koordy + "px"; document.body.appendChild(div); } this.hide = function() { var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); } } var vsplil = new podskazka(); подсказка Подсказка и далее по тексту