Для начала напишем код страницы без блока div. Например, этот:

Главное меню

• Пункт 1
• Пункт 2
• Пункт 3

Смотрим, как выглядит страница в браузере:

Теперь разобьем данную страницу на два блока div. Один с главным меню, а другой с текстом.

Смотрим в браузере:

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

А теперь между этими два блока пропишем горизонтальную линию, которая создается с помощью одинарного тега < hr />

Вот как выглядит данная линия в браузере:

На данную линию можем воздействовать с помощью следующих атрибутов:
Width – Задаем ширину линии
Size – Задаем толщину
Align – Выравниванием линию
Color – Задаем цвет

Давайте для примера уменьшим ей ширину, выровняем ее по правому краю страницы, зададим ей толщину в 5px и сделаем ее красного цвета.
Теперь код линии должен выглядеть таким образом:

Смотрим на результат:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

Атрибуты тега

---

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

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

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

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

При создании страницы HTML оформление играет существенную роль. Особенно когда мы говорим о различных символах и декоративном оформлении: эти мелочи помогают сделать «язык» вашей странички более доступным и ясным, к тому же существенно меняют её восприятие и внешний вид в целом. Одним из важнейших элементов для оформления является горизонтальная линия, и далее мы более подробно узнаем, как с ней работать и как сделать горизонтальную линию в html.

Какой бывает горизонтальная линия и для чего она нужна

Горизонтальная линия в html – это элемент оформления страницы, выполняющий ряд функций:

1. Декоративная . Помогает добавить страничке привлекательности.
2. Разделительная . Способствует эффективному отделению разной по смыслу информации.
3. Выделительная или подчеркивающая . Привлечет внимание гостей страницы к необходимой и наиболее важной информации.

Именно горизонтальная линия считается самым доступным способом для реализации целого ряда функций. Создать её очень просто, а внешне она смотрится очень выгодно. Путем нехитрых изменений html-кода вы сможете регулировать:

• длину;
• ширину;
• цветовые характеристики;
• выравнивание по тому или другому краю.

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

Создаем горизонтальную линию в HTML

Задать линию можно при помощи простого тэга – hr в треугольных скобках. Он является сокращением от «Horisontal Rule» и задает классические внешние параметры. Отличается от множества других тем, что не нуждается в закрывающем тэге и способен существовать самостоятельно. Изменить внешние характеристики элемента можно при помощи дополнительных значений в тэге:

1. Длина . Если вы не хотите, чтобы протяженность линии распространялась на всю страницу, то можно задать желаемых размер в пикселях либо процентах. Делается это про помощи дополнительного слова «width» в тэге и числового показателя длины, указанного после знака «=» в кавычках.

Выглядит это так. Например, если нам необходима длина, составляющая 100 пикселей, задаем такой тэг: hr width=»100″

1. Выравнивание . Выравнивание возможно по левому или правому краям, а еще по центру. Данная характеристика действует только в том случае, если вы уже задали параметр width, так как линию протяженностью во всю страничку невозможно выровнять. Для выравнивания задаем дополнительный атрибут в тэг «align» и добавляем к нему направление: center – для центрального, left – для левого и right – для правого выравнивания.

Готовый тэг в таком случае будет выглядеть так. Например, если нам нужно задать центральное выравнивание для горизонтальной линии длиной в 150 пикселей, то готовый тэг будет выглядеть так: hr align=»center» width=»150″.

Обратите внимание, что «align», показатель для выравнивания, ставится на 1 место, несмотря на то, что атрибут зависим от показателя длины width.

1. Ширина . По выбору можно также указывать ширину, создавая жирное или тонкое подчеркивание. Данный критерий ни от чего не зависит и может быть использован как самостоятельный без указания длины или выравнивания. Для него мы используем атрибут size в тэге и числовой показатель, равный желаемой ширине в пикселях. Число указывается в кавычках после атрибута size и символа «=».

Таким образом, если нам требуется создать линию шириной в 15 пикселей, необходимо создать следующий тэг: hr size=»15″.

1. Цвет . Задается также как независимый показатель. Для его изменения используется атрибут color в сочетании с названием цвета в форме кода либо на английском языке. Цвет указывается в кавычках после символа «=».

Таким образом, тэг для стандартной линии белого цвета можно написать двумя способами: hr color=»#FFFFFF»или hr color=»white»

Черный цвет можно создать при использовании кода #000000.

1. Убрать тень . Если вам необходим элемент, не содержащий тень, то в тэге следует использовать атрибут noshade. Он может быть использован самостоятельно либо в сочетании с другими элементами. Тэг для стандартной линии с его использованием будет выглядеть данным образом: hr noshade

Создание горизонтальной линии с помощью видео

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

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

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

Как нарисовать горизонтальную линию?

Для отрисовки горизонтальных линий в HTML существует специальный тег

. А вот сам

---

не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым .

Пример рисования горизонтальных линий в HTML

---

Параграф.

Параграф.

---

Параграф.

Результат в браузере

Параграф.

Параграф.

Параграф.

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега

---

существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color , size и width , соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style . Общий синтаксис такой:

---

style= "background:цвет" > - цвет линии (вернее ее фон).

---

style= "height:размер" > - толщина линии.

---

style= "width:размер" > - ширина линии.

---

style= "background:цвет; height:размер; width:размер" > - а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона .

А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов , в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

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

Как я уже сказал, только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег

---

. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег

---

style= "width:50%" > внутри элемента

, то как бы мы ни изменяли размеры окна браузера или разрешение монитора - ширина линии всегда будет составлять половину ширины блока

.

Пример изменения цвета, толщины и ширины горизонтальных линий.

---

---

---

---

Результат в браузере

Изменение положения горизонтальных линий

Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри

---

атрибут align со следующими значениями:

• center - линия выравнивается по центру (значение по умолчанию).
• left - прижимается к левому краю.
• right - прижимается к правому краю.

Пример выравнивания горизонтальных линий.

---

---

---

Результат в браузере

Как убрать рамку вокруг линии?

Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!

Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style . А пишется это так:

---

Домашнее задание.

1. Создайте заголовки статьи, раздела и подраздела. Расположите их все по центру.
2. Установите на всей странице шрифт Arial, а для заголовков - Courier.
3. Пусть размер шрифта на всей странице будет 85% от размера в браузере по умолчанию. А у заголовков 145%, 125% и 110% соответственно, от размера шрифта на странице.
4. Напишите под первым заголовком параграф, под вторым - длинную цитату, под третьим - стихотворение. И пусть стихотворение располагается по центру страницы.
5. Выделите жирным шрифтом три слова в цитате.
6. Под заголовком статьи во всю ширину страницы нарисуйте горизонтальную линию красного цвета толщиной три пикселя.
7. Сверху и снизу стихотворения нарисуйте линии толщиной в один пиксель черного цвета. Пусть ширина верхней линии будет примерно равна ширине стиха, а нижней - в два раза меньше.
8. Уберите у линий ненужные рамки.

Задача

Сделать горизонтальную линию на странице.

Решение

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

С помощью тега

---

можно нарисовать горизонтальную линию, вид которой зависит от используемых атрибутов, а также браузера. Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега

---

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

По умолчанию линия

---

отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color , а остальные браузеры — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все свойства воедино для селектора hr , получим универсальное решение для популярных браузеров (пример 1).

Пример 1. Горизонтальная линия

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Текстовоя строка

---

Результат данного примера показан на рис. 1.

Рис. 1. Цветная горизонтальная линия