text-indent

Свойство text-indent устанавливает величину отступа первой строки блока текста. Остальные строки текста остаются неизменными. Значение свойства text-indent можно задавать в любых доступных величинах – в пикселях (px), в пунктах (pt), в миллиметрах (mm), в сантиметрах (cm) и т.д. Свойство поддерживает отрицательные значения. Это может понадобиться при создании красочного дизайна, но об этом чуть ниже.

Пример

p {text-indent: 1em;}
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
    <title>text-indent</title>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, nulla amet fermentum. Sed sit, elementum dignissim. Etiam ullamcorper, justo libero, ornare ac. Pellentesque leo parturient, penatibus dolor felis. In rhoncus. Curabitur sed, ac fringilla, lectus habitasse. In at, neque fringilla vel, malesuada erat laoreet. Gravida ultrices augue, fringilla ac, pede et.</p>
    <p>Praesent dolor, felis nisl. In eget, ipsum placerat egestas, nec mattis. Id eget, volutpat libero vel, ligula rutrum. Venenatis aliquam. Leo mattis, pulvinar euismod, dolor at neque. Ornare id cras, tristique eget, in pellentesque nunc. Vivamus vitae, accumsan nulla nulla, nonummy tortor. Morbi donec. Condimentum eu, a elit praesent.</p>
</body>
</html>

Результат

Свойство CSS text-indent

А теперь вернемся к возможности задать для text-indent отрицательные значения.
Как я уже говорил, это может понадобиться при создании красочного дизайна сайта. Например, для создания красивого оформления пункта меню или заголовка.
Допустим, нам нужно оформить заголовок сайта в виде изображения, но при этом сделать это так, чтобы ссылка на заголовке не была пустой и ее видели поисковые системы (индексировалась).

Код будет выглядеть следующим образом

.header {
    text-indent: -9999px;
    display: block;
    background: url('header.jpg') no-repeat;
    height: 90px;
    width: 500px;
}
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
    <title>Замена текста изображением</title>
</head>
<body>
    <a class="header" href="#">текст индексируемой ссылки</a>
</body>
</html>

Результат

text-indent - отрицательные значения
Поясню: текст ссылки мы сдвинули на 9999 пикселей влево, тем самым скрыв его от глаз посетителей, но не от поисковых систем. В итоге мы имеем красивый заголовок, без видимого текста ссылки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>