Стили html для текста: Стиль текста в HTML

Стили текста — Справочник Web-языков

Материал из Справочник Web-языков

Перейти к: навигация, поиск

Содержание 1 <ABBR>…</ABBR> 2 <ACRONYM>…</ACRONYM> 3 <B>…</B> 4 <BIG>…</BIG> 5 <BLOCKQUOTE>…</BLOCKQUOTE> 6 <CITE>…</CITE> 7 <CODE>…</CODE> 8 <DFN>…</DFN> 9 <EM>…</EM> 10 <FONT>…</FONT> 11 <BASEFONT>…</BASEFONT> 12 <I>…</I> 13 <KBD>…</KBD> 14 <LINK>…</LINK> 15 <LISTING>…</LISTING> 16 <PRE>…</PRE> 17 <S>…</S> 18 <SAMP>…</SAMP> 19 <SMALL>…</SMALL> 20 <STRONG>…</STRONG> 21 <SUB>. ..</SUB> 22 <SUP>…</SUP> 23 <U>…</U> 24 <VAR>…</VAR> 25 Смотрите также

<ABBR>…</ABBR>

Сокращенная форма

Позволяет авторам явно показывать использование аббревиатур и акронимов.

<ACRONYM>…</ACRONYM>

Акроним. Используется для создания условных обозначений.

Атрибуты <ACRONYM>:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

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

<B>…</B>

Используется для выделения текста жирным шрифтом.

Атрибуты <B> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<BIG>…</BIG>

Задает отображение текста крупным шрифтом. Атрибуты <BIG> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 2.0

<BLOCKQUOTE>…</BLOCKQUOTE>

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

Атрибуты <BLOCKQUOTE>:

• lang=»Код языка»

Атрибуты <BLOCKQUOTE> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• DISABLED
• HIDEFOCUS
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Блочный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<CITE>…</CITE>

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

Атрибуты <CITE> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<CODE>…</CODE>

Рекомендуется использовать для фрагментов исходного текста, помещения на страницы примеров. IE и NN отображают моноширным шрифтом.

Атрибуты <CODE> в IE:

• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<DFN>…</DFN>

Указывает, что это является определением вложенного термина.

Атрибуты <DFN>:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег.

Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0

<EM>…</EM>

Выделяет текст терминов. IE и NN отображают его курсивом.

Атрибуты <EM> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<FONT>…</FONT>

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

Атрибуты <FONT>:

• color=»Цвет»
• face=»Имя шрифта»
• size=»Высота в пикселах»

Атрибуты <FONT> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»

Атрибуты <FONT> в NN:

• point-size=»Размер шрифта в пикселах»

Блочный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.1

<BASEFONT>…</BASEFONT>

Служит для установления стандартноло размера шрифта, гарнитуры и цвета текста в документе.

Атрибуты <BASEFONT>:

• size=»Размер шрифта»

Атрибуты <BASEFONT> в IE:

• color=»Цвет»
• face=»Имя шрифта»

Параметры, указанные в теге, действуют во всем документе, пока эти установки не будут перекрыты тегом <FONT>. После закрытия тега <FONT> характеристики <BASEFONT> вновь вступают в силу.

Одинарный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<I>…</I>

Используеся для выделения текста курсивом.

Атрибуты <I> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег.

Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<KBD>…</KBD>

Выводит текст моноширным шрифтом.

Атрибуты <KBD> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

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

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<LINK>…</LINK>

Устанавливает связь текущей страницы с другими файлами. Основное применение: обращение к ранее описаным стилям в отдельном файле. Вставляется между тегами <HEAD>

Атрибуты <LINK>:

• href=»Интернет-адрес назначения»
• rel=»Alternate|Appendix|Bookmark|Chapter |Contents|Copyright|Glossary|Help |Index|Next|Offline|Prev |Section|Shortcut Icon|Start|Stylesheet |Subsection|fontdef|stylesheet»
• type=»Тип данных MIME»

Атрибуты <LINK> в IE:

• rev=»Alternate|Appendix|Bookmark|Chapter |Contents|Copyright|Glossary|Help |Index|Next|Prev|Section |Start|Stylesheet |Subsection|»
• target=»Имя окна или фрейма|_blank|_parent|_search|_top»>

Пример:

<HEAD> 
.  . . 
<link rel="stylesheet" type="text/css" href="MyStyle.css"> 
. . . 
</HEAD>

Блочный одинарный тег. Обязательные атрибуты: href, задающий интернет-адрес назначения, и либо rel, указывющий, как отноститься документ с интернет-адресом href к текущей странице, либо rev, указывающий обратное отношение. Поддерживается IE начиная с 3.0 и NN начиная с 4.0

<LISTING>…</LISTING>

Выводит блок текста моноширным шрифтом. Текст выводится как он есть, со всеми пробелами и т.д.

Атрибуты <LISTING> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Весь ваш текст, как он выглядит в окне редактора

Блочный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0

<PRE>…</PRE>

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

Атрибуты <PRE>:

• lang=»Код языка»

Атрибуты <PRE> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»
• wrap=»soft|hard|off»

Атрибуты <PRE> в NN:

• cols=»Ширина в символах»
• WRAP

Блочный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<S>.

..</S>

Выводит текст зачеркнутым. Все тегами будет написано перечеркнутым шрифтом.

Атрибуты <S> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE и NN начиная с 3.0

<SAMP>…</SAMP>

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

Атрибуты <SAMP> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0

<SMALL>…</SMALL>

Задает отображение текста мелким шрифтом.

Атрибуты <SMALL> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 2.0

<STRONG>…</STRONG>

Применяется для выделения текста. IE и NN отображают такой текст жирным шрифтом.

Атрибуты <STRONG> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<SUB>…</SUB>

Отображает текст нижним индексом (подстрочный индекс).

Атрибуты <SUB> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

<SUP>…</SUP>

Отображает текст верхним индексом (надстрочный индекс).

Атрибуты <SUP> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 2.0

<U>…</U>

Выводит текст подчеркнутым.

Атрибуты <U> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE и NN начиная с 2.0

<VAR>…</VAR>

Используется для форматирования имен переменных и функций языков программирования. IE и NN выводят курсивом.

Атрибуты <U> в IE:

• accesskey=»Клавиша-ускоритель»
• contenteditable=»inherit|true|false»
• dir=»ltr|rtl»
• DISABLED
• HIDEFOCUS
• lang=»Код языка»
• language=»JScript|javascript|vbs|vbscript|XML|Код языка скрипта»
• tabindex=»Порядковый номер в последовательности»
• title=»Текст подсказки»

Встроенный парный тег. Обязательных атрибутов не имеет. Поддерживается IE начиная с 3.0 и NN начиная с 1.0

Смотрите также

• Алфавитный указатель атрибутов

Учебник HTML 5. Статья «Стили»

Списки

Цвета

МЕНЮ

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

---

К этой статье у вас уже есть четкое понимание, что язык гипертекстовой разметки используется, чтобы описать содержимое веб-страницы. Путешествуя по сети интернет, мы замечаем, что страницы выглядят по разному: цветовая гамма, шрифты, различный междустрочный интервал, фоновые изображения и даже анимация. Не откладывая в дальний ящик сразу хочу Вам объяснить, что на то как эти страницы будут выглядеть, влияют, используемые каскадные таблицы стилей (Cascading Style Sheets — CSS). В рамках учебника HTML мы с Вами поверхностно рассмотрим использование каскадных таблиц стилей, подробно изучить их после этого курса вы можете в разделе CSS учебник.

