Линейка

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

Рассмотрим несколько способов добавления горизонтальных линеек на веб-страницу.

Использование тега <HR>

Тег <HR> создает горизонтальную линию заданной высоты и ширины. Этот тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Параметр width задает ширину, причем она может указываться в пикселах и процентах, а size — высоту линии (пример 1).

Пример 1. Использование тега <HR>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Тег HR  </title>
  </head>
 <body>
  <hr noshade size="4" width="75%">
  <hr noshade size="2" width="60%">
  <hr noshade size="1" width="50%">
  <hr noshade size="1" width="38%">
  <hr noshade size="1" width="25%">
  <hr noshade size="1" width="10%">
 </body>
</html>

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

Рис. 1

Рис. 1. Линейка, созданная при помощи тега <HR>

Применение стилей

Стили дают б?льшую свободу по созданию линеек и управлением их видом, причем можно легко устанавливать как горизонтальные, так и вертикальные линии. Для этой цели применяются стилевые атрибуты border-left, border-right, border-top и border-bottom, они соответственно задают линию слева, справа, сверху и снизу от блока. Каждый из приведенных атрибутов одновременно определяет толщину линии, ее стиль и цвет. Так чтобы добавить сплошную линейку красного цвета слева от абзаца, в стилях достаточно написать

P { border-left: 2px solid #800000; }

В качестве значения атрибута border-left вначале идет толщина в пикселах, затем ключевое слово, обозначающее сплошную линию, и заканчивается цветом линии в шестнадцатеричном формате. Ключевые слова для обозначения стиля показаны на рис. 2.

Рис. 2. Стиль линеек задаваемых через атрибут border

В примере 2 показано добавление вертикальной и горизонтальной линейки в тексте.

Пример 2. Использование стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Линейки</title>
  <style type="text/css">
   div.tips {
    border-left: 4px double #5bb4e5; /* Параметры вертикальной линейки */
    margin-left: 25px; /* Сдвигаем блок вправо */
    padding-left: 10px; /* Расстояние между линейкой и текстом */
   }
   div.tips .headtips {
    border-bottom: 1px solid #e55b5b; /* Горизонтальная линейка под текстом */
   }
  </style>
 </head>
 <body>
  <p>На первом этапе следует растопить шоколад, используя паровую баню. 
     Для этого возьмем чашку, наполнив ее горячей водой температурой примерно 
     60 градусов, и опустим в чашку сосуд с шоколадом.</p>
  <div class="tips">
  <p class="headtips">Хозяйке на заметку</p>
  <p>Шоколад предварительно следует разломать на  кусочки, так он быстрее 
     растает на паровой бане.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 3. В примере вертикальная линейка отображается двойной линией, а горизонтальная — сплошной одинарной. Ширина и высота линеек зависит от размера блока и подстраивается под него.

Рис. 3

Рис. 3. Линейки, созданные с помощью стилей

Термины

Линейка

Использование тега <HR>

Применение стилей

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