Бесплатное в сети!
Age-Dragon.com
» » Параграф html

Параграф html

параграф html

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

Для отображения параграфа на html странице используют парный тег <p></p>, где между этими тегами прописывается определённая текстовая информация.

 

Пример:

<p>Это мой параграф html</p>

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

Одно из главных свойств - это отступы в css - обязательно прочитайте. Остальные параметры для параграфа мы разберём поочерёдно далее.

<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. Допустим вы хотите, чтобы текст в нём был по центру и он имел свой цветовой фон и нижнюю рамку.
Это делается так:

<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, применив для него дополнительные свойства.

<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;

Обязательно после такого параграфа необходимо отменить дальнейшее обтекание, иначе все последующие элементы будут находиться с левой стороны от этого параграфа.
Делается это очень просто!

<style>
.stop {
    margin: 0;
    padding: 0;
    line-height: 0;
    clear: right;
}
</style>

<p class="stop"></p>

То есть после параграфа с кнопкой нужно сразу прописать параграф с классом stop, который отменяет обтекание с правой стороны элемента.


Комментарии 0
Добавить комментарий