Тема 3. Управление текстом

LETTER-SPACING. Кернинг.

Одна из особенностей CSS заключается в том, что HTML-стили не имеют функции, которая позволяла бы легко изменять отступ для текста, включая отступ между отдельными буквами (кернинг), словами и строками текста в абзаце. Используя CSS, вы можете легко управлять отступами в тексте и изменять их по своему усмотрению.

letter-spacing: 5px;

WORD-SPACING. Интервал между словами

Подобно кернингу, интервалы между словами (word spacing) могут как улучшать, так и ухудшать восприятие текста. Текст, в котором между словами небольшие пробелы, легче читать. Однако если пробелы слишком велики, чтение значительно затрудняется.

word-spacing: 20px;

LINE-HEIGHT. Интерлиньяж.

Междустрочный интервал (leading) легко изменить при помощи свойства line-height.

число	на которое нужно умножить размер шрифта, чтобы получить величину интервала например, 2 для двойного интервала
длина	например 24рх. Независимо от размера шрифта интервал для каждой строки текста устанавливается с помощью этой единицы. Так, если размер шрифта равен 12рх, а высота строки - 24рх, интервал между строками будет двойным
проценты	Высота строки пропорциональна размеру шрифта
normal	Этот атрибут перекрывает все наследованные значения межстрочного интервала.

H1

{

line-height: 60%;

}

P

{

line-height: 1.5;

}

TEXT-TRANSFORM. Заглавные и строчные буквы

При работе с динамическим текстом нельзя заранее угадать, в каком виде он появится на экране, какими буквами будет набран заглавными или строчными. Но с помощью свойства text-transform это упущение можно исправить.

capitalize	Преобразует первую букву слова в заглавную.
uppercase	Меняет все буквы на заглавные
lowercase	Понижает регистр всех букв в слове
none	Перекрывает все наследованные значения этого свойства и оставляет текст без изменений

text-transform: uppercase;

TEXT-ALIGN. Выравнивание текста по горизонтали

Обычно текст выравнивается по левому краю или по ширине (так называемый газетный стиль, когда текст выравнивается и по правому, и по левому краю). Чтобы привлечь к тексту внимание, его выравнивают по центру или по правому краю. С помощью свойства text-align можно управлять выравниванием текста.

left	По левому краю
right	По правому краю
center	По центру
justify	По ширине

text-align: left;

Vertical-align. Вертикальное выравнивание текста

С помощью свойства vertical-align можно определить положение элемента в строке по отношению к окружающему тексту, то есть поместить его выше или ниже базовой линии строки. Данное свойство работает только в inline-селекторах, тегах, которые не окружены пробелами. Например, теги <а>, <img>, <b>, <i>.

baseline	Помещает текст на базовой линии строки (обычное положение)
bottom	Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle	Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub	Элемент изображается как подстрочный, в виде нижнего индекса.
super	Элемент изображается как надстрочный, в виде верхнего индекса.
text-bottom	Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top	Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top	Выравнивание верхнего края элемента по верху самого высокого элемента строки.

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

vertical-align: sub

TEXT-INDENT. Красная страка.

Устанавливает величину отступа первой строки блока текста. Допускается отрицательное значение для создания выступа первой строки.

text-indent: 1.5em;

WORD-WRAP. Перенос слов.

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

normal	Строки не переносятся.
break-word	Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

word-wrap: break-word;

COLOR. Настройка цвета текста

Параметр color используется для настройки цвета фона для элемента. Несмотря на это вы можете применять данный параметр для настройки цвета фона горизонтальных объектов и формирования элементов.

h2

{

color: red;

}

form

{

color: #990000;

}

input

{

color: rgb(100%, 0%, 0%);

}

.сopy

{

color: rgb(102,102,102);

}

TEXT-DECORATION. Оформление текста.

underline	Подчеркивание текста.
overline	Надчеркивание текста.
line-through	Перечеркивает текст.
blink	Делает текст мигающим.
nоnе	Снимает все установленные ранее декоративные стили

text-decoration: none;

TEXT-OVERFLOW. Видимость текста.

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

