Как спустить текст вниз?
Скрипт написан здесь Блок на css Я вставил туда ссылку и у меня щас пробелма. Я сделал этот блок высотой 50px и щас мне надо опустить на 16px. Я сделал margin-top: 16px; но не работает. (header — это тот самый стиль блока; txt-logo — стили текста)
Как мне опустить текст вниз?
Margin не сработал по причине того что тег a является inline он по умолчанию не может двигаться вверх или вниз ОТСТУПАМИ.
Отсюда можно сделать вывод, если хотим сделать отступ сверху нужно чтобы элемент перестал быть inline. Например так:
Так же мы можем позиционировать элемент относительно экрана/родителя/своего места в DOM. с помощью (пример позиционирования элемента относительно родителя, у родителя тоже должен быть position: relative):
Так же мы можем сдвинуть элемент с помощью трансформаций например(сдвинуть по Y Элемент относительно своего места в DOM):
Как сделать текст ниже в html
Начнём с самого простого, с основ.
Для начала откройте Блокнот (Пуск — Все программы – Стандартные — Блокнот).
Каждая веб-страничка имеет основные тэги (метки):
Теперь создадим нашу первую страничку:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Рада вас видеть! : )
</body>
</html>
В основном, тэги двойные, то есть открывающие : <html>, <body>, <title> и закрывающие: </html>, </body>, </title>. Не забывайте об этом. Но есть такие тэги, которые не требуют закрывающего тэга, например тэг <br>, с помощью которого можно перенести текст (или картинку) на другую строку. Вы можете писать тэги и большими буквами, например <HTML>, <BODY>, но в таком случае закрывающие тэги также пишите большими буквами: </HTML>, </BODY>
Итак, теперь сохраним нашу страничку. Для этого выбираем Файл – Сохранить как…, пишем имя нашей будущей странички по-английски или цифрами, ставим точку и html. После жмём ‘Сохранить’
Посмотрите что у вас получилось. Многие вместо текста могут увидеть непонятные закорючки. Чтобы вам не меня каждый раз кодировку, поставим загадочную строчку, которая определит нам кодировку и текст будет отображаться по-русски:
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
Это мета-тэг, потавьте его после открывающего тэга <head>. Подробно о мета-тэгах поговорим позже.
Итак, у нас всё прекрасно отображается. Теперь можно поменять цвет текста и цвет самой странички. Для этого в тэг <body> поставим соответствующие определения.
bgcolor=»#цвет» – определяет цветовой фон всей страницы
text=»#цвет» – определяет цвет текста
Цвет в HTML пишется шестизначными буквами и цифрами. На многих сайтах есть таблицы цветов, так же как и в различных графических программках. Приведу пару примеров цветов:
000000 – чёрный
FFFFFF – белый
FF0000 – красный
00FF00- зелёный
Писать цвет можно как большими, так и маленькими буквами.
Итак, я сделаю фон странички чёрным, а цвет текста красным:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
Рада вас видеть! : )
</body>
</html>
Если не вводить в тэг <body> дополнительные тэги, то страничка автоматически будет белого цвета, а текст чёрного.
Мы можем выделить любое слово (или несколько) каким-нибудь другим цветом. В этом нам поможет тэг <font></font>. Давайте слово ‘вас’ сделаем голубого цвета и добавим ещё одну строчку:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
Рада <font color='#78D2FF'>вас</font> видеть! : )
<br>
Приходите ещё
</body>
</html>
Я уже упоминала тэг <br>, с его помощью мы перенесли строчку. Если вы хотите опустить текст ниже, то поставьте несколько тэгов <br>
Давайте ещё немного поэкспериментируем с текстом. Текст можно выровнять по центру, по левому или правому краю. В этом нам поможет тэг <p>:
<p align=»center»>выравниваем по центру</p>
<p align=»left»>выравниваем по левому краю</p>
<p align=»right»> выравниваем по правому краю</p>
<p align=»justify»>выравниваем по обоим краям </p>
Если не вводить тэг <p></p>, то текст (или картинки) автоматически выравнивается по левому краю.
Выравнивание можно использовать и с другим тэгом, <div></div>:
<div align=»center»>выравниваем по центру</div>
<div align=»left»>выравниваем по левому краю</div>
<div align=»right»> выравниваем по правому краю</div>
<div align=»justify»>выравниваем по обоим краям </div>
Чтобы выровнять текст по центру, можно использовать тэг <center></center>. Но такое исключение есть только у данного тэга, остальные используются вместе с <p></p> или <div></div>
Давайте выровняем наш текст по центру:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
<div align=»center»>
Рада <font color='#78D2FF'>вас</font> видеть! : )
<br>
Приходите ещё
</div>
</body>
</html>
Текст можно сделать крупнее, меньше, жирнее, сделать его курсивом, подчеркнуть, зачеркнуть. Начнём с заголовков:
<h1>Ваш текст </h1>
<h2>Ваш текст </h2>
<h3>Ваш текст </h3>
<h4>Ваш текст </h4>
<h5>Ваш текст </h5>
<h6>Ваш текст </h6>
<h1> — самый крупный, <h6> — соответственно, самый мелкий. Данный тэг автоматически переносит на следующую строчку, это не всегда нам нужно. Например вы хотите выделить таким образов всего одно или несколько слов и перенос на следующую строчку нам вовсе не нужен. В этом случае нам поможет атрибут size, который используется вместе с тэгом <font>:
<font size=»+4″>Ваш текст </font>
<font size=»+3″>Ваш текст </font>
<font size=»+2″>Ваш текст </font>
<font size=»+1″>Ваш текст </font>
<font size=»+0″>Ваш текст </font>
<font size=»-1″>Ваш текст </font>
<font size=»-2″>Ваш текст </font>
size=»+4″ – самый крупный, size=»-2″ – соответственно, самый мелкий.
Как ещё можно изменить текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<tt> моноширинный шрифт </tt> (как у пишущей машинки)
<u> Подчеркнутый текст </u>
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
<small>маленький шрифт относительно основного текста</small>
<big>Большой шрифт относительно основного текста </big>
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
Верхний и нижний индексы пригодятся при написании химической формулы или математического уравнения.
К тексту (или одному слову, предложению, абзацу) можно применить сразу несколько тэгов. Например:
Применим новые тэги на практике. Я сделаю строчку ‘Рада вас видеть’ крупнее и подчеркну, а фразу ‘Приходите ещё’ курсивом:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
<div align=»center»>
<font size=»+3″><u>Рада <font color='#78D2FF'>вас</font> видеть! : )</u></font>
<br>
<i>Приходите ещё</i>
</div>
</body>
</html>
Чтобы лучше усвоить урок, поэкспериментируйте со своим текстом.
С помощью атрибута face мы сможет задать тип шрифта нашему тексту.
Есть стандартные типы шрифтов, которые присутствуют на компьютере каждого:
Times
Times New Roman
Arial
Helvetica
Courier
Verdana
Tahoma
Cosmic Sans
Garamond
<font face=»Tahoma»>Ваш текст</font>
Можно указать сразу несколько типов шрифтов. Если у посетителя вашей веб-странички не окажется одного шрифта, копьютер автоматически определит и отобразит другой указанный шрифт. Пример:
<font face=» Tahoma, Arial, Helvetica»> Ваш текст</font>
Вы можете скачать шрифты и с Интернета, но при создании своей виртуальной странички не забывайте, что не у всех могут быть ваши скаченные декоративные шрифты.
HTML абзацы
Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.
Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.
Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p>, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).
Не забывайте про закрывающий тег
Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.
Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.
Красная строка
Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.
Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.
Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:
В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.
Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).
Перенос строки
В ходе создания HTML-документа может возникнуть необходимость переноса строки внутри абзаца: например, при размещении отрывка из стихотворения каждая фраза должна начинаться с новой строки.
Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк, в этом случае браузер отобразит отрывок стихотворения в виде одного предложения:
В таких случаях самым лучшим выходом из ситуации будет использование тега <br> (вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег <br>. Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать <br></br>, а разве это было бы удобнее?!
Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.
Для переноса текста на несколько строк тег <br> ставится соответствующее количество раз.
« перейти к предыдущей теме перейти к следующей теме »
Рекомендованный способ в CSS и HTML
Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS. Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML <head></head>.
Следующий код создает CSS-класс «tab», который отодвигает символы и абзац на 40 пикселей от левого края:
Вставив приведенный выше код в раздел <head>, можно выполнить его в любом месте, добавляя его в теги абзаца (<p>), как показано ниже:
Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML, добавьте следующую строчку между тегами <head> и создайте ссылку на файл. Мы назвали его «basic.css«:
Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега <style> и меток комментирования, как показано ниже:
Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый <p показанный выше.
Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:
Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.
Бонусная подсказка как сделать отступ в HTML: Чтобы поменять отступ слева на отступ справа, измените свойство margin-left на margin-right.
Рекомендованный метод в HTML
Можно достичь тех же результатов используя стиль, встроенный в HTML- код. Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:
Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги <p> не смещены.
А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.
Подсказка: можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.
Бонусная подсказка: Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.
Альтернативный метод
Другой часто применяемый метод HTML отступа текста — с помощью <blockquote>, как показано ниже.
Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:
Перевод статьи “How do I indent or tab text on my web page or in HTML?” был подготовлен дружной командой проекта Сайтостроение от А до Я.
Красная строка html может устанавливаться 4 различными способами. Хотя при этом определенных стандартов для этого явления данный язык программирования не предусматривает, поэтому нет никаких ограничений в этом плане. В этой статье мы будем использовать не совсем стандартный набор средств для создания красной строки.
1-й способ
Начать стоит с самого распространенного способа. Только в этом случае необходимо использовать каскадные таблицы, ведь CSS неразрывно связан с языком гипертекстовой разметки. Красная строка html может устанавливаться при помощи свойства «text-indent». Достаточно указать нужный элемент и расстояние, которое будет использовано для отступа с левой стороны документа. Например, запись: «p
- Любая общепринятая единица измерения, например px (пиксели), in (дюймы), pt (пункты) и другие.
- Процентное значение. В данном случае учитывается расстояние от родительского элемента.
- Inherit. При указании данного значения свойство будет наследоваться у родительского элемента.
2-й способ
В html красная строка может устанавливаться без подключения каскадных таблиц. Достаточно поставить перед первым символом в исходном коде страницы несколько пробелов. Только использовать нужно специальные символы, а именно « », ведь если ставить обычный пробел, то учитываться будет только один. А с использованием данного символа можно установить необходимый отступ. Такая красная строка HTML не будет иметь глобального применения, и вам придется ставить все пробелы вручную. Этот минус сильно нагрузит вас при работе с большим количеством документов. Также этот способ будет провозглашать ваш код страницы невалидным.
3-й способ
Использовать нижнее подчеркивание, маскированное под фон. В этом способе можно применять любой символ. Самое главное — изменить цвет шрифта этого фрагмента текста на совпадающий с фоном. Пускай данный способ не самый рациональный, но зато эффективность 100%. Итак еще раз повторим:
- В самом начале строки нужно вставить несколько повторяющихся символов, например: ___.
- Далее необходимо поменять цвет шрифта этих символов на совпадающий с фоном.
- Назначать замену краски можно всеми известными способами, например, с использованием CSS-стилей или средств HTML.
- Данный способ не подходит, если в качестве фона выбрано изображение, так как наши символы будут выделяться.
- Стоит заметить, что при выделении фрагмента текста пользователем будет видна поддельная красная строка html.
4-й способ
Красная строка в html может устанавливаться самыми разнообразными методами. Если ни один из вышеперечисленных способов не подходит, предлагаем вам использовать пустое изображение. Прозрачные картинки можно создавать форматом png или gif (только они обладают такой возможностью) либо взять изображение jpeg и залить его цветом фона. Далее нужно просто вставить картинку с использованием тега <img>.
Заключение
В качестве вывода можно сказать, что html совместно с CSS позволяет делать самые разнообразные эффекты. Иногда свойства и элементы используются не по прямому назначению, но не стоит слишком отходить от стандартного значения тегов.
Теги заголовков
Превращают обычный текст в заголовок определённого уровня. Тег <h1> создаёт заголовок первого уровня — самый большой и главный (обычно название статьи на странице), <h6> отвечает за заголовок шестого уровня — самый маленький и незаметный. Эти теги важны как для пользователей, так и для поисковиков — заголовки с подзаголовками любят и те, и другие. Иерархию уровней необходимо соблюдать, то есть за <h1> должен идти <h2>, и никак не наоборот.
Чтобы понять, как это работает, впишите в html-файл следующий код:
Выглядеть в браузере это будет вот так:
Теги оформления основного текста
Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.
Жирный шрифт
Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова.
Отвечают за жирное начертание теги <strong> и <b>.
Верхний и нижний индексы
Могут использоваться в формулах, уравнениях, обозначении некоторых величин.
За создание нижних индексов отвечает тег <sub>, для верхних используется тег <sup>.
Уменьшение размера
Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег <small>
Подчёркивание
Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.
Зачёркивание
Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег <del>.
Курсив
Нужен, чтобы акцентировать на тексте внимание, и может создаваться тегом <i> или <em>.
Ввод компьютерного текста
Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.
В контейнер <code> заключается код программы, при этом её переменные выделяются тегом <var>, а результат выполнения — <samp>. Контейнер <kbd> содержит текст, который при работе с программой должен с клавиатуры вводить пользователь, а всё, что заключено в теги <pre>, сохраняет исходный формат, включая лишние пробелы и переносы строк.
Цитаты и определения
Программный код будет выглядеть <code> таким образом </code>, переменные обозначаются так: <var>a, b, c</var>, вот <samp>результат выполнения программы<samp>, а это – <kbd>введённый пользователем текст</kbd>. Сохранение исходного форматирования <pre> отображается примерно так </pre>.
Общий пример
Чтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.
Браузер интерпретирует этот код так:
Теги группировки
Нужны, чтобы текст не шёл одной сплошной строкой, а был разбит на логические составляющие.
- Внутри тегов <p></p> заключается абзац.
- Тег <br> осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).
- <hr> позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width, size, color, align и noshade задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.
Добрый день уважаемые читатели. Сегодня короткая заметка о том как сделать красную строку для каждого абзаца на html — странице. Если кто не знает, то красная строка это отступ первой строки в блоке текста. Такой отступ в абзацах можно встретить практически в любом печатном тексте, но при создании веб-сайтов оформление красной строки встречается довольно редко, несмотря на то, что она позволяет гораздо удобнее воспринимать текст. На случай если вдруг заказчик потребует, чтобы абзацы на его сайте начинались с красной строки, то привожу для вас простой рецепт решения этой задачи.
Решить задачу можно многими способами, например можно в начале каждого абзаца вставлять подряд несколько специальных символов , но это может занять достаточно большое количество времени. Поэтому я рекомендую для создания красной строки использовать свойство CSS <strong>text-indent</strong> , которое задает отступ первой строки блока текста. При этом никакого воздействия на остальные строки не производиться.
Свойство text-indent имеет простой синтаксис:
text-indent: <значение> | <проценты> | inherit
В качестве значений можно указывать пиксели (px), пункты (pt) другие единицы принятые в CSS. Значение определяет на сколько сдвинуть текст первой строки в право от исходного положения. Допустимо указывать отрицательные значения, тогда текст сдвинется влево. При указании процентных значений, отступ первой строки вычисляется в зависимости от ширины блока текста.
Теперь к примерам. Для разделения абзацев в html обычно используют тег <p> . Тогда, чтобы в каждый абзац на странице начинался с красной строки достаточно добавить код css:
<style>
p <
text-indent: 25px; /* Отступ первой строки в пикселах */
>
</style>
<html>
<head>
<meta charset=»utf-8″>
<title>Красная строка</title>
<style>
p <
text-indent: 25px; /* Отступ первой строки в пикселах */
>
</style>
</head>
<body>
<p>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.
</p>
<p>
Этот дуб как будто говорил: «Весна, и любовь, и счастье! И как не надоест вам все один и тот же глупый, бессмысленный обман! Все одно и то же, и все обман! Нет ни весны, ни солнца, ни счастья. Вон смотрите, сидят задавленные мертвые ели, всегда одинокие, и вон я растопырил свои обломанные, ободранные пальцы, выросшие из спины, из боков — где попало. Как выросли — так и стою, и не верю вашим надеждам и обманам».
</p>
<p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>
</body>
</html>
Посмотреть в браузере
Если красную строку необходимо добавить только в один абзац, то можно сделать так:
<p style=»text-indent: 5%»>На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.</p>
На краю дороги стоял дуб. Он был, вероятно, в десять раз старше берез, составлявших лес, в десять раз толще и в два раза выше каждой березы. Это был огромный, в два обхвата дуб, с обломанными суками и корой, заросшей старыми болячками. С огромными, неуклюже, несимметрично растопыренными корявыми руками и пальцами, он старым, сердитым и презрительным уродом стоял между улыбающимися березами. Только он один не хотел подчиниться обаянию весны и не хотел видеть ни весны, ни солнца.
Либо к абзацам, которые должны начинаться с красной строки добавляем атрибут class и добавляем нужный стиль:
<style>
p.indent <
text-indent: 25px;
>
</style>
<p /> Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
</p>
Князь Андрей несколько раз оглянулся на этот дуб, проезжая по лесу. Цветы и трава были и под дубом, но он все так же, хмурый, неподвижный, уродливый и упорный, стоял посреди них.
Теперь вы запросто сможете сделать красную строку на своих html страницах. До новых встреч!
Абзацы в HTML
Применение абзацев необходимо для того, чтобы выдерживать без изменения уникальную структуру текста, создаваемую автором. Так, на части делятся книги и журналы, газеты и разделы в колонках. Структурирование текстов по фрагментов в HTML делается при помощи абзацев — чтобы была понятная логическая структура, удобная для восприятия, да еще и отображалась во всех браузерах корректно.
Блоки текста в HTML разделяются между собой при помощи тегов абзаца <p></p>. По вертикали между абзацами появляется небольшой отступ или отбивка.
Как разделить текст абзацами? Пример:
Первый абзац, помещенный в теги p
Второй абзац, помещенный в теги p
То есть абзац начинается с тега <p> и заканчивается закрывающим его тегом </p>. При этом между различными смысловыми блоками в цельном тексте создаются паузы (до абзаца и после него появляются пустые строки, отступы), повышая читабельность текста, улучшая компоновку и внешний вид длинных и сложных текстов.
Если между вашими абзацами получаются слишком большие отступы (пустые строки), не вздумайте использовать тег <br> для их уменьшения, лучше обратите внимание на файл style.css, в котором прописаны параметры отступов между абзацами. Тег <br> используется для переноса строки — это совсем другое и не следует использовать его для создания абзацев. Что такое перенос строки и зачем он нужен, читайте тут.
Что вы найдете в файле style.css? Вы найдете параметры отступов, стили margin и padding (надеюсь вы знаете о разнице между этими свойствами) применяемые к абзацу и задающие для него отступы, в том числе сверху и снизу. Найдя эти стили, вы сможете их изменить, увеличив или уменьшив отступы между абзацами.
Атрибуты тега абзаца в HTML
По умолчанию браузеры выравнивают все абзацы по левому краю, ведь читаем мы слева направо. Но, используя, атрибут align, можно выровнять абзац по правому краю, по центру или по ширине. Пример:
Выравниваем абзац по левому краю.
Выравниваем абзац по правому краю.
Выравниваем абзац по центру.
Выравниваем абзац по ширине.
Бонус — красная строка и отступы в абзаце
Для удобства восприятия письменного текста в школе нас заставляли делать на первой строке абзаца «красную строку» — небольшой отступ слева от линии основного текста.
В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:
Обратите внимание, что я делаю это для примера и поэтому применил свойство в HTML, а не в файле CSS (что такое CSS и зачем он нужен?). Если вы хотите отредактировать подобным образом все абзацы на вашем сайте, добавив красную строку, нужно внести изменения в файл style.css.
Либо добавьте в HTML-код страницы код (можно задавать размер отступа в px, либо в %):
Ну вот и все что нужно вам знать по этой теме. А в следующих статьях я расскажу вам о тегах <NOBR> и <BR>, которые применяются в особых случаях.
Отступ текста в HTML при помощи margin
Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.
Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.
Делается это так:
Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.
При помощи этого свойства мы можем задать разные отступы тексту в HTML:
- margin-left — расстояние слева
- margin-right — расстояние справа
- margin-top — расстояние сверху
- margin-bottom — расстояние снизу
Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:
- margin: 10px; — делаем отступ текста 10px со всех сторон
- margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
- margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px
Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.
Отступ текста в HTML при помощи padding
Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.
Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:
С его помощью так же можно задать разные отступы текста в HTML:
- padding-left — слева
- padding-right — справа
- padding-top — сверху
- padding-bottom — расстояние снизу
- padding: 25px; — отступ со всех сторон.
Отступ текста html при помощи неразрывного пробела
Сразу скажу что я этот способ не люблю и не рекомендую, но иногда он может понадобится. Суть его заключается в том что в HTML есть специальный тег, который позволяет добавлять неразрывный пробел
- Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько вы можете увеличить расстояние между словами.
- Если поставить между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько (каждый с новой строки) можно увеличить это расстояние.
Отступ текста в HTML при помощи text-indent
Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent
Что делать если отступ не появляются?
Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»
Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.
Свойства текста в HTML
В HTML у текста есть несколько свойств. Когда эти свойства изменяются, меняется и вид текста на сайте. Например, тут мы уже говорили о том, как изменить цвет текста в HTML.
Выравнивание
Для выравнивания текста предназначено CSS свойство text-align . С его помощью можно выравнивать текст:
- left — по левому краю (вариант по умолчанию)
- right — по правому краю
- center — по центру
- justify — растягивать на всю ширину элемента
На практике все варианты используются так:
Украшение (decoration)
Текст можно украсить или сделать акцент на какой-то его части, например, с помощью подчеркивания. В CSS за это отвечает свойство text-decoration :
Также можно задать форму или цвет линии, дополнительно к ее типу. Рассмотрим на примере underline :
Форму и цвет линии также можно задать отдельными свойствами — text-decoration-style и text-decoration-color :
Отступ первой строки
У параграфа или абзаца надо добавлять отступ первой строки. Например, когда пишем статью или книгу. В CSS для этого служить свойство text-indent :
Если задать отступ в процентах, то высчитываться он будет относительно ширины HTML элемента.
Трансформация текста
С помощью свойства text-transform можно управлять размером (регистром) букв. Всего может быть четыре значения:
- none — без изменений
- capitalize — все слова с большой буквы
- uppercase — все в верхнем регистре
- lowercase — все в нижнем регистре
Расстояние между символами
Для того, чтобы установить расстояние между символами, используется свойство letter-spacing .
Значение по умолчанию — normal. В таком случае браузер все сам сделает за тебя и в зависимости от самого шрифта и его размера задаст расстояние между символами.
Если ты хочешь все контролировать сам, то можешь явно указать количество пикселей между символами:
Расстояние между символами можно сделать отрицательным. В большинстве случаев это сделает текст нечитаемым:
Расстояние между словами
Точно так же, как задается расстояние между символами, можно задать и расстояние между словами. Отличие будет только в имени свойства — word-spacing . Все остальные правила сохраняются:
ВАЖНО! Если мы уже добавили свойство text-align: justify , то расстояние между словами будет определяться браузером, но будет не меньше, чем значение word-spacing :