Как сделать цветную горизонтальную линию?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Сделать горизонтальную линию на странице.
Решение
Горизонтальные линии хорошо использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии, привлекает больше внимания читателя, чем обычный текст.
С помощью тега <hr> можно нарисовать горизонтальную линию, вид которой зависит от используемых атрибутов, а также браузера. Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега <hr> линией, созданной через этот тег, легко управлять. Если ещё подключить мощь стилей, то добавление линии в документ превращается в простое занятие.
По умолчанию линия <hr> отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color, а остальные браузеры — background-color. Но это еще не все, при этом обязательно следует указать толщину линии (свойство height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border. Собирая все свойства воедино для селектора hr, получим универсальное решение для популярных браузеров (пример 1).
Пример 1. Горизонтальная линия
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвет горизонтальной линии</title> <style> hr { border: none; /* Убираем границу */ background-color: red; /* Цвет линии */ color: red; /* Цвет линии для IE6-7 */ height: 2px; /* Толщина линии */ } </style> </head> <body> <hr> <p>Текстовоя строка</p> <hr> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Цветная горизонтальная линия
htmlbook.ru
Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
Главная » Основы HTML » Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать горизонтальную линию в HTML.
С помощью горизонтальной линии можно аккуратно выделить меню, название заголовка, подчеркнуть комментарий. А бывает, смотришь на страничку, и чего-то не хватает, добавляешь горизонтальную линию – и вид странички значительно улучшается!
Чтобы создать горизонтальную линию в HTML, существует специальный тег:
<hr>
Закрывающий тег не нужен.
Пример:
<html> <head> <title>Горизонтальная линия</title> </head> <body> <hr> </body> </html>
Результат:
Атрибуты горизонтальной линии <hr>
○ ширина горизонтальной линии
Чтобы регулировать ширину, достаточно прописать к тегу «HR» атрибут «width» с размерами. Размеры задаются в пикселях (px) либо в процентах (%):
<hr>
Или так:
<hr>
Результат:
○ толщина горизонтальной линии
Чтобы задать толщину горизонтальной линии, достаточно прописать к тегу «HR» атрибут «size» с размером:
<hr size="8">
Результат:
○ выравнивание горизонтальной
Чтобы выровнять горизонтальную линию по центру, справа или слева, достаточно прописать к тегу «HR» атрибут «align» с такими значениями:
«right» – вправо;
«center» – по центру;
«left» – слева (по умолчанию).
Пример:
<hr align="right"> <hr align="center"> <hr align="left">
Результат:
○ отменить объемность горизонтальной линии
Чтобы отменить объемность горизонтальной линии, достаточно прописать к тегу «HR» «NoShade»:
<hr NoShade>
Результат:
○ цвет горизонтальной
Чтобы задать цвет горизонтальной линии, пропишите к тегу «HR» атрибут «color» с кодом цвета (кодировку цветов мы еще не изучали, но вскоре будем):
<hr color="#cc0000">
Результат:
На сегодня это все! Жду вас на следующем уроке. Удачи!
Предыдущая запись
Бегущая строка на HTML. Основы HTML для начинающих. Урок №9
Следующая запись
Коды цветов в HTML. Основы HTML для начинающих. Урок №11
stepkinblog.ru
Как сделать вертикальную линию HTML?
В продолжение темы оформления контента на станицах сайта сегодня я хочу вам показать, как можно добавить вертикальную линию HTML, и тем самым выделить фрагмент текста, сделав его более заметным для посетителей.
Для того, что бы сделать вертикальную линию HTML есть несколько способов, но в зависимости от браузера у вас могут возникнуть проблемы с ее отображением на странице. Поэтому я покажу вам два наиболее простых способа добавления вертикальной линии HTML, которые будут у вас на 100% работать.
Навигация по статье:
Вертикальная линия HTML
Можно дописать стили в самом теге:
<div> <h4> Вертикальная линия HTML </h4> </div>
<div> <h4> Вертикальная линия HTML </h4> </div> |
Результат:
Вертикальная линия HTML
С помощью свойства border-left мы задаем границу блока с левой стороны, и задаем следующие параметры границы:
- 3px – толщина линии
- solid – сплошная линия.Так же можно сделать: пунктирную(dotted), прерывистую (dashed), double (двойную), вогнутую (groove), и выпуклую (ridge).
- red – это цвет границы. Его вы можете задать названием цвета, в шестнадцатеричном формате, с помощью таблицы цветов RGB или RGBA.
Для задания границы вы можете использовать следующие свойства:
- border-left – граница слева
- border-right— граница справа
- border-top – сверху
- border-bottom – снизу
- border – граница по всему контуру блока
Свойства border-top и border-bottom можно так же использовать для задания горизонтальной линии
Так же нам нужно указать отступ текста от границы с помощью свойства padding-left, иначе он будет к ней прилипать. В моем случае отступ равен 10 пикселям.
Если вам удобнее работать с CSS стилями в отдельном файле, то для блока нужно присвоить класс и для этого класса прописать данные свойства в CSS -файле. Вот как это будет выглядеть:
HTML:
<div> <h4> Вертикальная линия HTML для текста в блоке </h4> </div>
<div> <h4> </h4> </div> |
CSS:
.block-vert-line{ border-left:3px solid green; padding-left:15px; }
.block-vert-line{ border-left:3px solid green; padding-left:15px; } |
Результат:
Вертикальная линия HTML для текста в блоке
Вертикальная линия HTML с помощью псевдоэлемента
Если вам удобнее работать с CSS -стилями, то вы можете воспользоваться еще одним способом добавления вертикальных линий. Данный вариант немного сложнее и заключается в использовании псевдоэлементов :before и :after
Тема псевдоэлементов достаточно обширна, поэтому подробно вдаваться их описание я сейчас не буду. В ближайшее время постараюсь подготовить статью с более подробной информацией по наиболее полезным псевдоэлементам, их возможностям и применению.
Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.
Вот как это будет выглядеть:
.vert-line:before{ content: » «; background: #33CCFF; width: 2px; height: 25px; float: left; margin-right: 10px; }
.vert-line:before{ content: » «; background: #33CCFF; width: 2px; height: 25px; float: left; margin-right: 10px; } |
Результат:
Вертикальная линия без HTML
Для блока с классом vert-line мы присваиваем псевдоэлемент :before и задаем свойствами параметры элемента, который будет сгенерирован при формировании страницы. В нашем случае мы делаем вертикальную линию с шириной 2 пикселя и высотой 25 пикселей.
Так же мы задаем цвет фона (background: #33CCFF;), обтекание с левой стороны (float: left;), и отступ с правой стороны (margin-right: 10px;), чтобы отделить текст блока от линии.
Свойство content с пустыми кавычками означает, что в данном элементе ничего нет, но при необходимость вы можете поместить в него дополнительные символы или текст.
Минусом использования псевдоэлемент является то, что они могут не поддерживаться старыми версиями браузеров.
Сегодня я показала вам, как можно добавить вертикальную линию HTML, и как создавать элементы на чистом CSS. Надеюсь, данные приёмы будут для вас полезны, и вы тоже возьмете их к себе на вооружение.
А на сегодня у меня все. Не забывайте оставлять комментарии и делиться статьей в социальных сетях.
До встречи в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru
Как сделать горизонтальную линию в HTML. Урок №15
Бывает, смотришь на текст, а ему чего-то не хватает. Экспериментируя, добавляешь горизонтальную линию и удивляешься, насколько уникальным может быть этот неприметный элемент дизайна.
С помощью горизонтальной линии вы сможете визуально разделить текст на блоки, помогая читателю усваивать информацию с определенной логикой.
После появления CSS многие веб мастера перестали использовать горизонтальную классическую линию в HTML. Но, поскольку наше дело изучить основы HTML, то нам нужно освоить все способы выставления горизонтальной линии, а потом уже выбирать, что и когда лучше использовать для сайта: чистый HTML или добавить еще стиль CSS. Уверяю вас, что вам многократно придется все-таки возвращаться к основам HTML, потому что это будет значительно проще, чем ковыряться в CSS.
Ну что, приступим:
Горизонтальная линия в HTML выставляется при помощи тега <HR>.
Ширина линии:
<Hr>
Ширина линии задается в процентах (%) или в пикселях (px).
Результат:
Толщина линии:
<Hr size="8">
Результат:
Выравнивание линии:
«right» — вправо;
«center» – по центру;
«left» – слева(по умолчанию).
<Hr align="right">
Результат:
Отмена объемности линии:
<Hr NoShade>
Результат:
Цвет линии:
Результат:
Цвет линии работает только в IE.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: html, основы
bloggood.ru
Сделать вертикальную линию через HTML и CSS
В статье узнаете о создание вертикальной линий, которую можно сделать с помощью HTML и CSS, где к ней добавим выделенный фрагмент текста. Для того, чтоб создать линию, для этого существует несколько методов, по которым можно вывести ее. Но здесь нужно знать, что не все браузеры могут ее корректно показывать, так что мы выберем самый простой и понятный способ, где вертикальная линия будет визуально просматриваться.Также здесь сразу добавим к ней текст, чтоб можно было выделять ключевые слова или категорий, которые находятся на сайте, и они безусловно должны по своему оформлению выделятся от основного описание. Так и под это как раз линия отлично подойдет, что можно выставить под любой гаммой цвета, а значит подогнать под свой стиль дизайна.
Если рассматривать полностью, то под создание такой линий существует несколько способов, для того, чтоб выставить на странице вертикальной линии. Здесь рассмотрим 2 основных метода, это на HTML и CSS, но какой вам больше подойдет, то здесь зависит от вашего требования. Если вы будете устанавливать на главной странице, то здесь лучше все сделать через стили. Но также применяется в разных статьях, как оформление, то безусловно на HTML буде намного логичнее поставить.
Для создание линии существует несколько методов, которыми вы можете задействовать:
1. Сделайте свойство border-right или border-left таблицы нужной шириной так, чтобы оно могло действовать как вертикальная линия.
2. Сделайте свойство border-right или border-left DIV желаемым типом ширины.
3. Аналогично можете все использовать при помощи стилистике, где в CSS, прописываем все параметры.
Первый метод:
В этом методе все просто, здесь изначально обвертываем на странице в тег div, это все для того чтоб выделить элемент. Где также можете задействовать уже существующий каркас блока, где задаете границу с заданной стороны. Где появляется возможность вписать стиль в заданном вами теге.
HTML
Код
<div>
Интернет ресурс ZorNet.Ru для вебмастера
</div>
Так получится на выходе:
Все это сделали при помощи свойства border-left, где изначально выставили границу блока по левому краю, и после этого можно уже задать параметры, как под линию, так и под ключевую фразу, что будет прикреплена.
Здесь на заметку, так как с таким же успехом свойство border-top и border-bottom можно аналогично задействовать под задание горизонтальной линии.
Второй метод:
Нужно разместить div вокруг заданной разметки, это делается, так где вы решили чтобы строка отображалась следующим образом при использование CSS.
HTML
Код
<div>
Создаем вертикальную линия на CSS И HTML с текстом
</div>
CSS
По стилистике все просто, задаем требуемую высоту, также цвет фона и все остальное по оформлению.
Код
.vertikalnaya-linaya {
border-left: 4px solid #137b13;
padding-left: 10px;
font-size:15pt;
font-weight: bold;
}
Оба способа по свой сути похоже, только один лучше применять под оформление в материалах, а другой ставим на страницы для информации.
Демонстрация
zornet.ru
Как сделать горизонтальные и вертикальные линии при помощи 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.
Ну а если у вас есть еще вопросы, задавайте их в комментариях.
Loading…web-ru.net
Как добавить линию возле текста?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Добавить сбоку от абзаца текста вертикальную линию.
Решение
Можно по-разному привлечь внимание читателя к тексту. Например, сделать текст жирного начертания, изменить его цвет, использовать фон, нарисовать рамку. Но что если требуется не просто выделить текст, сколько отделить один текстовый блок от другого, разделить их на разные смысловые части? Вот тут использование линий и отступов просто неоценимо.
Текстовый блок на веб-странице сильно отличается от своего печатного собрата. Главным отличием является варьируемая ширина и высота текста, которые зависят от разрешения монитора, настроек операционной системы, браузера и других подобных вещей. Данные особенности придают верстке веб-страниц определенную сложность, но при этом порождают специфичные техники, которые намного упрощают процесс создания сайта. Рассмотрим, как можно использовать стили, чтобы создать произвольную линию возле текста, независимую от его размеров.
Для создания линий используется свойство CSS — border, которое устанавливает рамку вокруг блока. В частных случаях, для создания линии лишь с одной стороны элемента, используются свойства border-bottom, border-top, border-left и border-right, они соответственно задают линию снизу, сверху, слева и справа.
Значения этих свойств перечисляются через пробел и сразу устанавливают тип линии, её толщину и цвет. Стиль линии может принимать одно из восьми значений, как показано на рис. 1, а толщина задается, как правило, в пикселах.
Рис. 1. Типы линий
В примере 1 показано создание вертикальной линии рядом с текстом.
Пример 1. Вертикальная линия слева от текста
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Линия слева от текста</title>
<style type="text/css">
.line {
border-left: 2px solid #ccc; /* Параметры линии */
margin-left: 20px; /* Отступ слева */
padding-left: 10px; /* Расстояние от линии до текста */
}
</style>
</head>
<body>
<p>Изучая с позиций, близких гештальтпсихологии и психоанализу
процессы в малой группе, отражающих неформальную микроструктуру общества,
Дж.Морено показал, что компульсивность дает стресс в силу которого смешивает
субъективное и объективное, переносит свои внутренние побуждения на реальные
связи вещей.</p>
</body>
</html>Чтобы исходный стиль абзаца оставить неизменным, введён новый класс line, который устанавливает возле абзаца вертикальную линию. Данный класс, кроме того, ещё задаёт смещение 20 пикселов от левого края окна до текста с помощью свойства margin-left и отступ от линии до текста через padding-left, без него текст будет соприкасаться с линией слишком плотно. Результат показан на рис. 2.
Рис. 2. Линия слева от текста
htmlbook.ru