---

Что такое стиль? Стиль устанавливает внешний вид какого-либо элемента страницы, т.е. грубо говоря, это правило, которое сообщает браузеру как форматировать определенный элемент (например, измененить фон или цвет шрифта).

Каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style. Атрибут задает встроенный (inline) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента. В рамках изучения HTML мы рассмотрим только использование встроенного CSS.

Глобальный атрибут style имеет следующий синтаксис:

style = "property:value", где property это CSS свойство, а value его значение. 

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

style = "property:value; property:value; property:value" 

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

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

<!DOCTYPE html>
<html style = "text-align: center"> <!-- выравниваем текст по центру во всем документе --> 
	<head>
		<title>Пример использования глобального атрибута style</title>
	</head>
	<body style = "background-color: khaki"> <!-- задаем цвет заднего фона для элемента --> 
		<p style = "color: brown; font-size: 26px">А.С. Пушкин</p> <!-- задаем цвет текста коричневый, размер шрифта 26 пикселей --> 
		<pre style = "font-family: courier"> <!-- задаем шрифт для элемента --> 
			Я помню чудное мгновенье:
			Передо мной явилась ты, 
			Как мимолетное виденье, 
			Как гений чистой красоты.
		</pre>
	</body>
</html>

Давайте разберем, какие стили к чему были добавлены:

1. Для тега <html> установили выравнивание текста по центру, для этого мы использовали CSS свойство text-align со значением center. Обращаю внимание, что выравнивание по центру распостраняется на все элементы в документе, аналогичный эффект можно было достичь задав этот стиль для элемента <body>. Изменяя значения свойства text-align вы можете также выровнять текст как по левому (left) и правому (right) краю, так и по ширине (justify).
2. Для всего видимого содержимого (тег <body>) с использованием CSS свойства background-color мы задали цвет заднего фона khaki. Цвет khaki является одним из предопределенных цветов (стандартное имя цвета). Более подробную информацию по использованию цветов вы получите в следующей статье «HTML цвета».
3. Для абзаца (тег <p>), который содержит имя автора стихотворения, мы применили два CSS свойства, первое color задает цвет текста (стандартное имя цвета brown — коричневый), второе font-size устанавливает размер текста. Мы установили размер текста равный 26 пикселям. Применение пикселей широко распространено при создании веб-страниц, так как эти единицы измерения обеспечивают совместимые параметры размера шрифта на различных типах мониторов и не зависят от настроек браузера. Пиксель соответствует одному пикселю, который указан в разрешении экрана пользователя.
4. Для элемента <pre>, который определяет предварительно отформатированный текст, мы, с использованием CSS свойства font-family установили шрифт содержимого — Courier (компьютерный шрифт, относящийся к классу моноширинных, все знаки (кегельные площадки), которого имеют одинаковую ширину).

Рис 16a Пример использования встроенных стилей.

Не расстраивайтесь если Вам на данном этапе, не понятны какие-то моменты, мы более подробно рассмотрим данный материал в следующих статьях и при изучении CSS. Главное не бросать начатое и как говорил известный в наше время экспонат: «Учиться, учиться и ещё раз учиться».

---

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив с текстовым файлом:


• Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 10.

Подсказка: в этом примере используются следующие цвета: white (белый), khaki (хаки), gray (серый). Для текста стихотворения используется шрифт Verdana.

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

Списки

Цвета

МЕНЮ

Стили абзацев и символов

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

Если изменить форматирование стиля, текст, к которому он был применен, будет обновлен в соответствии с новым форматом.

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

Видео с инструкцией по использованию стилей абзацев см. по адресу www.adobe.com/go/lrvid4277_id_ru. Видео с инструкцией по использованию стилей текста см. по адресу www.adobe.com/go/vid0076_ru.

Томас Силкяер (Thomas Silkjaer) приводит примеры использования стилей в статье: Свободный шаблон стиля InDesign.

Стили «[Основной абзац]»

По умолчанию каждый вновь созданный документ содержит стиль «[Основной абзац]», который автоматически применяется к вводимому тексту. Этот стиль можно изменить, но переименовать или удалить нельзя. Стили, созданные пользователем, можно переименовывать и удалять. Можно также выбрать другой стиль в качестве стиля, применяемого к тексту по умолчанию.

Атрибуты стилей символов

В отличие от стилей абзацев, стили символов содержат не все атрибуты форматирования выделенного текста. Вместо этого при создании стиля символов InDesign включает в него только те атрибуты, которые отличаются от форматирования выделенного текста. Таким образом, после применения к тексту созданного стиля символов изменятся только некоторые атрибуты символов (например, гарнитура и размер шрифта), а все остальные останутся без изменения. Добавить в стиль другие атрибуты можно в процессе изменения стиля.

Следующий стиль

Стили могут применяться автоматически в процессе ввода текста. Например, если макет документа требует использования стиля «Основной текст» после стиля заголовка «Заголовок 1», то для стиля «Заголовок 1» в качестве параметра «Следующий стиль» можно указать значение «Основной текст». После ввода абзаца, к которому применяется стиль «Заголовок 1», нажмите клавишу Enter или Return. К следующему вводимому абзацу будет применен стиль «Основной текст».

Если стиль применяется через контекстное меню к нескольким абзацам, то к первому абзацу будет применен родительский стиль, а к остальным — стиль, определенный как следующий (см. раздел Применение стилей).

Чтобы назначить следующий стиль, выберите его в меню «Следующий стиль» при создании или редактировании стиля.

Джефф Уитчел (Jeff Witchel) представляет видеоруководство по использованию функции «Следующий стиль»: Использование функции «Следующий стиль».

Палитра «Стили символов» предназначена для создания, переименования и применения стилей символов к тексту в пределах абзаца, а палитра «Стили абзацев» — для создания, переименования и применения стилей к целым абзацам. Стили сохраняются вместе с документом и отображаются на палитре при каждом его открытии.

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

Открытие палитры «Стили абзацев»

1. Выберите меню «Текст» > «Стили абзацев» или откройте вкладку «Стили абзацев», которая по умолчанию отображается в правой части окна приложения.

Открытие палитры «Стили символов»

1. Выберите меню «Текст» > «Стили символов» или откройте вкладку «Стили символов», расположенную в правой части окна приложения.

Если необходимые стили уже существуют в другом документе, созданном при помощи InDesign, InCopy или другого текстового редактора, их можно импортировать и использовать в текущем документе. При работе с отдельным материалом можно также определять стили символов и абзацев в InCopy.

Определение стилей абзацев или символов

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

   Если на палитре стилей выбрана группа, новый стиль войдет в состав этой группы.

2. Выберите в меню палитры «Стили абзацев» пункт «Новый стиль абзаца» или в меню палитры «Стили символов» пункт «Новый стиль символов».

3. Введите в поле «Имя стиля» имя нового стиля.

4. В поле «На основе» выберите стиль, на основе которого будет создан новый стиль.

   Параметр «На основе» позволяет связать стили друг с другом, в результате чего все изменения, вносимые в один стиль, распространятся на все стили, которые на нем основаны. По умолчанию все новые стили создаются на основе стиля «[Без стиля]» для стилей абзацев, «[Нет]» для стилей символов или стиля текста, выделенного в данный момент.

