Создание CSS стилей текста

Стили текстаТекст составляет основу почти любого веб-сайта. Поэтому создание правильных CSS стилей текста задача №1 для любого веб-мастера.
Создание привлекательного текста с помощью каскадных таблиц стилей на 2/3 определяет внешний вид Вашего сайта

Создание CSS стилей текста связано с восемью основными свойствами. Перечислим эти свойства:

  • Text-align: отвечает за горизонтальное выравнивание текста.
  • Text-indent: задаёт размер красной строки, т.е. отступы от края страницы.
  • Text-decoration: отвечает за подчёркивание и перечёркивание текста.
  • Text-transform: определяет трансформацию текста  в заглавные или прописные буквы.
  • word-spacing: задаёт расстояние между словами.
  • letter-spacing: определяет расстояние между буквами, иными словами позволяет управлять длиной слова.
  • line-height: регулирует рвсстояние между строками текста.

Свойство TEXT-ALIGN
Свойство TEXT-ALIGN — выравнивания текста, соответствует атрибуту ALIGN применяемому в html. Имеет четыре значения:

  • left — выравнивание текста по левому краю(используется по умолчанию);
  • right — выравнивание текста по правому краю;
  • center — выравнивание текста по центру;
  • justify — выравнивание текста по всей ширине вебстраницы одновременно.

Рассмотрим следующий код:

<html>
<head>
<title>text-align</title>
<style type="text/css">

#left { text-align: left; }
#right { text-align: right; }
#center { text-align: center; }
P {text-align:justify;}
</style>
</head>
<body>

<div id="left"><div>Выравнивание по левому краю</div></div>
<div id="center"><div>Выравнивание по центру</div></div>
<div id="right"><div>Выравнивание по правому краю</div></div>
<p>Текст выравнивается по всей ширине окна браузера, но длина текста должна быть больше ширины этого окна.</p>
</body>
</html>

свойство text-align

Результат наглядно виден на рисунке. Ещё раз напоминаю: если данный код просмотреть в полном окне браузера, и при Вашем расширении экрана и размере текста, длина текста меньше ширины окна, то свойство text-align:justify работать не будет. Идём дальше.

Свойство TEXT-INDENT

Свойство TEXT-INDENT задаёт размер отступа первой строки текста (в блоке,допустим: в параграфе <p>). Данное действие не распространяется  на все остальные строки блока текста. Возможно отрицательное значение для достижения выступа этой первой строки. С отрицательными значениями надо быть внимательным, чтобы текст не выскочил за пределы окна браузера. И опять пример кода:

<html>
<head>
<title>text-indent</title>
<style type="text/css">
P {
text-indent: 30px;
background: #ffed62;
}
DIV P{
text-indent: -10px;
padding: 20px;
background: #97c7c1;
}

</style>
</head>
<body>

<p>Отступ красной строки в 30px в простом параграфе</p>
<div>
<p>Отступ красной строки с отрицательным значением в 10px, при внутреннем отступе текста в 30px. </p>
</div>
</body>
</html>

свойство text-indent

На рисунке всё видно и объяснено в тексте. Обратите внимание на использование способа контекстного селектора ко второму параграфу.

Свойство Line-height

Правильное расстояние между строками  в тексте может значительно повысить читабильность последнего. Обычно браузеры сами  — автоматом определяют это расстояние в зависимости от размера и вида шрифтов. Чтобы управлять данным значением  своими руками, используют свойство CSS
Line-height. Для задания данного свойства используют почти любые единицы длины, которые допускаются в CSS. При использовании процентов, базовым размером выступает высота шрифта. Значения со знаком минус — не применяются.
Рассмотрим всё на примере:

<html>
<head>
<title>line-height</title>
<style type="text/css">
P {
line-height: 1.6;
}
I {
line-height: 0.7;
}
</style>
</head>
<body>

<div> Текст с нормальным расстоянием между строк, определяемым браузером. Текст с нормальным расстоянием между строк, определяемым браузером. Текст с нормальным расстоянием между строк, определяемым браузером.</div>
<p>Расстояние между строками увеличенно в 1.6 раза. Расстояние между строками увеличенно в 1.6 раза. Расстояние между строками увеличенно в 1.6 раза. Расстояние между строками увеличенно в 1.6 раза.</p>
<i>Расстояние между строками уменьшенно до 0.7 от нормального. Расстояние между строками уменьшенно до 0.7 от нормального. Расстояние между строками уменьшенно до 0.7 от нормального. Расстояние между строками уменьшенно до 0.7 от нормального.</i>
</body>
</html>

свойство CSS line-height

На скриншоте можно видеть результат исполнения HTML-кода.

Другие примеры использования CSS стилей текста в следующих статьях.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

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

Перед отправкой формы:
Human test by Not Captcha