Свойства форматирования текста в CSS

Свойство Font-family используется для указания гарнитуры шрифта или семейства шрифтов при отображении текста. Гарнитуры шрифта (гарнитура – это набор начертаний символов одного шрифта) Serif – шрифт с засечками (серифный), Sans-serif – шрифт без засечек (бессерифный) и Monospace– моноширинный шрифт (символы имеют одинаковую ширину). Любая графическая операционная система имеет три набора стандартных гарнитур для Windows: Times New Roman – серифный, Arial – рубленый шрифт, Courier – моноширинный.

Например,

H1, H2, H3, H4, H5, H6

{font-family: " Arial Cyr", Geneva, Helvetica, sans-serif; }

задает заголовкам всех уровней шрифт по выбору. Сначала браузер будет пытаться найти шрифт Arial Cyr, затем Geneva, потом Helvetica и наконец, в случае полной неудачи, какой-нибудь рубленый шрифт.

Font-style – задает стиль вывода символов. Возможны следующие значения этого свойства: normal (нормальный), italic (курсив), oblique (наклонный).

Font-size –размер шрифтаможет задаваться как абсолютными значениями, так и относительными. В качестве относительного размера используется процентное задание (по отношению к размеру текущего шрифта): large – крупнее, smaller – мельче.

В качестве абсолютного размера используется указание тэга с одной из следующих единиц измерения: in, cm, mm, px, pt, pc.

Можно использовать и такие слова:

– xx-small – сверхмелкий;

– x-small – очень мелкий;

– small – мелкий;

– medium – средний;

– large – крупный;

– x-large – очень крупный;

– xx-large – сверхкрупный.

Font-weight – толщина символов используемого шрифта: normal – стандартное написание без каких-либо изменений, lighter – тонкий шрифт, bold – жирный шрифт, bolder – очень жирный;

Font-variant – определяет регистр записи символов и может принимать одно из двух значений: normal – стандартные написания, small-caps – заглавные.

Text-align – это свойство позволяет управлять форматом текста на web-странице, а именно: задает расположение текста относительно границ рабочего окна браузера или ячейки таблицы. Это свойство применяется совместно с блоковыми элементами: P, H1…H6, TD, TR и др. Text-align принимает следующие значения: left, right, center, justify.

P {text-align: justify; font-weight: bold; font-variant: small-caps; }

В данном примере абзац отображается прописными жирными символами и выравнивается по ширине окна браузера.

Text-decoration – управляет начертанием символов и может принимать следующие значения: none – отсутствие эффектов, underline – подчеркнутый текст, line-through – перечеркнутый текст, overline – надстрочный текст, blink – мерцающий текст.

Text-indent – отступ первой строки текстового блока в пунктах, пикселах, сантиметрах, миллиметрах.

P {text-indent: 10pt; text-decoration: underline; }

В данном примере будет отображаться абзац с отступом первой строки (красная строка) в 10 пунктов с подчеркнутыми символами.

Line-height – устанавливает межстрочный интервал текста web-стра-ницы в пикселах, см, мм или % от интервала, определенного по умолчанию.

P {line-height: 5px; }

Согласно приведенной выше записи в абзаце устанавливается межстрочный интервал в 5 пикселов.

Text-transform – задает трансформацию определяемого элементом текстового блока: normal – стандартное отображение текста без каких-либо изменений, сapitalize – каждое слово абзаца начинается с заглавной буквы, uppercase – все символы текста становятся заглавными, lowercase – все символы становятся строчными.

.caption {text-transform: lowercase; }

Применение селектора этого класса, приведенного в примере для HTML-элемента, позволит отобразить символы текста строчными буквами.

При цветовом оформлении текста различают свойства: «цвет элемента» – color, «цвет фона» – background-color.

При указании значения цвета можно использовать одну из трех форм: шестнадцатеричная константа цвета (например, #eee5db); ключевое слово, обозначающее цвет (например, red); функция генерирования цвета RGB (например, RGB(255, 64, 0)).

< P STYLE=" color: white; background-color: black" >

Для фонового отображения страницы или ячейки таблицы используются свойства: background-image – «фоновое отображение», background-repeat – «повторение изображения».

Background-image устанавливает фоновое отображение всего документа или ячейки таблицы.

BODY {background-image: URL; }

В данном примере URL – адрес графического файла.

Background-repeat определяет параметры повторения (копирования) изображения в разных направлениях видимой части HTML-документа: repeat – позволяет повторять изображение во всех направлениях, repeat-x – только по горизонтали, repeat-y – только по вертикали.

BODY {background-image: images/picture.gif;

background-repeat: repeat-x; }

В данном примере настройка стиля показывает горизонтальное повторение изображения фона.

Вкачестве дополнительных свойств для фонового изображения используются: background-attachment – устанавливает правила скроллинга фонового изображения; background-position – позволяет зафиксировать положение фонового изображения (используется совместно с background-repeatи позволяет устанавливать значения repeat-x или repeat-y).

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

BODY {background-image: images/picture.gif;

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; }

В данной настройке стиля происходит позиционирование графического изображения на странице и в ячейке таблицы.

Теги < DIV> и < SPAN> играют особую роль для CSS. Они позволяют выделить в документе отдельные области, задавая для них специфические свойства. Все, что нужно сделать, – это поместить теги, принадлежащие конструируемой области, внутрь < DIV> < /DIV> или < SPAN> < /SPAN>. Разница между < DIV> и < SPAN> только в одном: после блока < DIV> браузер переходит на новую строку, а после блока < SPAN> – нет.

Рассмотрим на примере некоторые свойства форматирования текста в CSS с применением к одной HTML-странице. Отображение примера в браузере показано на рис. 5.4.

< HTML>

< HEAD>

< ТIТLЕ> Форматирование текста в CSS< /TITLE>

< STYLE TYPE=" text/css" >

<! - -

.text {font-family: Tahoma; color: #003366;

line-height: 7mm; font-size: 12pt; }

#kursiv {font-style: italic; }

SPAN.font {font-size: 11px; }

.color {background-color: #cecece; } - ->

< /STYLE>

< /HEAD>

< BODY BGCOLOR=" #ffffff" TEXT=" black " LINK=" #00ff00"

ALINK=" #00ff00" VLINK=" blue" >

< FONT CLASS=" text" >

CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста

(< FONT STYLE=" text-decoration: underline; " > подчеркивание < /FОNТ>, < FONT ID=" kursiv" > кypcив< /FONT>, < FONT STYLE=" font-weight: bold; " > жирное начертание< /FОNТ>, < FONT STYLE=" font-family: Times New Roman; " > выбор гарнитуры< /FONT> и < SPAN CLASS=" font" > paзмep шpифтa < /SPAN>), с помощью средств CSS возможно < FONT СLАSS=" соlоr" > изменять такие параметры < /FONT>, как < FONT STYLE=" letter-spacing: 3рх; " > мeжбyквeнный < /FONT> и межстрочный интервал, < FONT STYLE=" text-transform: uppercase; " > тип perистpa< /FONT>

(строчные и прописные буквы) и многое другое.

< /FONT>

< /BODY>

< /HTML>

Рис. 5.4. Отображение примера с применением

свойств форматирования

Структурное форматирование. Каскадные таблицы стилей принесли много нового и заметно расширили функциональность форматирования структурных элементов электронного документа: P, DIV и пр. Наиболее распространенные свойства структурного форматирования в CSS приведены в табл. 5.2.

Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тэгом < LI >. В языке CSS данному элементу присваиваются следующие свойства: list-style-type – определяет внешний вид маркера, list-style-image– устанавливает графический маркер.

Таблица 5.2