Линии 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


19 комментариев:

  1. Интересно! Сначала попробую на тестовом блоге сделать!

    ОтветитьУдалить
  2. Ирина, да тут всё просто. Меняя стили можно столько вариантов наделать.

    ОтветитьУдалить
  3. Виктория, Здорово получилось в тестовом блоге! В следующем сообщении применю. Тебе сообщу, чтобы ты посмотрела!

    ОтветитьУдалить
  4. Я же говорю, всё просто. Посмотрю.

    ОтветитьУдалить
  5. Татьяна, пользуйтесь, приятно слышать, что пригодилось.

    ОтветитьУдалить
  6. Вчера в тестовом блоге линии получились. Хотела сегодня вставить в Блог Кота Васьки в новый пост. Делала, делала, но результат - ноль! Вот такая я никудышная блогер!

    ОтветитьУдалить
  7. Ирина . Кинь свой код мне на почту. Видела у тебя там только фон выделен. Или background-color не туда вставила или точку, какую-нибудь забыла.

    ОтветитьУдалить
  8. Виктория, вместо синего фона я хотела сделать линии CSS в начале и в конце поста, но не получилось. Переделывать не буду. СПАСИБО! В след. раз еще попробую.

    ОтветитьУдалить
  9. Ирина, я посмотрела у тебя исходный код, там вообще у тебя кода линий нет, только код фона.

    ОтветитьУдалить
  10. Ой, класс! Как раз на днях думала, что надо бы разнообразить тексты на некоторых сайтах таким вот образом :)

    ОтветитьУдалить
  11. Виктория, посмотри сегодняшний пост в блоге "Волшебный фонарик". Я сделала линии CSS. ЗДОРОВО получилось! В Блоге Кота Васьки тоже хотела (последний пост) там, где у меня начало выделенное синим цветом, но стала дальше вставлять текст о художнике и код линий удалился.

    ОтветитьУдалить
  12. Олли, вот здравствуйте, у тебя программист под рукой всегда.

    ОтветитьУдалить
  13. Привет, Ирина. Да посмотрела на фонарике-получилось. Скинь мне на почту HTML код этого поста. Посмотрю. Проблем не должно быть .

    ОтветитьУдалить
  14. Вика, этого программиста сначала надо отвлечь от работы, объяснять, что нужно, потом ещё 500 раз напомнить о своей просьбе, потом попросить всё переделать, потом напомнить об этом...

    ОтветитьУдалить
  15. Олли понимаю тебя-это не только к программистам относиться. Се ля ви.

    ОтветитьУдалить
  16. Спасибо за интересные и полезные дополнения.....забираю!!!!

    ОтветитьУдалить
    Ответы
    1. Владимир, если нашли применение, конечно забирайте. Спасибо.

      Удалить

Пользовательский поиск