Свойства текста

Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом отдельном случае.

Свойство text-align задает расположение текста относительно границ рабочего окна броузера или ячейки таблицы, иными словами — отвечает за выравнивание текстового блока. Соответственно, оно применяется совместно с так называемыми «блоковыми элементами», то есть элементами, поддерживающими отображение текстовых массивов: P, H1-H6, TD, TR и некоторыми другими.

Можно использовать одно из четырех значений данного свойства: left — выравнивание по левой границе экрана или ячейки таблицы, right — по правой границе, center — выравнивание по центру и justify — растягивание текста по всей ширине экрана или табличной ячейки.

Пример:

Р {text-align: justify;}

Свойство text-decoration. Управляет начертанием символов: с его помощью можно задать эффекты отображения зачеркнутого или подчеркнутого текста. Данное свойство может принимать одно из следующих значений: попе — отсутствие всяких эффектов, underline — подчеркнутый текст, line-through — перечеркнутый текст, overline — надстрочный текст и blink — мерцающий текст. Обратите внимание на то, что значение overline данного свойства не поддерживается броузером Netscape Navigator, а значение blink — наоборот, программой Microsoft Internet Explorer.

Пример:

A {text-decoration: none:}

ПРИМЕЧАНИЕ Включение в файл CSS элемента А в совокупности с определением «text-decoration: none» отменяет подчеркивание гиперссылок в документах HTML.

ВНИМАНИЕ Элемент А может быть представлен в тексте файла CSS с использованием четырех определений: link — просто размещенная на web-страницессылка, active описывает состояние ссылки, нажимаемой пользователем в данный момент времени, hover — состояние ссылки в момент, когда пользователь навел на нее курсор мыши и visited отображает посещенную ссылку. Определения состояний записываются через двоеточие после названия элемента, например, A: visited{color:2F4F4F;}.

Свойство text-indent, применяемое, как правило, совместно с элементом Р, указывает на отступ первой строки текстового блока в пикселах, сантиметрах, миллиметрах или в процентах от общей длины строки. Например, его используют для организации табулированных абзацных отступов, так называемых «красных строк».

Пример:

Р {text-indent: 30pt;}

Свойство line-height устанавливает межстрочный интервал текста web-страницы в пикселах, сантиметрах, миллиметрах или процентах от интервала, определенного по умолчанию. К этому свойству можно применить значение normal, оставляющее определенный в настройках клиентского броузера межстрочный интервал без изменений.

Пример:

Р { line-height: 5px;}

Свойство letter-spacing устанавливает расстояние между символами текста в пикселах, сантиметрах или миллиметрах, но распознается оно только броузером Microsoft Internet Explorer. Возможно использование атрибута normal, оставляющего межсимвольный интервал, принятый по умолчанию.

Пример:

Р { letter-spacing: Зрх:}

Свойство vertical-align определяет вертикальное выравнивание текста в ячейках таблиц или графических изображений в текстовом блоке и также не распознается броузером Netscape Navigator. Оно может принимать одно из следующих значений: top — позиционирование по верхней границе ячейки, middle — по центру ячейки, bottom — по нижней границе ячейки, baseline — по условной базовой линии, top-text — по верхней точке текстовой строки, bottom-text по нижней точке текстовой строки.

Пример:

ТО {vertical-align: top:}

IMG {vertical-align: top-text;}

Свойство text-transform задает трансформацию определяемого элементом текстового блока: normal — стандартное отображение текста без каких-либо изменений, capitalize — каждое слово абзаца начинается с заглавной буквы, при этом регистр символов, определенный в коде HTML, игнорируется; uppercase — все символы текста становятся заглавными и, наконец, lowercase — все символы становятся строчными. Это свойство поддерживается только броузером Microsoft Internet Explorer.

Пример:

CAPTION {text-transform: capitalize;}

  Свойства цвета и фона

Свойство color определяет цвет любого элемента CSS.

Пример:

SMALL {color: red:}

Свойство background-color указывает на цвет фона какого-либо элемента, причем этот цвет устанавливается именно для отображения элемента, а не всего html-документа. Учтите, что интерпретаторы разных броузеров обрабатывают данное свойство неодинаковым образом: например, Netscape Navigator выделяет фоновым цветом сам элемент страницы, причем выделение ограничивается его видимой шириной, a Internet Explorer растягивает выделение на всю ширину страницы.

Пример:

H1 { background-color: #f00000;}

Свойство background-image устанавливает фоновое изображение всего документа или ячейки таблицы. С ним можно использовать параметр попе, указывающий на то, что данная страница не содержит фоновых изображений.

Пример:

BODY {background-image: URL(/images/picture.gif):}

Свойство background-repeat определяет параметры повторения (копирования)фонового изображения в разных направлениях видимой части html-документа.Может принимать одно их следующих значений: no-repeat — не повторять изображение; repeat — повторять изображение во всех направлениях; repeat-x —только по горизонтали; repeat-y — только по вертикали.

Пример:

BODY {background-repeat: no-repeat:}

Свойство background-attachment устанавливает правила скроллинга фонового изображения. Может принимать одно из двух значений: scroll заставляет фоновое изображение двигаться вместе с содержимым web-страницы при прокрутке документа, a fixed фиксирует изображение на экране.

Пример:

BODY { background-attachment: scroll:}

Свойство background-position, в случае если значение свойства background-repeat установлено repeat-x или repeat-y, позволяет зафиксировать положение фонового изображения. Оно может принимать следующие значения: top — позиционирование по верхней границе экрана, middle — по центру экрана, bottom — по нижней границе, left — выравнивание по левой границе экрана или ячейки таблицы, right — выравнивание по правой границе, center — выравнивание по центру. Можно также указать в качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения в пикселах, миллиметрах или сантиметрах.

Пример использования:

BODY {background-position: 30cm 0cm;}

TD {background-position: middle:}

На главную