HTML и CSS – как сделать горизонтальные и вертикальные линии.

Приветствую всех читателей. Периодически, перед мастерами встает проблема, как сделать горизонтальную или вертикальную линию с помощью HTML или с помощью CSS. Вот об этом я сегодня вам и расскажу.

Линии в CSS

Есть несколько способов, сделать линии. Один из таких способов – использование CSS. А точнее при помощи Border. Давайте рассмотрим пример.

И вот что в результате получится.

Горизонтальная и вертикальная линия с помощью css.

Линии, в CSS можно нарисовать при помощи оператора Border. Если нужен просто прямоугольник с фиксированной шириной рамки, то можно просто использовать этот оператор, и задать ему значение. Например border:5px solid #000000; будет означать, что границы блока имеют ширину равной 5 пикселям черного цвета.

Однако, если нужно задать не все границы, а только некоторые, то тогда нужно прописать, какие именно нужны границы, и какое значение будет у каждой из них. Это операторы:

  • border-top – задает значение верхней границы
  • border-bottom – задает значение нижней границы
  • border-left – задает значение левой границы
  • border-right – задает значение правой границы.

Вертикальная и горизонтальная линия в HTML

Создать линии можно и в самом HTML. Для этого, можно воспользоваться тегом hr.

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

Но этому тегу, можно задать и некоторые значения.

  • Width – задает значение ширины линии.
  • Color – задает цвет линии.
  • Align – задает выравнивание по левому краю, по центру, по правому краю
  • Size – задает значение толщины линии в пикселях.

С помощью тега hr, можно задать и вертикальную линию. Но в этом случае, придется опять прибегнуть к стилям.

В этом случае, будет нарисована вертикальная линия высотой в сто пикселей, толщиной в один пиксель и с отступом в пять пикселей.

Заключение.

Ну вот теперь вы знаете, как можно задать вертикальную и горизонтальную линию. Линии можно задать как на обычных сайтах, с использованием HTML, так и задать на сайте, на котором используется CMS, например, WordPress, но в этом случае, нужно будет перейти в режим HTML.

Ну а если у вас есть еще вопросы, задавайте их в комментариях.

1 Star2 Stars3 Stars4 Stars5 Stars (2 оценок, среднее: 5,00 из 5)
Loading...

Случайные публикации:
  • Будет ли конец Света в 2012? Опрос!Будет ли конец Света в 2012? Опрос!Решил подвести итог опросам на интернет-маркетинговую тему: Гугл или Янде...
  • Яндекс.Диск - как скачать программу, загрузить файл и увеличить объём диска?Яндекс.Диск - как скачать программу, загрузить файл и увеличить объём диска?...В общем, сервис Яндекс.Диск действительно очень наглядный и удобный. Пожалуй, пока
  • Аннулирование тИЦ в Яндексе. Или как быстро узнать, что ваш сайт под фильтром АГС...Аннулирование тИЦ в Яндексе. Или как быстро узнать, что ваш сайт под фильтром АГС...В декабре 2013-го я рассказывал о том, как может выглядеть попадание...
  • SEO-аудит блога О женщинах, для женщин Aleximax.ru. ВидеоSEO-аудит блога О женщинах, для женщин Aleximax.ru. Видео...е особо не стоит сайт продвигать в поисковых системах или раскручивать каким-либо
  • Спам - что это такое и почему это плохо?Спам - что это такое и почему это плохо?В данной статье я особо не буду расписывать такое популярное в Интернет явлени...
Оставьте комментарий:
Один отзыв
  1. hunter:

    Азы ХТМЛ и ЦСС должен знать любой вебмастер. Полезная статья — можно использовать как шпаргалку при форматировании кода сайта!

    Ответить
Я не спамлю...