5. В поле «Следующий стиль» (только для палитры «Стили абзацев») укажите стиль, который будет применяться после текущего после нажатия клавиши Enter или Return.

6. Чтобы добавить комбинацию клавиш, поместите точку ввода в поле «Комбинация клавиш» и убедитесь, что горит индикатор Num Lock. Затем, удерживая нажатой любую комбинацию клавиш Shift, Alt и Ctrl (Windows) или Shift, Option и Command (Mac OS), нажмите необходимую клавишу на цифровой клавишной панели. При назначении комбинаций клавиш для стилей можно использовать только клавиши дополнительной цифровой клавишной панели. Если ваша клавиатура не имеет клавиши Num Lock, вы не сможете использовать горячие клавиши для стилей.

7. Чтобы применить новый стиль к выделенному тексту, выберите команду «Применить стиль к выделенному фрагменту».

8. Чтобы указать атрибуты форматирования, слева выберите категорию (например, «Основные атрибуты символов») и укажите атрибуты, которые необходимо добавить к стилю.

   Чтобы при задании параметра «Цвет символов» в диалоговом окне «Параметры стиля символов» создать новый цвет, дважды нажмите поле заливки или обводки.

9. Для стилей символов неуказанные атрибуты не учитываются. Если применить такой стиль к тексту, форматирование стиля абзацев, соответствующее данному атрибуту, останется без изменений. Удалить параметры атрибутов стиля символов можно следующим образом.

   • В меню настроек выберите («Игнорировать»).

   • В текстовом поле удалите текст параметра.

   • Щелкайте флажок, пока не отобразится маленький квадрат (Windows) или дефис (-) (Mac OS).

   • Для указания цвета символов выберите образец цвета, удерживая нажатой клавишу Ctrl (Windows) или Command (Mac OS).

10. После завершения выбора атрибутов форматирования нажмите кнопку «ОК».

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

Создание одного стиля символов или абзацев на основе другого

Многие документы предполагают использование иерархий стилей, имеющих одни и те же атрибуты. Например, для заголовков и подзаголовков часто используется один и тот же шрифт. Похожие стили можно связать друг с другом, создав базовый (родительский) стиль. При изменении родительского стиля дочерний стиль также изменится. В свою очередь, изменение дочернего стиля делает его отличным от родительского.

Чтобы создать стиль, почти полностью идентичный другому, но без связи родитель-потомок, воспользуйтесь командой «Создать дубликат стиля», а затем отредактируйте копию.

1. Создайте новый стиль.

2. В диалоговом окне «Новый стиль абзаца» или «Новый стиль символа» выберите родительский стиль в поле «На основе». Создаваемый стиль становится дочерним.

   По умолчанию все новые стили создаются на основе стиля «[Без стиля]», «[Нет]» или стиля, который имеет текст, выделенный в данный момент.

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

Чтобы отменить изменения параметров форматирования дочернего стиля, нажмите кнопку «Восстановить базовые». При этом для дочернего стиля будут восстановлены все параметры форматирования того стиля, на основе которого он был создан. Затем можно заново внести необходимые изменения. Аналогичным образом при изменении значения параметра «На основе» дочерний стиль обновляется в соответствии с параметрами нового родительского стиля.

Импорт стилей из других документов

В текущий документ можно импортировать стили абзацев и символов из другого документа InDesign (любой версии). Во время импорта можно определить, какие стили загружены, а также то, что произойдет с загруженными стилями, имеющими идентичные имена в текущем документе. Кроме того, поддерживается импорт стилей из документов InCopy.

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

При импорте стилей в связанное содержимое новые стили добавляются в документ InDesign в момент обновления содержимого, а при возникновении конфликтов имен более высоким приоритетом обладают стили InDesign.

1. На палитре «Стили символов» или «Стили абзацев» выполните одно из следующих действий:

   • В меню палитры «Стили» выберите «Загрузить стили символов» или «Загрузить стили абзацев».

   • Выберите команду «Загрузить все стили текста» в меню палитры «Стили», чтобы загрузить и абзацные, и символьные стили.

2. Дважды нажмите документ InDesign, содержащий импортируемые стили.

3. В диалоговом окне «Загрузить стили» установите флажки для стилей, которые необходимо импортировать. При наличии совпадающих имен стилей выберите для параметра «Конфликт с существующим стилем» одно из следующих значений, а затем нажмите кнопку «ОК».

   Использовать определение входного стиля

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

   Автоматическое переименование

   Переименовывает загружаемый стиль. Например, если в обоих документах присутствует стиль «Подзаголовок», то загружаемому стилю присваивается имя «Подзаголовок (копия)».

Обзор тегов экспорта

Используйте теги экспорта для того, чтобы определить, каким образом текст со стилями InDesign будет размечен в файле HTML, EPUB или в файле PDF с тегами.

Можно также определить имена классов CSS, которые должны быть добавлены в экспортируемое содержимое. При экспорте EPUB/HTML классы CSS позволяют определить незначительные различия в стилях. Не требуется вводить имя класса. InDesign автоматически создаст его на основе имени стиля.

Теги экспорта недоступны для предварительного просмотра в макете InDesign, поскольку они предназначаются только для экспортируемого файла EPUB, HTML или PDF.

С помощью параметра «Редактировать все теги экспорта» можно эффективно просматривать и изменять схемы преобразования в одном диалоговом окне.

Определение схемы преобразования стилей в теги

1. Чтобы выбрать стиль для преобразования, откройте диалоговое окно «Параметры стиля абзацев» или «Параметры стиля символов» или «Параметры стиля объектов».

2. Нажмите «Теги экспорта» на панели слева и выполните одно из следующих действий:

   • Выберите тег для преобразования выходных данных EPUB и HTML.

   • Укажите класс для преобразования выходных данных EPUB и HTML. Имена классов используются для создания определений стилей для тегов по умолчанию.

   • Чтобы включить данный стиль в CSS, установите флажок «Включить CSS». Если этот флажок не установлен, класс CSS для этого стиля создан не будет. При наличии нескольких стилей, которым назначен один класс, во время экспорта отобразится сообщение об ошибке или предупреждение. Этот параметр доступен только в InDesign CC.

   • Выберите тег для преобразования выходных данных PDF. Этот параметр доступен только для стилей абзацев.

Редактирование всех тегов экспорта

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

1. Выберите «Редактировать все теги экспорта» в меню палитры стилей абзацев, символов или объектов.

2. Нажмите «EPUB и HTML» или «PDF».

3. Нажмите тег, соответствующий стилю. Он преобразуется и добавится в список; выберите новое значение.

При импорте документов Microsoft Word в программу InDesign или InCopy можно задать перевод каждого стиля Word в соответствующий стиль InDesign или InCopy. Это позволяет указать, какие из стилей используются для форматирования импортированного текста. Каждый из импортируемых стилей Word обозначается значком диска , пока стиль не будет отредактирован в InDesign или InCopy.

1. Выполните одно из следующих действий:

   • Чтобы добавить документ Word к существующему тексту в InDesign или InCopy, выберите «Файл» > «Поместить». Выберите «Показать параметры импорта», а затем дважды нажмите документ Word.

   • Чтобы открыть документ Word в отдельном документе InCopy, запустите InCopy, выберите «Файл» > «Открыть», а затем дважды нажмите файл Word.

2. Выберите команду «Сохранить стили и форматирование текста и таблиц».

3. Выберите команду «Импорт заказного стиля», а затем нажмите кнопку «Преобразование стилей».

