Закрыть ... [X]

Как сделать линию на весь сайт

Категория: HTML Опубликовано: 16.01.2017

как сделать линию с помощью html i css

Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства. Конечно же, с текстом можно особо не заморачиваться и выделить его, к примеру, жирным или курсивом, изменить задний фон или сделать рамку вокруг текста. Но не всегда один из представленных способов является подходящим. Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь html и СSS свойства.

Как сделать в тексте линию средствами CSS

Для реализации задуманного нам понадобится обратиться к файлу style.css, прописав в нем соответственное свойство border. Тем самым над, под или с определенной стороны текста появится линия. В свою очередь предусмотрено несколько свойств, отвечающих за отображение линии, а именно:

- border-top – горизонтальная линия, расположенная над текстом;

- border-right – вертикальная линия, расположенная справа от текста;

- border-bottom – горизонтальная линия, расположенная под текстом;

- border-left – вертикальная линия находящаяся слева.

Как сделать линию в html

Используя свойства CSS можно прописать все необходимые значения редактируя HTML код. Для этого нужно перейти в административную часть сайта. Выбрать один из опубликованных материалов, переключить текстовый редактор в режим правки html кода и внести свойства CSS. Образец можно лицезреть ниже.

 

Как сделать пунктирную или прямую линию?

Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?

 

<html>
<head>
<title>Как сделать пунктирную или прямую линию?</title>
</head>
<body>
<div style="width:500px;
border-top:3px solid #9EC1D4;
border-bottom: dotted 3px #9EC1D4;
padding-left:10px">
Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?
</div>
</body>
</html>

Краткая расшифровка команд

- width – длина линии;

- solid – сплошная линия;

- dotted – точечная линия.

Для более глубокого ознакомления со стилями рекомендую почитать эту статью.

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

Приведенный способ имеет несколько достоинств:

- Обширный ассортимент возможностей, с помощью которых можно сделать практически любую линию.

- Легкость внесения всех необходимых изменений непосредственно в HTML код. Это во многом упрощает задачу для неопытных сайтостроителей.

Как сделать прямую горизонтальную линию с помощью тега HTML <hr>

Первое на что хотелось бы обратить ваше внимание, это то, что у данного тега, несмотря на все тонкости и принципы html, нет закрывающегося тега. Он может быть использован в любом месте html кода, между тегами <body> и </body>.

Атрибуты тега <hr>

- width – отвечает за длину линии. Может указываться как в процентах, так и пикселях.

- size – толщина линии. Указывается в пикселях.

- color – определяет цвет линии.

- align – атрибут, отвечающий за выравнивание линии. В свою очередь к нему относится команда:

- right – выравнивание справа;

- left – выравнивание слева;

- centre – центральное выравнивание.

Образец html кода с использованием тега <hr>

<hr size=3px width=500px align="left">

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

И помните, каждый автор, написавший полезную статью, заслуживает на комментарий, минимум репост.

Спасибо за внимание и до скорых встреч на страницах Stimylrosta.

Не ленитесь, поделитесь!

Оставить комментарий

Просмотров: 1960

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


Источник: http://stimylrosta.com.ua/verstka-sajta/html-putevoditel-dlya-novichkov/72-kak-sdelat-liniyu-s-pomoshchyu-html-i-css

Поделись с друзьями



Рекомендуем посмотреть ещё:



Горизонтальные линии в HTML документе, страницах Уроки по HTML, Обучение Оборудование балконов своими руками

Как сделать линию на весь сайт Как сделать горизонтальные и вертикальные линии при помощи HTML и CSS
Как сделать линию на весь сайт Как сделать горизонтальную линию в HTML. Урок 15 Блог Костаневича
Как сделать линию на весь сайт Горизонтальные и вертикальные линии с помощью html и css BEST SEO BLOG
Как сделать линию на весь сайт Рисуем горизонтальную линию : Kate-land - блог верстальщика и для
Как сделать линию на весь сайт Урок 16. Как вставить горизонтальную линию на HTML странице
Как сделать линию на весь сайт Line, HTML горизонтальная линия, вертикальная ХТМЛ линия
Как сделать линию на весь сайт Сложный заголовок с линиями по бокам текста на css. /
Как сделать линию на весь сайт Горизонтальная линия HTML - Уроки HTML
Ответы как сделать линию html Ассоциация Экспериментальной Авиации - изготовление стеклопластикового Брондирование волос (фото) Денежное дерево : продажа, цена в Минске. деревья искусственные, бонсаи Если тройничный нерв и зуб мудрости - Основные симптомы воспаления Как вернуть деньги за покупки в App Store и iTunes Store прямо с iPad? Какой цвет сочетается с коралловым / Коралловый цвет в одежде

ШОКИРУЮЩИЕ НОВОСТИ