clip	Текст обрезается по размеру области.
ellipsis	Текст обрезается и к концу строки добавляется многоточие.

text-overflov: ellipsis;

!

Opera 9.2, 9.6 и 10 не поддерживает свойство.

Браузеры Firefox, не поддерживает свойство.

TEXT-SHADOW. Тень текста.

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

none	Отменяет добавление тени.
цвет	Цвет тени в любом доступном CSS формате.
сдвиг по x	Смещение тени по горизонтали относительно текста.
сдвиг по y	Смещение тени по вертикали относительно текста.
радиус	Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее.

text-shadow: цвет сдвиг по x сдвиг по y радиус размытия

! Браузер Internet Explorer не поддерживает свойство text-shadow. Взамен используется свойство filter:Shadow.

QUOTES. Кавычки.

Устанавливает тип кавычек, который применяется в тексте документа. Добавление кавычек происходит автоматически для содержимого контейнера <q>.

Вид	HTML	Юникод	Описание
"	"	\0022	Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловых секунд.
'	'	\0027	Апостроф. Символ угловых минут, в латинице применяется для обозначения мягкого знака.
«	« или «	\00ab	Открывающая двойная угловая кавычка.
»	» или »	\00bb	Закрывающая двойная угловая кавычка.
‘	‘	\2018	Открывающая одинарная кавычка.
’	’	\2019	Закрывающая одинарная кавычка.
“	“	\201c	Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка.
”	”	\201d	Закрывающая двойная кавычка в англоязычных текстах.
„	„	\201e	Открывающая двойная кавычка. Применяется в русском языке.

q

{

quotes: "\00ab" "\00bb";

}

!

IE 6 и 7.

Браузер Safari не поддерживает свойство quotes.

DIRECTION. Настройка направления текста

Для изменения направления текста используется свойство direction.

rtl	Текст будет отображен справа налево.
Itr	Текст будет отображен слева направо (для западных языков).

.rightToLeft

{

direction: rtl;

}

Так же свойство direction можно использовать для порядка расположения колонок в таблице, позиции полосы прокрутки в блоке и положение последней висячей строки текстового блока при text-align:justify.

UNICODE-BIDI.

Ведите параметр unicode-bidi. Этот параметр используется для того, чтобы указать, как следует применять атрибут direction при условии, что на одной Web-странице встречается текст с разным направлением.

bidi-override	Чтобы изменить текущие настройки направления текста для браузера. Этот параметр необходим для правильного изменения направления текста.
embed	Чтобы включить текст с двойным направлением в текст с текущим направлением. Этот параметр эффективно выравнивает текст по левому (Itг) или правому (rtl) направлению, хотя пунктуация в конце текста.
normal	Чтобы использовать для встроенного текста с двумя направлениями установки браузера, заданные по умолчанию.

PAGE-BREAK-BEFORE. Установка разрыва страницы для печати

Добавляет разрыв страницы при печати документа перед заданным элементом.

always	Всегда добавляет разрыв страницы после элемента.
auto	Вставляет разрыв страницы при необходимости.
avoid	Запрещает разрыв страницы после элемента.
left	Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной.
right	Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.

<h3 style="page-break-before: always;">

!

IE до версии 7.0 включительно не поддерживает значения left, right.

Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.

PAGE-BREAK-AFTER. Установка разрыва страницы для печати

Добавляет разрыв страницы при печати документа после заданного элемента.

always	Всегда добавляет разрыв страницы после элемента.
auto	Вставляет разрыв страницы при необходимости.
avoid	Запрещает разрыв страницы после элемента.
left	Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной.
right	Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.

<h3 style="page-break-after: always;">

!

IE до версии 7.0 включительно не поддерживает значения left, right.

Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.

WHITE-SPACE. Управление свойствами пробелов

Многие браузеры заменяют несколько пробелов одним, если не использовался тег <рге>, указывающий браузеру, что текст уже отформатирован. С помощью CSS можно как запрещать, так и разрешать объединение пробелов.

normal	Текст в окне браузера выводится как обычно.
nowrap	Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой.
pre	Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML.
pre-line	В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap	В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.

p