4. В диалоговом окне «Преобразование стилей» выберите стиль Word, а затем — пункт меню в разделе «Стиль InCopy». Можно выбрать следующие параметры.

   • Если имена стилей не конфликтуют, выберите «Новый стиль абзаца», «Новый стиль символа» или существующий стиль InCopy.

   • При возникновении конфликта имен стилей выберите «Переопределить стиль InCopy», чтобы отформатировать импортируемый текст с использованием стиля Word. Чтобы отформатировать импортируемый текст с использованием существующего стиля InCopy, выберите этот стиль. Выберите команду «Автоматическое переименование», чтобы переименовать стиль Word.

5. Нажмите кнопку «ОК», чтобы закрыть диалоговое окно «Преобразование стилей», а затем снова нажмите «ОК», чтобы начать импорт документа.

По умолчанию применение стиля абзацев не удаляет существующее форматирование символов или стили символов, примененные к фрагментам абзаца, однако такая возможность существует. Если выделенный текст использует стиль символов или абзацев в сочетании с дополнительным форматированием, не являющимся частью примененного стиля, рядом с текущим стилем абзацев на палитре стилей появляется знак «плюс» (+). Такое дополнительное форматирование называется дополнительной настройкой или локальным форматированием.

Стили символов удаляют или переопределяют атрибуты символов существующего текста, если эти атрибуты определены стилем.

Применение стиля символов

1. Выберите символы, к которым необходимо применить стиль.

2. Выполните одно из следующих действий:

   • Нажмите имя стиля символов на палитре «Стили символов».

   • Выберите имя стиля символов в раскрывающемся списке на панели «Управление».

   • Нажмите соответствующую стилю комбинацию клавиш (убедитесь, что горит индикатор Num Lock).

Применение стиля абзацев

1. Нажмите абзац или выделите абзацы, к которым необходимо применить форматирование (целиком или частично).

2. Выполните одно из следующих действий:

   • Нажмите имя стиля абзацев на палитре «Стили абзацев».

   • Выберите имя стиля абзацев в раскрывающемся списке на панели «Управление».

   • Нажмите соответствующую стилю комбинацию клавиш (убедитесь, что горит индикатор Num Lock).

3. Если в тексте присутствует нежелательное форматирование, выберите команду «Отменить дополнительную настройку» на палитре «Стили абзацев».

Применение последовательности стилей к нескольким абзацам

Параметр «Следующий стиль» задает стиль, который будет автоматически применен при нажатии клавиши Enter или Return после применения определенного стиля. Он также позволяет быстро применять различные стили к нескольким абзацам.

Предположим, что в газетной статье используются три стиля: «Заголовок», «Автор» и «Основной текст». Для стиля «Заголовок» параметр «Следующий стиль» имеет значение «Автор», для стиля «Автор» — значение «Основной текст», а для стиля «Основной текст» — «[Тот же стиль]». Когда выделяется вся статья, включая заголовок, имя автора и абзацы текста, и с помощью специальной команды «Следующий стиль» в контекстном меню применяется стиль «Заголовок», первый абзац статьи будет отформатирован с использованием стиля «Заголовок», второй абзац — стиля «Автор», а все остальные абзацы — с использованием стиля «Основной текст».

Before and after applying a style with Next Style.

1. Выделите абзацы, к которым будут применены стили.

2. На палитре «Стили абзацев» нажмите родительский стиль правой кнопкой мыши (Windows) или удерживая нажатой клавишу Control (Mac OS), после чего выберите команду «Применить [имя стиля], затем следующий стиль».

Контекстное меню также позволяет удалить дополнительные настройки параметров форматирования и стили символов (если они содержатся в тексте).

Одним из преимуществ стилей является возможность изменить форматирование всего текста, к которому применен стиль, путем изменения его определения.

Однако при редактировании стилей в содержимом InCopy, связанном с документом InDesign, при обновлении связанного содержимого изменения будут переопределены.

Редактирование стиля с помощью диалогового окна

1. Выполните одно из следующих действий:

   • Чтобы не применять стиль к выделенному тексту, щелкните его на палитре стилей правой кнопкой мыши (Windows) или кнопкой мыши при нажатой клавише Control (Mac OS), а затем выберите «Изменить [имя стиля]».

   • На палитре стилей дважды нажмите стиль или выделите его и выберите в меню палитры команду «Параметры стиля». При этом стиль будет применен к выделенному тексту или текстовому фрейму или, если ничего не выделено, будет выбран в качестве стиля по умолчанию, применяемого для ввода текста во вновь созданные фреймы.

2. Выберите в диалоговом окне необходимые параметры, а затем нажмите кнопку «ОК».

Переопределение стиля по выделенному тексту

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

Однако при переопределении стилей в содержимом InCopy, связанном с документом InDesign, изменения будут потеряны при обновлении связанного содержимого.

1. С помощью инструмента «Текст»  выделите текст со стилем, который необходимо переопределить.

2. Внесите необходимые изменения в атрибуты абзацев или символов.

3. Выберите команду «Переопределить стиль» в меню палитры «Стили».

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

1. Выберите имя стиля на палитре «Стили».

2. Выполните одно из следующих действий:

   • В меню палитры выберите команду «Удалить стиль» или нажмите значок «Удалить»  в нижней части палитры.

   • Нажмите стиль правой кнопкой мыши (Windows) или кнопкой мыши при нажатой клавише Control (Mac OS), а затем выберите команду «Удалить стиль». Данный метод особенно удобен при удалении стиля без его применения к тексту.

3. В диалоговом окне «Удалить стиль абзаца» выберите стиль для замены.

   Чтобы сохранить форматирование текста, к которому применен удаляемый стиль, при выборе значения «[Без стиля]» для замены стиля абзацев или значения «[Без стиля]» для замены стиля символов выберите параметр «Сохранить форматирование». При этом форматирование текста будет сохранено, но оно больше не будет связано с определенным стилем.

4. Нажмите кнопку «ОК».

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

При применении стиля абзацев все стили символов и другие предыдущие параметры форматирования остаются без изменений. После применения стиля можно выполнить дополнительную настройку любого из его параметров, применив форматирование, не являющееся частью стиля. Форматирование, не являющееся частью стиля, примененного к тексту, называется дополнительной настройкой или локальным форматированием. При выделении текста, для которого выполнена дополнительная настройка, рядом с именем стиля появляется значок «плюс» (+). Для стилей символов дополнительная настройка отображается только в том случае, если примененный атрибут является частью стиля. Например, если для стиля символов изменен только цвет текста, то применение другого размера шрифта дополнительной настройкой не считается.

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

Если рядом с именем стиля отображается значок «плюс» (+), подведите к нему курсор мыши, чтобы получить описание атрибутов дополнительной настройки.

Сохранение или удаление дополнительных настроек при применении стилей абзацев

• Чтобы применить стиль абзацев с сохранением стилей символов, но при этом удалить дополнительные настройки, при выборе имени стиля на палитре «Стили абзацев» удерживайте нажатой клавишу Alt (Windows) или Option (Mac OS).
• Чтобы применить стиль абзацев и удалить стили символов вместе с дополнительными настройками, при выборе имени стиля на палитре «Стили абзацев» удерживайте нажатыми клавиши Alt+Shift (Windows) или Option+Shift (Mac OS).

