Блиндер буду -:-CSS оформление текста




Разделы сайта

Каталог софта

Как создается сайт

Free hosting

Сервисы сайта

Скачать бесплатно!



CSS оформление текста

CSS правила оформления текста


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

Отступ первой строки блока

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

Для задания отступа в первой строке блока применяется свойство выравнивания text-indent, принимающее следующие значения:

  • любое числовое, соответствующее стандартам длины, вы том числе и отрицательные.

  • соответствующее стандартам значение, выраженное в процентном соотношении

  • со свойством inherit , когда к свойству применяется значение родительского элемента.

Пример использования: p {text-indent:25px;}

Выравнивание текста в блоке

Правила каскадных таблиц стилей позволяют задать выравнивание текста в блоке.

Для выравнивания текста в блоке используется свойство CSS text-align, принимающее следующие значения:

  • left – выравнивание текста по левому краю блока

  • center - выравнивание текста по центру блока

  • right - выравнивание текста по правому краю блока

  • justify - равномерное выравнивание текста

  • inherit – выравнивание текста ведется по значению родительского элемента.

Способ применения свойства выравнивания: p {text-align: left;}

Визуальное оформление текста

Визуальное оформление текста задается параметром text-decoration.

Параметр CSS text-decoration может принимать следующие значения:

  • none – без оформления (по умолчанию).

  • underline – текст, подчеркнутый одной линией

  • overline - линия, расположенная над текстом

  • line-through – текст, перечеркнутый линией

  • blink – мерцающий текст.

  • inherit – параметр text-decoration принимает значение родительского элемента.

Способ применения свойства: p {text-decoration: line-through;}

Изменение регистра знаков в тексте

Параметр каскадных таблиц стилей text-transform дает возможность в автоматическом режиме изменить регистр знаков в тексте.

Основные параметры, определяющие свойство CSS text-transform:

  • none – свойство не изменяет вывод текста (по умолчанию).

  • capitalize – первая буква каждого слова отображается в верхнем регистре

  • uppercase – весь текст отображаются строчными буквами, то есть в верхнем регистре

  • lowercase - буквы текста отображаются прописными, то есть в нижнем регистре

  • inherit - значение родительского элемента.

Способ применения свойства: p {text-transform: lowercase;}

Создание эффекта затемнения текста

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

Свойство CSS text-shadow может принимать значения:

  • none – значение отсутствует (по умолчанию).

  • color – определяет цвет затемнения в тексте

  • первое числовое значение (с положительным знаком) определяет расстояние по горизонтали вправо от текста. Отрицательное значение определяет расстояние влево от текста.

  • второе числовое значение (с положительным знаком) определяет расстояние по вертикали вниз от текста. Отрицательное значение определяет вверх от текста.

  • третье числовое значение определяет радиус нерезкости тени текста.

  • inherit – определяет в качестве числового параметра элемента значение родительского элемента.

Способ применения свойства: h3{text-shadow: blue 3px 3px 2px}

Задание при помощи CSS интервала между символами текста

Каскадные таблицы стилей позволяют при помощи параметра letter-spacing определить интервал между символами текста.

Параметр letter-spacing может принимать значения:

  • none – определенный стандартом интервал, соответствующий данному виду шрифта.

  • числовое значение, выраженное при момощи стандартных для CSS единиц, которое определяет интервал между символами.

  • inherit - определяет в качестве числового параметра элемента значение родительского элемента.

Способ применения свойства: div {letter-spacing: 3px;}

Правила CSS для измения интервала между словами в тексте

Правило CSS word-spacing позволяет эффективно изменять интервалы между словами в тексте.

Значения, которые может принимать параметр word-spacing:

  • none – определенный стандартом интервал, соответствующий данному виду шрифта.

  • числовое значение, выраженное при момощи стандартных для CSS единиц, которое определяет интервал между словами текста.

  • inherit - определяет в качестве числового параметра элемента значение родительского элемента

Способ применения свойства: div{word-spacing: 4px;}


Партнеры

Valid HTML 4.01 Transitional