Линия отреза
В квитанциях, купонах или газетах порой можно встретить пунктирную линию с изображением ножниц и надписью «линия отреза». Такая фраза говорит, что надо отрезать этот кусок по приведённой линии, чтобы в дальнейшем использовать по назначению. На сайтах подобные инструкции не имеют никакого смысла, никто тыкать в монитор ножницами в здравом уме не станет. Но можно использовать горизонтальную линию в качестве элемента дизайна страницы, к примеру, для визуального отделения одного материала от другого.
Наша линия будет содержать три элемента: саму пунктирную линию, рисунок половины ножниц и надпись «линия отреза». На рис. 1 показано, что хотелось бы получить в итоге.
Рис. 1. Горизонтальная линия
В идеале, линия должна формироваться единственным тегом <div>, а всё остальное возлагается на стили, включая вывод рисунка и надпись.
Для начала в HTML вставим основу линии.
<div class="line"></div>Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top. Если бы рисунок выводится над линией, соответственно потребуется border-bottom. Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.
.line {
border-top: 1px dashed #000; /* Параметры линии */
height: 18px; /* Высота блока */
background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
}В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).
Рис. 2. Изображение ножниц для линии
Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after, в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line.
.line:after {
content: "Линия отреза";
}Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).
Пример 1. Линия
XHTML 1.0CSS 2.1IE 7IE 8+CrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Линия отреза</title>
<style type="text/css">
.line {
text-align: center; /* Выравниваем текст по центру */
border-top: 1px dashed #000; /* Параметры линии */
height: 18px; /* Высота блока */
background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
}
.line:after {
content: "Линия отреза";
font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */
font-size: 12px; /* Размер шрифта */
vertical-align: top; /* Выравнивание по верхнему краю */
}
</style>
</head>
<body>
<p>Текст до</p>
<div class="line"></div>
<p>Текст после</p>
</body>
</html>Браузер IE7 не поддерживает псевдоэлемент :after, поэтому текст под линией в нём выводиться не будет.
На примере простого декоративного элемента вроде линии показано соблюдение принципа разделения оформления и содержания. Стиль линии, включая текст, который в действительности не является частью страницы, а относится к линии, формируется через CSS. В коде HTML остаётся только пустой <div> с классом line. В итоге мы можем легко модифицировать нашу линию, вообще не затрагивая HTML-код. К примеру, заменить рисунок ножниц или вывести текст сверху, а не снизу линии.