На палитре «Стили абзацев» нажмите стиль правой кнопкой мыши (Windows) или кнопкой мыши при нажатой клавише Control (Mac OS), а затем выберите необходимую команду в контекстном меню. Это позволяет при применении стиля отменить дополнительные настройки, стили символов или и то, и другое.

Выделение настроек стилей символов и абзацев

Чтобы отобразить все дополнительные настройки, примененные к абзацу или стилю символов в документе, сделайте следующее:

1. Откройте панель стилей абзацев или символов.

2. Выполните одно из следующих действий:

   • Нажмите на значок средства выделения настроек стилей .
   • В меню панели нажмите «Переключить средство выделения настроек стилей».

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

Для быстрого доступа к средству выделения настроек стиля, его можно связать с комбинацией клавиш. Подробная информация представлена в разделе Использование наборов комбинаций клавиш.

Отмена дополнительных настроек стиля абзаца

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

2. На палитре «Стили абзацев» выполните одно из следующих действий:

   • Чтобы удалить форматирование абзацев и символов, нажмите значок «Отменить дополнительную настройку»  или выберите «Отменить дополнительную настройку» на палитре «Стили абзацев».

   • Чтобы удалить дополнительные настройки стилей шрифта, сохранив дополнительные настройки форматирования абзацев, нажмите значок «Отменить изменения», удерживая при этом нажатой клавишу Ctrl (Windows) или Command (Mac OS).

   • Чтобы удалить дополнительные настройки абзацев, сохранив дополнительные настройки символов, удерживайте нажатыми Shift+Ctrl (Windows) или Shift+Command (Mac OS).

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

   Отмена дополнительных настроек не приводит к удалению форматирования стилей символов. Для удаления форматирования стиля символов выделите содержащий его текст, а затем выберите на палитре «Стили символов» значение «[Без стиля]».

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

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

1. Выделите текст, связанный со стилем, связь с которым необходимо отменить.

2. Выберите команду «Отменить связь со стилем» в меню палитры «Стили».

Если в этот момент текст не выделен, то вновь вводимый текст будет использовать то же форматирование, что и выбранный стиль, но при этом не будет с ним связан.

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

При преобразовании маркеров в материале InCopy, связанном с макетом InDesign, изменения могут быть переопределены при обновлении содержимого в InDesign.

1. На палитре «Стили абзацев» выберите стиль, содержащий маркеры или нумерацию.

2. В меню палитры «Стили абзацев» выберите команду «Преобразовать маркеры и нумерацию [стиль] в текст».

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

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

Чтобы найти экземпляры заданного стиля и заменить их другим, воспользуйтесь диалоговым окном «Найти/Заменить».

1. Выберите меню «Редактирование» > «Найти/Заменить».

2. В поле «Зона поиска» выберите «Документ», чтобы изменить стиль по всему документу.

3. Оставьте поля «Найти текст» и «Заменить на» пустыми. Если в нижней части диалогового окна отсутствуют поля «Найти формат» и «Изменить формат», нажмите кнопку Дополнительные параметры.

4. Нажмите поле «Найти формат», чтобы отобразить диалоговое окно «Найти параметры формата». В группе «Параметры стиля» выберите искомый стиль символов или абзацев и нажмите кнопку «ОК».

5. Нажмите поле «Изменить формат», чтобы отобразить диалоговое окно «Заменить на параметры формата». В группе «Параметры стиля» выберите стиль символов или абзацев, на который будет заменен найденный, а затем нажмите кнопку «ОК».

6. Нажмите кнопку «Найти», а затем замените стиль с помощью кнопок «Заменить», «Заменить/Найти» или «Заменить все».

Справки по другим продуктам

• Группирование стилей
• Создание вложенных стилей
• Дублирование стилей и групп стилей
• Добавление (импорт) текста
• Вставка текста
• Использование функции «Быстрое применение»
• Группирование стилей
• Создание стиля абзаца для списков со сквозной нумерацией
• Поиск и замена текста
• Поиск и замена шрифтов

Стили применяемые для оформления текста.

 

 

К тексту, расположенному в тэге <p>, можно применить следующие типы свойств для его оформления:

—font –family: – свойство используется для задания гарнитуры шрифта
список наиболее распространенных шрифтов, которые установлены у большинства пользователей любой операционной системы:

• Arial;
• Arial Black;
• Courier New;
• Comic Sans MS;
• Tahoma;
• Times New Roman;
• Verdana.

— font-style: — выбор стиля шрифта;
Это свойство может принимать 3 значения: normal (обычное начертание), italic (курсивное) и oblique (наклонное), причем два последних на практике чаще всего обозначают одно и то же, поскольку если для гарнитур типа антиквы, как правило, используется только курсивный вариант, а для гротеска – наклонный.

— font-weight: вес шрифта
 Свойство font-weight чаще всего применяется со значениями normal (обычный) и bold (полужирный). Как обычно, свойство CSS имеет большую гибкость по сравнению со средствами HTML. Прежде всего – это возможность изменять вес шрифта относительно унаследованного, для чего предусмотрены значения bolder и lighter, делающие шрифт жирнее или тоньше соответственно. Другая особенность – указание веса шрифта при помощи числового значения от 100 до 900 с шагом 100. При этом за нормальное начертание принимается 400, а за полужирное – 700.

—text-indent: отступ первой строки текста в блоке;
Начнем с отступов – свойства text-indent. Оно определяет отступ первой строки теста в блоке. Выражаясь более точно, оно определяет отступ первого блока, который входит в первую строку группы линейных блоков, образующих данный структурный блок. При этом смещение происходит относительно левого (или правого при расположении текста справа налево) края линейного блока.

В качестве значения для text-indent может указываться либо определенный размер, либо значение в процентах. Во втором случае результат вычисляется браузером относительно ширины содержащего блока. Применительно к абзацу типичное смещение может составлять величину в 2 или 3 символа:
p {text-indent: 2.5em;}
Поскольку исторически сложилось так, что браузеры выделяют абзацы не красной строкой, а интервалом, то в случае использования отступов было бы логично этот интервал убрать. Делается это путем назначения внешним полям нулевой величины:
p {text-indent: 2.5em; margin-top: 0; margin-bottom 0;}

—text-align: выравнивание текста;
свойство, которое применяется едва ли не чаще всех других, а именно – горизонтальное выравнивание текста, позволяет выровнять строковое содержимое блока:
p {text-align: both;}
В данном случае мы создали правило, по которому содержимое абзацев будет выравниваться по ширине (т.е. по обоим краям). Разумеется, можно выравнивать и по одной из сторон – левой (left) или правой (right), а так же по центру (center):

—text-decoration: оформление текста;
свойство может иметь значение none, принятое по умолчанию для большинства элементов (кроме ссылок), либо одно или несколько из следующих возможных значений:

• underline. Подчеркнутый текст;
• overline. «Подчеркнутый сверху», т.е. линия располагается над текстом. Это значение не поддерживается MSIE 4 и Netscape 4;
• line-through. «Зачеркнутый», т.е. линия перечеркивает текст;
• blink. Текст мигает, т.е. становится то видимым, то невидимым. Это значение не поддерживается MSIE.

—text-transform:  трансформация текста;
специальное свойство, отвечающее за преобразование регистра символов – text-transform. Оно может иметь такие значения, как uppercase, lowercase и capitalize. Первые два значения назначают преобразование символов в верхний и в нижний регистр соответственно, а последнее – делает первые буквы слов прописными, не влияя на остальные. Наконец, еще одно значение, none, никак не влияет на текст и является принятым по умолчанию.

—word-spacing: установка пробела между слов; 
Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима. Аргумент normal устанавливает интервал между словами как обычно.

—letter- spacing: расстояние между буквами
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex). Аргумент normal задает интервал между символами как обычно.

— font-size: размер шрифта;
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задают размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения этого параметра у родителя элемента.

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Относительный размер шрифта задается аргументами larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются

— font-variant : установка всего текста заглавными буквами;
Определяет, как нужно представлять строчные буквы — делать их все прописными уменьшенного размера или оставить без изменений. Такой способ изменения символов называется капителью.

Значение normal не изменяет регистр символов, оставляя его по умолчанию. Аргумент small-caps модифицирует все строчные символы как заглавные уменьшенного размера. 

 

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

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

---

Стиль этого текста изменен при помощи свойств форматирования текста. В заголовке используются свойства text-align, text-transform и color. У параграфа заданы отступы, выравнивание и расстояние между символами.

---

Цвет текста

Свойство color используется для определения цвета текста.

Цвет можно задать как

• имя цвета — например, «red»,
• HEX значение — например, «#ff0000»,
• RGB значение — например, «rgb(255,0,0)»,
• HSL значение — например, «hsl(0,100%,50%)»,

Цвет текста страницы по умолчанию определяется в селекторе body.

body {
  color: blue;
}
h2 {
  color: green;
}

Цвет текста и фона

В следующем примере мы определяем цвет текста при помощи свойства color и цвет фона при помощи свойства background-color:

body {
  background-color: lightgrey;
  color: blue;
}
h2 {
  background-color: black;
  color: white;
}
div {
  background-color: blue;
  color: white;
}

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

Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.

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

Свойство text-transform позволяет изменить регистр букв текста:

• text-transform: capitalize — переводит первые буквы всех слов в верхний регистр.
• text-transform: uppercase — переводит все буквы в верхний регистр.
• text-transform: lowercase — переводит все буквы в нижний регистр.
• text-transform: none — попробуйте сами это значение.

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

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

К этому разделу относятся следующие свойства:

• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

Выравнивание текста

Свойство text-align выравнивает текст внутри элемента по горизонтали.

Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

В следующем примере текст выравнивается по центру, по левому краю и по правому краю. Выравнивание по левому краю устанавливается по умолчанию, если направление текста слева направо. Если направление текста справа налево, то по умолчанию устанавливается выравнивание по правому краю.

h2 {
  text-align: center;
}
h3 {
  text-align: left;
}
h4 {
  text-align: right;
}

Когда свойству text-align установлено значение justify, то строки растягиваются таким образом, чтобы их ширина была одинаковой (как в газетах и журналах):

div {
  text-align: justify;
}

Свойство text-align-last определяет выравнивание последней строки текста.

p.a {
  text-align-last: right;
}
p.b {
  text-align-last: center;
}
p.c {
  text-align-last: justify;
}

Направление текста

Свойства direction и unicode-bidi используются для изменения направления текста элемента:

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

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

Свойство vertical-align определяет вертикальное выравнивание элемента.

Определим вертикальное выравнивание изображения в тексте:

img.a {
  vertical-align: baseline;
}
img.b {
  vertical-align: text-top;
}
img.c {
  vertical-align: text-bottom;
}
img.d {
  vertical-align: sub;
}
img.e {
  vertical-align: super;
}

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

К свойствам декоративного оформления текста относятся

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

---

Добавление декоративной линии

Для добавления декоративной линии к тексту используется свойство text-decoration-line. Оно может принимать следующие значения:

• overline — помещает горизонтальную линию над текстом
• line-through — помещает горизонтальную линию через текст, создавая эффект перечеркивания
• underline — помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст — ссылка.

Совет: Вы можете комбинировать несколько значений, например, одновременно можно использовать значения overline и underline для определения нижнего и верхнего подчеркивания текста.

h2 {
  text-decoration-line: overline;
}
h3 {
  text-decoration-line: line-through;
}
h4 {
  text-decoration-line: underline;
}
p {
  text-decoration-line: overline underline;
}

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

Определение цвета декоративной линии

Чтобы определить цвет декоративной линии используется свойство text-decoration-color.

h2 {
  text-decoration-line: overline;
  text-decoration-color: red;
}
h3 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}
h4 {
  text-decoration-line: underline;
  text-decoration-color: green;
}
p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Определение стиля декоративной линии

Чтобы определить стиль декоративной линии используется свойство text-decoration-style.

h2 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
h3 {
  text-decoration-line: underline;
  text-decoration-style: double;
}
h4 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
p. ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Определение толщины декоративной линии

Чтобы определить толщину декоративной линии используется свойство text-decoration-thickness.

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}
h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}
h4 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}
p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Короткая форма записи

Свойство text-decoration позволяет объединить следующие свойства:

• text-decoration-line (обязательно)
• text-decoration-color
• text-decoration-style
• text-decoration-thickness

h2 {
  text-decoration: underline;
}
h3 {
  text-decoration: underline red;
}
h4 {
  text-decoration: underline red double;
}
p {
  text-decoration: underline red double 5px;
}

Совет: Все ссылки в HTML по умолчанию имеют подчеркивание. Иногда можно увидеть ссылки, у которых нет подчеркивания. Чтобы убрать подчеркивание у ссылки, используют свойство text-decoration: none;.

a {
  text-decoration: none;
}

Разбивка текста

В этом разделе вы узнаете о следующих свойства, позволяющих форматировать текст:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

---

Текстовый отступ

Свойство text-indent используется, чтобы определить отступ первой строки текстового абзаца.

Значением может быть число в любых единицах измерения:

p {
  text-indent: 50px;
}

Расстояние между символами

Свойство letter-spacing используется, чтобы определить расстояние между символами в тексте.

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

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

h2 {
  letter-spacing: 5px;
}
h3 {
  letter-spacing: -2px;
}

Высота строки

Свойство line-height используется, чтобы определить расстояние между строками, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, «2» означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal

p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

Расстояние между словами

Свойство word-spacing используется, чтобы определить расстояние между словами в тексте.

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

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

p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Пробельные символы

Свойство white-space определяет, как обрабатываются пробельные символы внутри элемента. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один.

Возможные значения:

• normal

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

• nowrap

  Последовательность пробельных символов сворачивается в один пробел. Текст никогда не переносится на новую строку и выводится в одну линию. Перенос происходит только по тегу <br>.

• pre

  Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Действует аналогично тегу <pre>.

• pre-line

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

• pre-wrap

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

• inherit

  Значение наследуется от родительского элемента.

• initial

  Устанавливает значение по умолчанию.

p {
  white-space: nowrap;
}

Тень у текста

Свойство text-shadow добавляет к тексту тень.

При самом простом использовании определяется только горизонтальная (2px) и вертикальная (2px) тень:

Text shadow effect!

h2 {
  text-shadow: 2px 2px;
}

Можно добавить цвет:

Text shadow effect!

h2 {
  text-shadow: 2px 2px red;
}

Также, можно добавить размытие:

Text shadow effect!

h2 {
  text-shadow: 2px 2px 5px red;
}

Еще примеры эффекта тени у текста

Text shadow effect!

h2 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Text shadow effect!

h2 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

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

Свойство	Описание
color	Определяет цвет текста
letter-spacing	Устанавливает расстояние между символами в тексте
line-height	Устанавливает межстрочный интервал текста
text-align	Устанавливает горизонтальное выравнивание текста
text-align-last	Устанавливает выравнивание последней строки текста
text-decoration	Добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом в одной декларации
text-decoration-color	Устанавливает цвет линии, которая добавляется через свойство text-decoration
text-decoration-line	Устанавливает тип оформления текста — подчеркивание, перечеркивание, линия над текстом
text-decoration-style	Устанавливает стиль декоративной линии оформления текста
text-intend	Устанавливает величину отступа первой строки текстового блока
text-transform	Управляет преобразованием текста элемента в заглавные или прописные символы
verical-align	Выравнивает элемент по вертикали относительно своего родителя или окружающего текста
white-space	Устанавливает, как отображать пробелы между словами
word-spacing	Устанавливает расстояние между словами
direction	Определяет направление текста
unicode-bidi	Вместе со свойством direction определяет, как должен располагаться текст используемого языка
text-shadow	Добавляет тень к тексту

Обработка текста с помощью CSS сервисов.

Обзор визуальных редакторов CSS

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

Особенно актуален дизайн текста для онлайн ресурсов, таких как блоги, интернет магазины, порталы и общества.

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

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

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

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

• Жирный шрифт.
• Черта над текстом.
• Цвет текста.
• Уменьшение пробелов между словами в тексте.
• Фон текста.
• Рамка из точек вокруг текста и цвет рамки.

На все про все у нас ушло около двух минут, включая сочинение самого текста, при этом половину этих свойств автор статьи даже не знал, вот как это делается.

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

Часть 1. Сервис CSStxt

По сравнению с оппонентами имеет менее яркий дизайн, но при этом может задавать рамку для текста, задавать высоту и ширину контейнера, а также использует два контейнера для текста в виде слоев Div и параграфов P. Именно с помощью этого сервиса был создан скриншот текста выше в топике.

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

Описание функций (тем, кто знаком с английским, можно пропустить):

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

Работа с сервисом начинается с внесения исходного текста.

Блок 1 отвечает за основные свойства отображения текста в браузере, в этом блоке можно использовать кнопки:

• Bold — жирный текст.
• Underline — Сделать подчеркнутый текст.
• Overline — черта над текстом
• Italic — текст курсивом
• Oblique — для многих шрифтов тоже самое, что и курсив
• Line-through — зачеркнутый текст
• Uppercase — сделать все буквы заглавными
• Smallcaps — выделить заглавные, как в сказках обычно.

Блок 2 обеспечивает дополнительную настройку оформления текста:

• Letter Spacing — задать расстояние между буквами CSS.
• Word Spacing — задать расстояние между словами.
• Font size — размер шрифта в пикселях, процентах или единицах Em.
• Line Height — междустрочный интервал.
• Border size — ширина рамки.

Блок 3 управляет шрифтами, а также поможет с выравниванием текста, а также управляет оформлением рамки вокруг текста.

• Font Family — список безопасных шрифтов — 13 шрифтов, которые отображаются в любом браузере и системе.
• Text align — выравнивание текста CSS
• Border style  — стили рамки вокруг текста, опционно можно выбрать рамку из точек, пунктирную, двойную, вдавленную, выпуклую и другие.

Блок 4 служит для настройки цветов текста, рамки и фона. Указать их можно как  шестнадцатеричным  кодом, так и с помощью ColorPicker, нажав на радугу:

• Font color — цвет текста.
• Background color — задает цвет фона для текста.
• Border color  — цвет рамки задаётся, если ширина рамки больше нуля.

Блок 5 служит для указания контейнера текста, а также задает ширину и высоту этого контейнера в пикселях(width и height). Кроме того можно указать отступ для текста внутри контейнера (свойства margin и padding).

По завершению всех настроек нажимаем на иконку GetCode и получаем два кода. В первом из них (тот что короче) находится наш текст с оформлением в выбранном контейнере (по умолчанию в P), во втором целая веб страничка, которую можно использовать в качестве шаблона для отправки письма, страницы в простом вебсайте или подписи в Outlook.

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

Часть 2. Ещё два коротко.

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

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

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

Часть 3. Небольшой урок по применению стилей CSS к тексту.

Если Вам по душе использовать второй и третий сервисы, то Вам необходимо прочитать этот небольшой мануал, чтобы понимать как применять стили к тексту в электронных письмах и на веб-страницах (опытные вебмастера могут переходит к красному прямоугольнику).

Итак, чтобы применить к тексту тот или иной стиль CSS Вам необходимо обрамить Ваш текст в контейнер.

Обычно текст обрамляют в параграфы следующим образом:

<p style=»тут вставляем стиль, полученный из сервиса«>Я хотел бы рассказать про журнал ITPride своим друзьям, но боюсь они будут знать слишком много интересных онлайн сервисов и я не смогу их больше удивлять.  Хотя, с другой стороны можно отправить этот пост в твиттер и заработать несколько фолловеров себе в копилку!</p>

Данный способ называется инлайновым, так как код CSS находится непосредственно в документе. Такой способ не очень удобный, если Вы используете его несколько раз, например в шаблоне сайта.

Поэтому лучше создавать определённый класс и затем присваивать этот класс контейнеру, например

<style type=»text/css»>

.mycss

{

font-weight:normal;color:#000000;border: 15px inset #b5a759;letter-spacing:1pt;word-spacing:2pt;font-size:12px;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1;

}

</style>

