Содержание страницы
домикГлавная / Элементы html и css / Параграф html
параграф htmlПараграф в html так же как и в книге имеет определённый текстовый смысл и для удобного понимания и чтения разделяется неким горизонтальным отступом.

Для отображения параграфа на html странице используют парный тег <p></p>, где между этими тегами прописывается определённая текстовая информация.
Бери-Дари — это лучший сервис по доставке цветов по Киеву и Киевской области недорого.. Created with Avocode. Бери-Дари Цветы — Доставка цветов №1. На протяжении 5 лет нашей работы, мы постоянно стремимся узнать что-то новое и быть в тренде.

Пример прописания параграфа html.

htmlCOPY
<p>Это мой параграф html</p>
По сравнению с книгой, параграф в html можно отобразить на своей web-страничке в различном оформление. Для этого необходимо для тега <p> в CSS прописать стандартные ( часто используемые ) свойства.

Одно из главных свойств - это отступы в css - обязательно прочитайте. Остальные параметры для параграфа мы разберём поочерёдно далее.
cssCOPY
<style> p { color: #333; font-size: 16px; font-weight: bold; font-style: italic; text-align: center; background-color: #fff; } </style>

Пояснение параметров для параграфа.

  • color - это цвет текста в шестнадцатеричном коде;
  • font-size - это размер текста в px;
  • font-weight - это отображение полужирного текста ( для отображения нормального начертания прописывать данный параметр не нужно, - оно по умолчанию );
  • font-style - это отображение наклонного текста ( для отображения обычного текста данное свойство просто не прописывается, оно стоит по умолчанию );
  • text-align - это расположение текста ( по умолчанию left - с левой стороны, center - по центру, right - с правой, justify - на всю ширину параграфа );
  • background-color - это фон в шестнадцатеричном коде ( используется редко ).
Чтобы один параграф на html странице отличался от всех остальных необходимо этому параграфу задать свой class.

Допустим вы хотите, чтобы текст в нём был по центру и он имел свой цветовой фон и нижнюю рамку.
Это делается так:
html и cssCOPY
<style> .my-class { margin: 20px 0; background-color: #e2e2f8; color: red; font-size: 14px; text-align: center; font-weight: bold; font-style: italic; padding: 20px; border-bottom: 4px solid #968eea; } </style> <p class="my-class">Это мой параграф html</p>

Результат отображения параграфа.

Это пример параграфа со своим классом, имеет свой фон. Текст в параграфе полужирный, наклонный, красного цвета и распроложен он строго по центру. Параграф имеет так же нижнюю рамку в 4px.

CLASS задаётся абсолютно любой, но только латинскими буквами.

Из параграфа html можно легко так же сделать кнопку css, применив для него дополнительные свойства.
html и cssCOPY
<style> .my-class2 { margin: 12px auto 0; text-align: center; background-color: red; width: 144px; padding: 10px 0; box-shadow: 0 0 20px #000 inset, 0 2px 4px #4C4C4C; cursor: pointer; transition: all ease 0.3s; } .my-class2 a { color: #fff; font-size: 18px; font-weight: bold; text-decoration: none; } .my-class2:hover { background-color: #000; box-shadow: 0 0 20px #fff inset, 0 2px 4px #393939; } </style> <p class="my-class2"><a href="/">Подробно</a></p>

Отображение параграфа по центру.

Подробно

Для того, чтобы данный параграф в виде кнопки занял место в левой части контента, достаточно убрать auto из margin, прописав допустим для него такое значение: 12px 0;.

А вот чтобы данный элемент отобразился в правой части, нужно добавить ещё одно свойство со значением:
float: right;

Обязательно после такого параграфа необходимо отменить дальнейшее обтекание, иначе все последующие элементы будут находиться с левой стороны от этого параграфа.
Делается это очень просто!
html и cssCOPY
<style> .stop { margin: 0; padding: 0; line-height: 0; clear: right; } </style> <p class="stop"></p>
То есть после параграфа с кнопкой нужно сразу прописать параграф с классом stop, который отменяет обтекание с правой стороны элемента.
Дата публикации: 03.03.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!