Как добавить линию возле текста?
Можно по-разному привлечь внимание читателя к тексту. Например, сделать текст жирного начертания, изменить его цвет, использовать фон, нарисовать рамку. Но что если требуется не просто выделить текст, сколько отделить один текстовый блок от другого, разделить их на разные смысловые части? Вот тут использование линий и отступов просто неоценимо.
Текстовый блок на веб-странице сильно отличается от своего печатного собрата. Главным отличием является варьируемая ширина и высота текста, которые зависят от разрешения монитора, настроек операционной системы, браузера и других подобных вещей. Данные особенности придают верстке веб-страниц определенную сложность, но при этом порождают специфичные техники, которые намного упрощают процесс создания сайта. Рассмотрим, как можно использовать стили, чтобы создать произвольную линию возле текста, независимую от его размеров.
Для создания линий используется свойство CSS — border , которое устанавливает рамку вокруг блока. В частных случаях, для создания линии лишь с одной стороны элемента, используются свойства border-bottom , border-top , border-left и border-right , они соответственно задают линию снизу, сверху, слева и справа.
Значения этих свойств перечисляются через пробел и сразу устанавливают тип линии, её толщину и цвет. Стиль линии может принимать одно из восьми значений, как показано на рис. 1, а толщина задается, как правило, в пикселах.
Рис. 1. Типы линий
В примере 1 показано создание вертикальной линии рядом с текстом.
Пример 1. Вертикальная линия слева от текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Линия слева от текста
Чтобы исходный стиль абзаца оставить неизменным, введён новый класс line , который устанавливает возле абзаца вертикальную линию. Данный класс, кроме того, ещё задаёт смещение 20 пикселов от левого края окна до текста с помощью свойства margin-left и отступ от линии до текста через padding-left , без него текст будет соприкасаться с линией слишком плотно. Результат показан на рис. 2.
Рис. 2. Линия слева от текста
Как сделать горизонтальную линию?
Горизонтальная линия делается с помощью свойства border-bottom, которое применяется обычно к элементу . Это свойство добавляет линию снизу заданной толщины и стиля (пример 1). Чтобы не «портить» все , используем класс line , и уже для класса указываем свойство border-bottom . Сам остаётся пустым, никакое содержимое в нём не требуется, только стилевое оформление.
Пример 1. Использование border-bottom
Результат данного примера показан на рис. 1. Здесь мы делаем линию красного цвета толщиной в один пиксель. Сама линия при это занимает всю доступную ширину.
Рис. 1. Вид линии, созданной через border-bottom
См. также
- border-bottom
- Оформление ссылок
- Точки между слов
Как сделать горизонтальную линию в css
Для формирования горизонтальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них:
Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.
class="create-line">