<style type=»text/css»>. mycss{font-weight:normal;color:#000000;border: 15px inset #b5a759;letter-spacing:1pt;word-spacing:2pt;font-size:12px;text-align:left;font-family:trebuchet MS, sans-serif;line-height:1;}</style>

и затем использовать как,

<p class=»mycss»>Текст</p>

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

Финал. Линки на сервисы:

1. Оформляем текст в CSSText

2. Используем CSSType

3. Сравниваем тексты в Typetester

текстовый отступ — CSS: Каскадные таблицы стилей

CSS-свойство text-indent задает длину пустого пространства (отступа), которое помещается перед строками текста в блоке.

Расстояние по горизонтали определяется по отношению к левому (или правому, для макета справа налево) краю поля содержимого содержащего элемента уровня блока.

 /* <длина> значений */
отступ текста: 3 мм;
отступ текста: 40px;
/* <процентное> значение
   относительно ширины содержащего блока */
отступ текста: 15%;
/* Значения ключевых слов */
отступ текста: 5em в каждой строке;
отступ текста: 5em висит;
отступ текста: 5em в каждой строке;
/* Глобальные значения */
текстовый отступ: наследовать;
отступ текста: начальный;
текстовый отступ: вернуться;
текстовый отступ: вернуть слой;
отступ текста: не установлен;
 

Значения

<длина>

Отступ указан как абсолютный <длина> . Допускаются отрицательные значения. См. значений возможных единиц.

<процент>

Отступ составляет <процентов> ширины содержащего блока.

каждая строка

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

подвесной

Инвертирует строки с отступом. Все строки , кроме первой строки, будут иметь отступ.

 text-indent = 
 [ ] && 
 зависание? && 
 в каждой строке? 
 "><длина-процент> = 
 <длина> | 
 <процент> 
 

Простой отступ

HTML

 

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<р>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

УСБ

 р {
  отступ текста: 5em;
  фон: пудрово-голубой;
}
 

Результат

Пропуск отступа в первом абзаце

Обычной типографской практикой при наличии отступа в абзаце является пропуск отступа для первого абзаца. Как говорится в Чикагском руководстве по стилю , «первая строка текста после подзаголовка может начинаться на одном уровне слева или иметь отступ, соответствующий обычному отступу абзаца».

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

HTML

 
Lorem ipsum
 
<р>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Приостановить ЕС
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. В быстром темпе
  метус. Donec dapibus feugiat euismod. Vivamus interdum Tellus Dolor. Вивамус
  blandit eros et imperdiet auctor. Mauris sapien nunc, эффективная приправа
  нон, элементум ац сапиенс. Cras consequat turpis non augue ullamcorper, сидеть
  amet porttitor dui interdum.

<р>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  тинцидунт маттис экс. Praesent venenatis orci at sagittis eleifend. Нулла
  фасилизи. В feugiat vehicula magna iaculis vehicula. Nulla Suscipit Tempor
  одио семпер. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum диам. Maecenas mollis blandit placerat.  Ут
  gravida pellentesque nunc, in eleifend ante convallis sit amet.

 
Донец улламкорпер элит нисль
 
<р>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Вестибулум лациния,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  преддверие нуль. Pellentesque обитатель morbi tristique senectus et netus et
  Malesuada Fames Ac Turpis Egestas. Donec vulputate leo ut iaculis ultrices.
  Крас эгестас ронкус лорем. Nunc blandit tempus lectus, rutrum hendrerit orci
  идентификатор элефенда. Ut at quam velit.

<р>
  Aenea rutrum tempor ligula, at luctus ligula auctor vestibulum. Сед
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Нам
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Сед моллис теллус
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.

 

УСБ

 р {
  выравнивание текста: по ширине;
  поле: 1em 0 0 0;
}
р + р {
  отступ текста: 2em;
  маржа: 0;
}
 

Результат

Процентный отступ

HTML

 

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<р>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

УСБ

 р {
  отступ текста: 30%;
  фон: слива;
}
 

Результат

Спецификация
Неизвестная спецификация # Text-Intent-Property

3 Brows On Tail. Включите JavaScript для просмотра данных.

• Научитесь стилизовать HTML с помощью CSS
• Связанные свойства CSS:
  • выравнивание по тексту
  • текстовая ориентация
  • переполнение текста
  • рендеринг текста
  • преобразование текста
  • висящая пунктуация
• Модуль CSS для оформления текста
• Текстовый модуль CSS

Последнее изменение: 000Z»> 27 сентября 2022 г. , участниками MDN

text-rendering — CSS: Каскадные таблицы стилей

Свойство CSS text-rendering предоставляет механизму рендеринга информацию о том, что следует оптимизировать при рендеринге текста.

Браузер идет на компромисс между скоростью, разборчивостью и геометрической точностью.

 /* Значения ключевых слов */
рендеринг текста: авто;
рендеринг текста: optimiseSpeed;
рендеринг текста: оптимизация разборчивости;
рендеринг текста: геометрическая точность;
/* Глобальные значения */
рендеринг текста: наследовать;
рендеринг текста: начальный;
рендеринг текста: вернуться;
рендеринг текста: обратный слой;
рендеринг текста: не установлен;
 

Примечание: Свойство text-rendering — это свойство SVG, которое не определено ни в одном стандарте CSS. Однако браузеры Gecko и WebKit позволяют применять это свойство к содержимому HTML и XML в Windows, macOS и Linux.

Одним из очень заметных эффектов является optimLegibility , который включает лигатуры (ff, fi, fl и т. д.) в тексте размером менее 20 пикселей для некоторых шрифтов (например, Microsoft Calibri , Candara , Constantia и Corbel или семейство шрифтов DejaVu ).

Значения

авто Нестандартный

Браузер делает обоснованные предположения о том, когда оптимизировать скорость, разборчивость и геометрическую точность при рисовании текста. Различия в интерпретации этого значения браузером см. в таблице совместимости.

оптимизация скорости

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

оптимизация разборчивости

Браузер делает упор на удобочитаемость, а не на скорость рендеринга и геометрическую точность. Это позволяет использовать кернинг и дополнительные лигатуры.

геометрическая точность Нестандартный

Браузер отдает предпочтение геометрической точности, а не скорости рендеринга и удобочитаемости. Некоторые аспекты шрифтов, такие как кернинг, не масштабируются линейно. Таким образом, это значение может сделать текст, использующий эти шрифты, хорошо выглядящим.

В SVG, когда текст масштабируется вверх или вниз, браузеры вычисляют окончательный размер текста (который определяется указанным размером шрифта и примененным масштабом) и запрашивают шрифт этого вычисленного размера из системы шрифтов платформы. Но если вы запрашиваете размер шрифта, скажем, 9 с масштабом 140%, результирующий размер шрифта 12,6 явно не существует в системе шрифтов, поэтому вместо этого браузер округляет размер шрифта до 12. Это приводит к ступенчатому масштабированию текста.

Но 9Свойство 0004 GeometryPrecision — при полной поддержке механизма рендеринга — позволяет плавно масштабировать текст. Для больших коэффициентов масштабирования вы можете увидеть менее чем красивую визуализацию текста, но размер соответствует ожидаемому — ни в большую, ни в меньшую сторону до ближайшего размера шрифта, поддерживаемого Windows или Linux.

Примечание: WebKit точно применяет указанное значение, но Gecko обрабатывает это значение так же, как optimizeLegibility .

 text-rendering = 
 авто | 
 оптимизировать скорость | 
 оптимизироватьУдобочитаемость | 
 GeometryPrecision 

Автоматическое применение optimizeLegibility

Это демонстрирует, как optimizeLegibility используется браузерами автоматически, когда размер шрифта меньше, чем 20px .

HTML

 
LYoWAT - ff fi fl ffl
ЛЁВАТ - ff fi fl ffl
 

КСС

 . маленький {
  шрифт: 19.9px "Constantia", "Times New Roman", "Georgia", "Palatino", с засечками;
}
.большой {
  шрифт: 20px "Constantia", "Times New Roman", "Georgia", "Palatino", с засечками;
}
 

Результат

optimiseSpeed ​​и optimizeLegibility

В этом примере показана разница между внешним видом optimeSpeed ​​ и optimizeLegibility (в вашем браузере; другие браузеры могут отличаться).

HTML

 
LYoWAT - ff fi fl ffl
ЛЁВАТ - ff fi fl ffl
 

УСБ

 р {
  шрифт: 1.5em "Constantia", "Times New Roman", "Georgia", "Palatino", с засечками;
}
.скорость {
  рендеринг текста: optimiseSpeed;
}
.разборчивость {
  рендеринг текста: оптимизация разборчивости;
}
 

Результат

2626 2

Спецификация
Масштабная векторная графика (SVG) 1,1 (Второе редакция) # TextrenderingProperty

. Включите JavaScript для просмотра данных.

• Рисование текста на
• Модуль CSS для оформления текста
• Связанные свойства CSS
  • text-decoration (и его полные свойства, такие как text-decoration-line , text-decoration-style и text-decoration-thickness )
  • text-emphasis (и его полные свойства, включая text-emphasis-color , text-emphasis-position и стиль выделения текста )
  • тень текста
  • преобразование текста
• Атрибут SVG рендеринга текста
• SVG и CSS

Последнее изменение: 27 сентября 2022 г. , участниками MDN

HTML | Тег Style — GeeksforGeeks

Тег