Представление текста

Форматирование текста играет особую роль при создании сайта. В этом разделе даны основные свойства, необходимые для представления текста.

Text-indent

Определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0.

Пример:

p {text-indent: 3em}

Text-align

Выравнивает текст в блоке содержимого элемента. Значениями свойства могут быть:

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

right– текст выравнивается по правому краю;

center– текст выравнивается по центру;

justify– текст выравнивается по обоим краям.

Пример:

p {text-align: justify}

Vertical-align

Определяет вертикальное положение блока. По умолчанию базовая линия блока выравнивается по базовой линии родительского блока. Значениями свойства могут быть:

величина смещения блока по вертикали в единицах длины или процентах;

baseline– базовая линия блока выравнивается по базовой линии родительского блока;

middle– средняя точка блока выравнивается на уровне базовой линии родительского блока в сумме с половиной ширины родительского блок;

sub– базовая линии блока смещается вниз для представления нижних индексов;

super– базовая линии блока смещается вверх для представления верхних индексов;

text-top– верхняя граница блока выравнивается с верхом шрифта родительского элемента;

text-bottom– нижняя граница блока выравнивается с низом шрифта родительского элемента;

top– верхняя граница блока выравнивается по наиболее высокому элементу строки;

bottom– нижняя граница блока выравнивается по самому низкому элементу строки.

Пример:

p {vertical-align: middle}

Line-height

Задает высоту строки.

Пример:

div {line-height: 1.2em}

Text-decoration

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

underline– каждая строка текста подчеркнута;

overline– каждая строка текста обрамляется чертой над ней;

none– оформления текста не производится;

line-through– каждая строка текста отображается перечеркнутой.

Пример:

p {text-decoration: underline}

Text-shadow

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

Пример:

p {text-shadow: 3px 3px 5px red}

Letter-spacing

Определяет расстояние между текстовыми символами. По умолчанию используется стандартный интервал для текущего шрифта. Значениями свойства могут быть:

normal– стандартный интервал для текущего шрифта;

величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию.

Пример:

p {letter-spacing: 0.1em}

Word-spacing

Указывает расстояние между словами. По умолчанию используется обычный интервал, определяемый текущим шрифтом. Значениями свойства могут быть:

normal– стандартный интервал для текущего шрифта;

величина, на которую увеличивается расстояние между словами в дополнение к заданному по умолчанию.

Пример:

p {word-spacing: 1em}

Text-transform

Управляет преобразованием регистра букв. По умолчанию регистр букв не преобразуется. Значениями свойства могут быть:

capitalize– первая буква каждого слова преобразуется в прописную:

uppercase– все буквы преобразуются в прописные;

lowercase– все буквы преобразуются в строчные;

none– преобразования регистра не производятся.

Пример:

p {text-transform: capitalize}

White-space

Определяет форматирование пустых символов при отображении элементов. По умолчанию пустые символы исключаются по мере необходимости при заполнении строк текста. Значениями свойства могут быть:

pre– запрещает браузеру исключать пустые символы из текста;

normal– позволяет браузеру исключать пустые символы по мере необходимости при заполнении строк текста. Дополнительные переводы строк могут вставляться в местах, обозначенных в контексте;

nowrap– позволяет браузеру исключать пустые символы по мере необходимости при заполнении строк текста. Запрещает все переводы строк, кроме тех, что непосредственно обозначены в контексте.

Пример:

p {white-space: pre}

Таблицы

Свойства, необходимые для работы с таблицами.

Caption-side

Указывает положение табличного заголовка относительно таблицы. По умолчанию заголовок отображается сверху таблицы. Значениями свойства могут быть:

left– заголовок расположен слева от таблицы;

right– заголовок отображается справа от таблицы;

top– заголовок расположен сверху таблицы;

bottom– заголовок отображается снизу таблицы.

Пример:

caption {caption-side: bottom}

Table-layout

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

fixed– фиксированный алгоритм раскладки таблицы. В этом алгоритме горизонтальная раскладка таблицы не зависит от ее содержимого, а определяется шириной столбцов, границ и отступов в ячейках;

auto– автоматический алгоритм раскладки таблицы, которая задается размерами содержимого ячеек.

Empty-cells

Указывает, отображаются ли рамки вокруг пустых ячеек. По умолчанию рамки выводятся вокруг пустых ячеек. Значениями свойства могут быть:

hide– рамки не отображаются вокруг пустых ячеек;

show– рамки выводятся вокруг пустых ячеек.

Пример:

table {empty-cells: hide}

Border-collapse

Определяет модель рамки таблицы. По умолчанию рамка является общей для всех ячеек таблицы. Значениями свойства могут быть:

separate– каждая ячейка таблицы обладает собственной рамкой;

collapse– рамка является общей для всех ячеек таблицы.

Пример:

table {border-collapse: separate}

Border-spacing

Задает расстояние между рамками смежных ячеек таблицы в случае индивидуальных рамок в ячейках. По умолчанию интервал между рамками равен 0. Если указано одно значение, то оно применяется к горизонтальному и вертикальному расстояниям. Если заданы два значения, то первое устанавливает горизонтальный интервал, а второе – вертикальное расстояние.

Пример:

table {border-spacing: 10pt}

Проектное задание

Отформатируйте разработанные на предыдущем этапе (модуль 1) Web-страницы своей студенческой группы с использованием различных способов связывания документов и таблиц стилей.

Не нашли, что искали? Воспользуйтесь поиском: