Линии CSS и их применение в блоге.

Доброго времени суток, друзья. Когда требуется не просто выделить текст, а отделить один текстовый блок от другого и разделить их на разные части, можно использовать линии и отступы. Поэтому сегодня небольшая шпаргалка про линии на CSS. Рассмотрим варианты применения их для оформления текста сообщения.

Используя стили можно расположить линию в нужном месте, задать её ширину и цвет. Просто возьмём старый добрый тег <hr> и начнём вырисовывать наши линии.

Всё это создаётся в режиме HTML в редакторе сообщения в нужном месте.

Такой пример. Можно поменять center на left или right, ширину линии и её цвет, соответственно.

<hr align="center" width="300" color="Red" />

линия посередине

---

Вот некоторые стили линий -

none( линия не отображается),  dotted (точечная линия), dashed (пунктирная линия), double (двойная линия), ridge (рельефная линия), solid (сплошная линия).

Для создания линии с одной стороны элемента, используются свойства border-bottom, border-top, border-left и border-right, они соответственно задают линию снизу, сверху, слева и справа.


Если нужно выделить участок текста цветной линией, зададим ей класс hr и определимся с цветом и толщиной линии используя стили.

<style>
   hr {
    border: none; /* Убираем границу */
    background-color: red; /* Цвет линии */
    color: red; /* Цвет линии для IE6-7 */
    height: 2px; /* Толщина линии */
   }

  </style>
<div class="hr">
   Ваш текст
  </div>

Пример.

---

ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст

ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст ваш текст

---

Свойство border-left позволяет одновременно установить толщину, стиль и цвет левой границы.

Так можно выделить определённый фрагмент текста.

<style>
   .hr1 {
    border-left: 3px double red; /* Линия слева от текста */
    padding-left: 10px; /* Расстояние между линией и текстом */
    margin-left: 10px; /* Расстояние от левого края до линии */
   }
  </style>

<div class="hr1">
   Ваш текст
  </div>
Пример.

Ваш текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Попробуйте поиграться со стилями линии. Можно добавить свойство  background-color: #f3f5f6. чтобы ещё выделить фоном этот участок.

Линия с двух сторон участка текста.

<style>
   .hr2{
    border-left: 1px solid red; /* Линия слева от текста */
    border-right: 1px solid red; /* Линия справа от текста */
    padding: 0 10px;  /* Расстояние между линией и текстом */
    margin: 0 10%; /* Отступы от края до линии */
   }
  </style>
<div class="hr2">
   Ваш текст
  </div>

Пример.

Ваш текст текст текст текст текст Ваш текст текст текст текст текстВаш текст текст

текст текст текст Ваш текст текст текст текст текст Ваш текст текст текст текст текст

Текст между линиями.

<center>
<div style="border-bottom: 2px solid red; height: 20px; text-align: center; width: 80%;">
<span style="background-color: #f3f5f6; color: #cc0000; font-size: 40px; padding: 0 10px;">
       Название
      </span>
    </div>
</center>
</div>

Пример

Название

Всё достаточно просто. Применение линий с помощью CSS украсит любое сообщение и не займёт много времени при его оформлении.

Как сделать разделители между постами, гаджетами и комментариями, читайте здесь.

Всем удачи. Спасибо за ваш визит.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email