{

white-space: pre;

}

.collapse

{

white-space: normal;

}

Задание 3.1 Увеличение отступа

Создайте html файл добавьте в него заголовок и присвойте стиль stretch. Добавьте на страницу следующие стили:

<style type="text/css">

.stretch {letter-spacing: 2em; }

</style>

Задание 3.2 Изменение интервал между словами

Создайте html файл добавьте в него заголовок и присвойте стиль stretch. Добавьте на страницу следующие стили:

<style type="text/css">

.title

{

word-spacing: 8px;

letter-spacing: 4px;

}

p

{

word-spacing:-8px;

}

p.copy

{

word-spacing: 4px;

letter-spacing: 1px;

}

</style>

Задание 3.3 Изменение интервал между строками

<style type="text/css">

.copy

{

font-size: 12px;

line-height: 2;

}

cite

{

font-size: 12px;

line-height: 14px;

}

</style>

Задание 3.4 Задание заглавных и строчных букв

Создайте html файл добавьте в него несколько параграфов.

Укажите значение вида букв. Можно использовать следующие значения :

• capitalize преобразует первую букву слова в заглавную;

• uppercase меняет все буквы на заглавные;

• lowercase понижает регистр всех букв в слове;

• none перекрывает все наследованные значения этого свойства и оставляет текст без изменений.

Добавьте на страницу следующие стили:

<style type="text/css">

body

{

font-size: 28pt;

}

.namellppercase

{

text-transform: uppercase;

}

.nameLowercase

{

text-transform: lowercase;

}

.nameCapitalize

{

text-transform: capitalize;

}

</style>

Задание 3.5 Задание выравнивание текста по горизонтали

---------------------------------------------------------------------------------------------------------------------------------

<style type="text/css">

.left

{

text-align: left;

}

.justify

{

text-align: justify;

}

.center

{

text-align: center;

}

.right

{

text-align: right;

}

</style>

Задание 3.6 Вертикальное выравнивание текста

---------------------------------------------------------------------------------------------------------------------------------

<style type="text/css">

.superscript

{

vertical-align: super;

font-size: 12px;

}

.baseline

{

vertical-align: baseline;

font-size: 12px;

}

.subscript

{

vertical-align: sub;

font-size: 12px;

}

.top

{

vertical-align: top;

font-size: 12px;

}

.middle

{

font-size: 12px;

vertical-align: middle;

}

.bottom

{

vertical-align: bottom;

font-size: 12px;

}

.texttop

{

vertical-align: texttop;

font-size: 12px;

}

.textbottom

{

vertical-align: text-bottom;

font-size: 12px;

}

.normal

{

font-weight: bold;

font-size: 24px;

}

</style>

Задание 3.7 Выделение абзацев в тексте

<style type="text/css">

p.copy

{

text-indent: 10%;

}

</style>

Задание 3.8 Задание цвета текста

---------------------------------------------------------------------------------------------------------------------------------

<style type="text/css">

h2

{

color: red;

}

form

{

color: #990000;

}

input

{

color: rgb(100%, 0%, 0%);

}

.сopy

{

color: rgb(102,102,102);

}

</style>

Задание 3.9 Украшение текста

---------------------------------------------------------------------------------------------------------------------------------

Создайте html файл добавьте в него несколько параграфов.

Чтобы указать стиль украшения, используйте следующие значения :

Добавьте на страницу следующие стили:

<style type="text/css">

em

{

text-decoration: underline;

}

p em

{

text-decoration: line-through;

}

p

{

text-decoration: overline;

}

</style>

Задание 3.10 Задание направления текста

---------------------------------------------------------------------------------------------------------------------------------

Добавьте на страницу следующие стили:

<style type="text/css">

.leftToRight

{

direction: ltr;

}

.rightToLeft

{

direction: rtl;

}

</style>

Задание 3.11 Задание разрыва страницы

<h3 style="page-break-before: always;">

Задание 3.12 Управление свойствами пробелов

<style type="text/css">

p

{

white-space: pre;

}

.collapse

{

white-space: normal;

}

</style>

--------------------------------------------------------------------------------------------------------------------------