Фон для оформления текста: 400+ Бесплатные Фон Текста & Текст изображения

• Художественная иллюстрация передает абстрактные понятия. Некоторые темы (например, поиск вдохновения), нельзя сфотографировать или нарисовать. Зато можно раскрыть через образы на иллюстрации.

Документальные иллюстрации на сайте apple.com

Художественные иллюстрации на сайте облачной платформы Soul: soulplatform.com

Изображение на сайте выполняет две функции: дает новую информацию и создает настроение.

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

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

Подпись под изображением

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

1. Подпись не нужна, когда изображение:

• выполняет декоративную функцию

• понятна без объяснений

• стоит рядом с заголовком или описанием, к которому относится.
  

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

2. Где расположить подпись

Размещайте подпись под иллюстрацией. Там ее и ожидают увидеть: сначала человек смотрит на картинку, а потом опускает глаза ниже. Не прячьте подпись или ее расшифровку в тексте — так ее будет не найти.

Оформление подписей к фотографиям на сайте NASA: nasa.gov

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

Изображение с описанием на полях в Тильде: блок IM07

3. Написание и пунктуация

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

4. Размер шрифта

Выделите подпись графически. Обычно она набирается шрифтом меньшего кегля, чем основной текст. Возьмите за правило уменьшать ее на один шаг: если основной текст набран размером в 16 пунктов, уменьшите подпись до 14.

5. Ширина

Ширина подписи не должна превышать ширину фотографии. Чтобы повысить комфортность чтения, сделайте ее у́же.

6. Поясняющий текст

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

7. Источник изображения

В подписи обязательно укажите информацию об авторе и источнике, если используете не свои фотографии. Это нужно делать, даже если вы приобретаете изображение на фотостоке или используете картинку по лицензии Creative Commons.

Стандартная форма записи источника «Имя автора / Наименование источника». Ссылка должна быть кликабельной.

Примеры:
Thomas Cizauskas /Flickr.com
Jeff Sheldon / Unsplash.com

Источники можно указывать не только в подписи: создайте специальный блок перед футером или перенесите эту информацию в подвал.

Памятка

Короткая инструкция, как правильно оформлять иллюстрации с текстом.

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

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

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

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

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

Подпись, поясняющая фотографию, должна находится рядом с изображением.

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

Автор: Валерия Мерзлякова
Дизайн, иллюстрации и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо ✌️

Читайте также:

Необходимый минимум книг для дизайнеров

Размеры изображений для 7 социальных сетей — справочник

Шрифт для сайта — как выбрать или поменять шрифты

Как написать текст для лендинга — создание текста для landing page

Анализ и подготовка контента при создании сайта

Где найти фото — руководство по поиску картинок для сайта или статьи

Где скачать иконки для сайта бесплатно?

Картинки для сайта — как подбирать фото и изображения на фотостоках

Как правильно писать тексты для сайта

Флэт (flat) дизайн: лучшие практики плоского дизайна

Визуальная иерархия сайта: оформление и организация контента

Как делать красивые статьи на Тильде

10 способов по повышению читабельности текста на картинке

210996 304 1

Прочитать позже

Иллюстрация: Мария Марикуца

Евгения Дычко

Продакт-маркетинг менеджер Crello с 6-летним опытом в диджитал маркетинге, копирайтинге и PR.

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

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

Чтобы текст на иллюстрации был читабельным, следуйте этим 10 рекомендациям.

Примеры графики сделаны на графическом онлайн-редактор Crello.

#1

Настройте фон

Очень сложно считать тонкую надпись на пестром фоне — она в нем растворится. Шрифт на пару тонов темнее/светлее фона тоже будет неразличим — буквы сольются с фоновыми фрагментами своего цвета, и получится каша.

Если цвет шрифта менять не хочется, поработайте с контрастностью фона:

• Затемните или осветлите многоцветную картинку.
  
• Используйте цветной или градиентный фильтр.
  
• Размойте фон, чтобы сделать его менее интенсивным.

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

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

#2

Делайте плашки

Если правильного фона нет, а менять фотографию не хочется, добавьте контрастную плашку и поставьте текст на нее.

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

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

#3

Интегрируйте текст в дизайн

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

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

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

#4

Уважайте цветовые сочетания

Мышино-серые слова плохо читаются, а зеленая надпись на красном выглядит так, будто хочет вас убить. Белый на черном и наоборот — суперчитабельно, но смертельно скучно.

Чтобы глазу было приятнее, берите не черный, а темно-серый, и не белый, а алебастровый. Ориентируйтесь на собственные эстетические ощущения — если цветовое сочетание режет глаз, хладнокровно отбросьте вариант. Понять, какие оттенки хорошо смотрятся вместе, помогут сервисы вроде Coolors, Paletton и Adobe Color CC. Там легко собрать свою палитру или взять уже готовые.

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

#5

Повторяйте элементы

Любое ненавязчивое повторение — оттенков, элементов, стилей шрифта — помогает графике смотреться собрано и целостно. Так в иллюстрации появляется ритм, как в стихотворении.

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

#6

Настраивайте шрифты

Как и цвет, шрифт создает атмосферу — игривую или сдержанную, простую или вычурную, деловую или интимную.

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

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

#7

Внимательно подбирайте расстояние

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

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

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

#8

Помните об иерархии

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

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

#9

Контраст, но не конфликт

Цвет или подложка — далеко не единственный способ выделить слово. Можно использовать несколько шрифтов в одной надписи, создавая контраст и приятное напряжение. Хорошо объединяются шрифты с засечками и без. Но не увлекайтесь — баланс и сочетаемость должны быть на первом месте.

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

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

#10

Группируйте текст

Не размещайте на иллюстрации много мелкого текста вместе с изображениями. Исключения составляют важные сообщения и цитаты, но в таком случае текст должен занимать 80-90% пространства.

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

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

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

Текст должен легко читаться, для этого делайте достаточно контрастный и размытый фон.

Если не хочется затемнять фон, добавьте под текст плашку

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

Аккуратно подбирайте цветовые сочетания с помощью Coolors, Paletton

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

Подбирайте шрифт под тему и настроение сообщения

Настройте баланс расстояния между буквами и словами

Соблюдайте иерархию в размерах: чем крупнее кегль, тем больше значимость этого текста

Добавляйте контраста с помощью разных шрифтов и элементов дизайна

Сгруппируйте текст на картинке: либо по центру, либо следуя правилу третей

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами 😉

Оцените статью по 5-бальной шкале

4. 6 из 5 на основе 672 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

SEO +1

Анастасия Сотула

Бесплатное размещение ссылки на сайт: 60+ для размещения ссылок

Контент-маркетинг

Анастасия Никитина

Как писать статьи на английском, чтобы их опубликовали зарубежные СМИ

Обновления Serpstat +2

Yuliia Zadachenkova

Эти 2 инструмента прокачают вашу семантику: «Поисковые подсказки» и «Похожие фразы»

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Как сделать задний фон текста в html

Как сделать фон для текста в html – Фон под текстом CSS

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега <P> нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

• Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
• HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег>&#8230;</тег> — указание цвета текста по имени.

<тег>&#8230;</тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

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

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег>&#8230;</тег> — указание цвета фона по имени.

<тег>&#8230;</тег> — указание цвета фона по коду.

Пример изменения цвета фона

Результат в браузере

Заголовок.

Жирный текст. Обычный текст.

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

1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Посмотреть результат → Посмотреть ответ

Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок &#8212; 8

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга <body>. Хочу зацепить тег <body>, так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML страницы. А теперь подробней и с примером.
Вот атрибуты, которые мы сейчас рассмотрим:

TEXT – этот атрибут задает цвет текста всего документа.
BGCOLOR – этот атрибут указывает цвет фона HTML странице.
BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

Изменяем цвет текста с помощью атрибута text.

Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:

или обычным названием цвета:

Код кодировки и название цвета для HTML вы посмотрите тут.

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

или обычным названием цвета:

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.

Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:

Если фоновая картинка размещена в папке images, это будет выглядеть так:

Вот и все.
Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html, основы

Как задавать цвет фона HTML документа

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

В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.

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

Цвет фона всего html документа, задается в теге <body>. Теперь сделаем фон нашего документа, например желтым. Для этого в теге <body> необходимо прописать атрибут bgcolor=&#187;#FFFF99&#8243;. Прописывается данный атрибут следующим образом: <body bgcolor=&#187;#FFFF99&#8243;> </body>. Таким образом, код нашей html странички с желтым фоном будет выглядеть так:

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

После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor=&#187;&#187;, который задает цвет фона, содержит в кавычках значение &#171;#FFFF99&#187; &#8212; это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.

Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку. Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.

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

Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо &#171;#FFFF99&#187; прописать &#171;red&#187; т. е. <body bgcolor=&#187;red»> то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.

Материал подготовлен порталом: webmastermix.ru

Обновлено: 04 Сентябрь 2013

Создано: 12 Январь 2010

Цвет фона | htmlbook.ru

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега <body>.

Пример 1. Изменение цвета фона

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру, чтобы быстро загружаться. Если после перечисленного вы все еще хотите добавить фоновый рисунок на страницу, следует воспользоваться атрибутом background тега <body>.

Пример 2. Добавление фонового рисунка

Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

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

Пример 3. Использование фонового рисунка и цвета фона

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties=&#187;fixed&#187; тега <body>.

Пример 4. Задание фиксированного фона

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

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Главная » Основы HTML » Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и на примерах покажу, как сделать фон из цвета или картинки в HTML-странице.
Все довольно просто!
Начнем из цвета!
Я думаю, вы не пропустили урок №11, там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.
Итак, как сделать цветовой фон в HTML…

Цветовой фон в HTML

Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?
В этом нам поможет атрибут «bgcolor». Чтобы закрасить задний фон, пропишите этот атрибут к тегу «body» :

Вот полный HTML-код:

Результат будет вот таким:

Как сделать в HTML картинку фоном

Если вы хотите сделать фон из картинки, тогда к тегу «body» пропишите атрибут «baсkground»:

Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название «fon» с расширением «.gif»):

Вот полный HTML-код:

Результат будет вот таким:

Если фоновая картинка размещена в папке images или в какой-то другой папке, это будет выглядеть так:

Вот полный HTML-код:

На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.
Жду вас на следующих уроках.

Предыдущая запись
Коды цветов в HTML. Основы HTML для начинающих. Урок №11&#13; Следующая запись
Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13&#13;

background | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Синтаксис

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

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

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Объектная модель

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Как сделать фон для текста в фотошопе?

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

Например, к тексту можно добавить какой-нибудь фон, или вернее, расположить текст на каком-нибудь фоне. В этом уроке мы будем делать текст на фотографии и применим к нему фон. Открыв фотошоп загружаем в него фотографию, на которой будем делать текст с фоном.

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

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

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

&#13;

На следующем этапе устанавливаем для этого слоя заливку в 20%.

Далее, кликаем два раза по слою выделения и вызываем окно свойства слоя. Открываем вкладку «Обводка«. Здесь в пункте «Цвет» выбираем белый цвет. Размер выставляем два пикселя. В разделе положение ставим «Снаружи», а «непрозрачность» устанавливаем как 50%.

Создаем копию фонового слоя. У нас получится три слоя: «фон», «фон копия» и верхний слой – «слой выделение». Активируем слой «фон копия». Затем зажимаем клавишу Ctrl и щелкаем левой кнопкой мыши по миниатюре слоя с выделением (третий верхний слой). В результате выделится часть фонового слоя под прямоугольником.

Затем в главном меню выбираем «Фильтр-Размытие-Размытие по Гауссу».

Радиус размытия устанавливаем равным 20.

Далее, на готовом фоне пишем нужный текст. Выбираем шрифт, цвет и размер и получаем готовое изображение с текстом.

Вот такой текст на фоне можно создать. Потренировавшись, можно создавать свои варианты фона как однотонные, так и цветные градиентные. Удачи!

Автор публикации

&#13; 0 Комментарии: 1Публикации: 127Регистрация: 02-12-2017

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

Ещё один важный параметр текста — его цвет. Управляется он свойством color . Подробно это свойство и его значения разберём в следующем задании. А в этом узнаем, как можно использовать фон блока для оформления текста, а также как цвет фона и цвет текста должны сочетаться.

Цвет в CSS чаще всего задаётся в шестнадцатеричном формате с символом решётки в начале:

Фоновое изображение для блока задаётся свойством background-image , а фоновый цвет — свойством background-color :

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

Подробно работа с фонами в CSS рассматривается в части «Фоны. Знакомство» и «Рамки и фоны. Погружение».

• index.html Сплит-режим
• style.css Сплит-режим

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

1. Блоку <aside> добавьте класс partnership ,
2. затем в правиле для .partnership задайте фоновый цвет background-color со значением #4a87fa ,
3. фоновое изображение background-image с адресом url(«img/bg-partnership.svg»)
4. и цвет текста color со значением #ffffff .

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

как сделать такой фон под текстом?

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

надо что бы край фона не прижимался после переноса строки:

Частично решает проблему замена display: inline-block; на display: inline;

но потом это выглядит так, что не есть красиво. Нужно что бы до и после текста сохранялись падинги в 7px;

Фон в Инстаграм: для текста, сторис, фото и актуального

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

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

Оглавление

• Сделать фон через Canva – 100 + вариантов
• Фон для надписи и текста
• Что выбрать для Сторис
• Какие варианты подойдут для фото
• Для Актуального
• Для поста
• Что подойдет для бесконечной ленты
• Для объявления в Инстаграм
• Для аватарки Инстаграм
• Работа с фоном в Фотошопе
• Скачать готовые варианты фонов
• Смена фона в Сторис

Сделать фон через Canva – 100 + вариантов

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

Как сделать фон:

1. Зайти в Canva с компьютера – зарегистрироваться.
2. Перейти во вкладку: «Социальные сети» – Публикация в Instagram.
3. Выбрать пустой холст – нажать по нему.
4. Выбрать оттенок для заливки – сделать фон.

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

Или, есть другой вариант – использовать градиент, чтобы залить фон. Он расположен в разделе: «Элементы» – Графика. Картинку нужно растянуть, чтобы она полностью закрыла холст. В такой же категории есть рамки, анимация и дополнительные объекты, которые подойдут для создания фонового изображения в Сторис или публикации.

Фон для надписи и текста

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

Также, не рекомендуется делать на белом разноцветные и яркие буквы. Приветствуется стандартный вариант: черные буквы на белом или слегка оттенённом фоне.

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

Что выбрать для Сторис

Фон для Историй в Инстаграме можно выбрать в разделе «Текст». Сверху расположен значок градиента, где предложена коллекция из пяти вариантов. Если этого недостаточно – стоит воспользоваться розовым или любым светлым. В зависимости от типа размещаемого контента, добавляют стикеры или другие элементы оформления.

Как изменить фон для Сторис в Инстаграме без использования раздела «Текст»:

1. Зайти в Истории.
2. Сделать снимок или добавить из Галереи.
3. Нажать в инструментах редактирования по карандашу.
4. Выбрать оттенок и размер.
5. Зажать палец на экране до тех пор, пока все изображение не будет закрашено.

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

Какие варианты подойдут для фото

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

Пример такого приложения – Pics Art. Первым редактируется именно фоновое изображение, используя инструмент «Добавить фото», размещают другие снимки из Галереи.

Инструкция, как добавить белый фон для фото в Инстаграме:

1. Скачать и установить приложение Pics Art.
2. Открыть – нажать снизу значок «+».
3. В Галереи выбрать фоновую картинку.
4. В панели инструментов: «Добавить фото».
5. Добавить с устройства – выбрать нужный снимок.

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

Для Актуального

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

Для размещения графического объекта посередине, актуальны приложения Highlight for Stories или стандартные компьютерные программы.

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

Пользуясь настройками размещения Историй, подложку можно сделать и на фотографиях. Проще всего использовать телефоны на базе iOS, чтобы добавить сразу две картинки в одну Stories: первую – фоновую и вторую – фотографию.

Для поста

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

Идеальным сочетание считается: нежно-розовый фон и фотографии в белом стиле. Вариант относится ко всем оттенкам Ленты: важно сочетание между снимками и размещенной публикацией с фоном.

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

Что подойдет для бесконечной ленты

Фон для бесконечной ленты в Инстаграме применим ко всем дальнейшим публикациям. Пользователь создает одно изображение, которое делит на 6, 9 или 12 частей. То есть, каждая часть является продолжение следующей.

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

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

Для объявления в Инстаграм

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

Сделать интересный шаблон, поможет приложение SnapSeed. В настройках инструментов найти «Текст» с дополнительным оформлением и русским шрифтом.

Другие варианты для объявлений:

• однотонные. С надписями или графическими объектами;
• фотографии и рисунки. Оригинальные снимки, которые в дальнейшем обрабатывают;
• картинки с минимальным количеством мелких деталей.

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

Для аватарки Инстаграм

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

Добавить такую подложку можно через приложение Pics Art или воспользоваться Photoshop для компьютеров.

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

Как добавить фоновое изображение в Photoshop:

1. Зайти в программу – Файл – Создать.
2. В параметрах указать размеры для аватарки.
3. Файл – Поместить.
4. Разместить скачанный радужный фон по всему размеру холста.
5. Растрировать слой – с помощью инструмента «Овал», выделить круглую область (зажать Shift).
6. Правая кнопка мыши: «Вырезать на новый слой».
7. Удалить предыдущий – внутри нового сделать еще один круг и нажать «Delete».

Теперь, в созданную рамку можно размещать любые фотографии, а лишние края убирать с помощью инструмента: «Архивная кисть». Чтобы не вырезать рамку, её можно взять из приложенного ниже архива.

Работа с фоном в Фотошопе

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

Например: «Вопрос сегодня» или «Рассказать о себе». На таких изображениях пишут текстом ответы или используют фотографии, если это предложено в шаблоне.

Как добавить картинку на подготовленный фон:

1. Зайти в программу Photoshop – Файл.
2. Открыть – выбрать скачанный шаблон.
3. Файл – Поместить – выбрать снимок с компьютера.

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

Скачать готовые варианты фонов

Красивый фон для фото в Инстаграме подобрать несложно из раздела: «Обои для смартфонов». Для создания собственного, с использованием графических объектов, оформления и текста – нужны приложения или сторонние сервисы.

Скачать готовые фоны для Инстаграма проще всего с нашего сайта вот по этой ссылке.

Смена фона в Сторис

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

Как добавить картинку для снимков на iOS:

1. Зайти в Stories Инстаграма.
2. Выбрать из Галереи фоновую картинку – загрузить.
3. Перейти в «Фотопленку» – нажать на фотографии «Дополнительные сведения».
4. Снизу появится надпись: «Скопирован элемент».
5. Выбрать функцию «Вставить» – разместить снимок на шаблоне.

Для Android предложены только сторонние приложения. Весенний или другие фоны можно добавлять на все Истории, а после – перемещать в Актуальное.

Добавление подложки «Черновик» на фон слайдов

Слайды и макеты

Слайды и макеты

Слайды и макеты

Добавление подложки «Черновик» на фон слайдов

• Общие сведения об образце слайдов
  Статья
• Добавление, перемещение, дублирование и удаление слайдов в PowerPoint
  Статья
• Применение макета слайда
  Статья
• Добавление цветов и оформления слайдов с помощью тем
  Статья
• Начало работы с шаблоном
  Статья
• Идеи для оформления слайдов
  Статья
• Настройка образца слайдов
  Статья
• Изменение ориентации страницы в PowerPoint на альбомную или книжную
  Статья
• Организация слайдов PowerPoint по разделам
  Статья
• Добавление подложки «Черновик» на фон слайдов
  Статья
• Создание, объединение и группировка объектов на слайде
  Статья
• Направляющие для выравнивания объектов на слайде в PowerPoint
  Статья
• Перемещение объектов, заполнителей и фигур на задний или передний план
  Статья
• Поворот или отражение объекта
  Статья

Далее: Текст и таблицы

PowerPoint для Microsoft 365 PowerPoint 2021 PowerPoint 2019 PowerPoint 2016 PowerPoint 2013 PowerPoint 2010 PowerPoint 2007 Еще. ..Меньше

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

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

Добавление подложки

1. На вкладке Вид нажмите кнопку Образец слайдов.

2. Прокрутите до верхней части области эскизов выберите эскиз образца слайдов.

3. На вкладке Вставка выберите элемент Надпись и перетащите указатель, чтобы создать надпись на слайде.

4. Введите нужный текст в надписи.

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

6. Щелкните и удерживайте маркер поворота в верхней части надписи, перемещая мышь влево или вправо.

7. org/ListItem»>

   Выберите Образец слайдов > Закрыть образец. Все слайды в презентации будут содержать текст подложки.

Добавление подложки на слайды с помощью объекта Word Art или текстового поля

Текстовую подложку можно добавить на отдельные слайды или на все сразу (путем изменения образца слайдов). Порядок действий идентичен за исключением первого шага (см. действие 1).

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

   Чтобы добавить подложку на все слайды пустой презентации, сначала выберите Вид > Образец слайдов.

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

2. Откройте вкладку Вставка и выполните одно из указанных ниже действий.

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

   • org/ListItem»>

     Чтобы использовать объект WordArt, нажмите кнопку WordArt.

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

4. Чтобы изменить расположение подложки, щелкните текстовое поле или объект WordArt, и когда указатель примет вид крестообразной стрелки  , перетащите поле или объект в другое место.

5. Чтобы отправить подложку на задний план, выберите Формат > Работа с рисунками, щелкните стрелку рядом с кнопкой Переместить назад и выберите На задний план.

   Совет: Если вкладки Работа с рисунками и Формат не отображаются, проверьте, выбрано ли текстовое поле или объект WordArt.

Текстовую подложку можно добавить на отдельные слайды или на все сразу (путем изменения образца слайдов). Порядок действий идентичен за исключением первого шага (см. действие 1).

Использование текстового поля или объекта WordArt в качестве подложки

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

   Чтобы добавить подложку на все слайды пустой презентации, на вкладке Вид в группе Режимы просмотра презентации нажмите кнопку Образец слайдов.

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

2. На вкладке Вставка в группе Иллюстрации в группе Текст выполните одно из указанных ниже действий.

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

   • Чтобы использовать объект WordArt, нажмите кнопку WordArt.

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

4. Чтобы изменить расположение подложки, щелкните текстовое поле или объект WordArt, и когда указатель примет вид крестообразной стрелки  , перетащите поле или объект в другое место.

5. Отредактировав и расположив подложку, отправьте текстовое поле или объект WordArt на задний план. Для этого в группе вкладок Средства рисования на вкладке Формат в группе Упорядочить нажмите кнопку На задний план.

   Если вкладки Средства рисования и Формат не отображаются, проверьте, выбрана ли надпись или объект WordArt.

См. также

• Добавление прозрачного изображения (водяного знака) на слайды

Форматирование текста в Illustrator

1. Руководство пользователя Illustrator
2. Основы работы с Illustrator
   1. Введение в Illustrator
      1. Новые возможности в приложении Illustrator
      2. Часто задаваемые вопросы
      3. Системные требования Illustrator
      4. Illustrator для Apple Silicon
   2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Создание документов
      3. Панель инструментов
      4. Комбинации клавиш по умолчанию
      5. Настройка комбинаций клавиш
      6. Общие сведения о монтажных областях
      7. Управление монтажными областями
      8. Настройка рабочей среды
      9. Панель свойств
      10. Установка параметров
      11. Рабочая среда «Сенсорное управление»
      12. Поддержка Microsoft Surface Dial в Illustrator
      13. Восстановление, отмена, история и автоматизация
      14. Повернуть вид
      15. Линейки, сетки и направляющие
      16. Специальные возможности в Illustrator
      17. Безопасный режим
      18. Просмотр графических объектов
      19. Работа в Illustrator с использованием Touch Bar
      20. Файлы и шаблоны
   3. Инструменты в Illustrator
      1. Выделение инструменты
         1. Выделение
            
         2. Частичное выделение
         3. Групповое выделение
         4. Волшебная палочка
         5. Лассо
         6. Монтажная область
      2. Инструменты навигации
         1. Рука
         2. Повернуть вид
            
         3. Масштаб
      3. Инструменты рисования
         1. Градиент
            
         2. Сетка
         3. Создание фигур
      4. Текстовые инструменты
         1. Текст
            
         2. Текст по контуру
         3. Текст по вертикали
      5. Инструменты рисования
         1. Перо
         2. Добавить опорную точку
         3. Удалить опорные точки
         4. Опорная точка
         5. Кривизна
         6. Отрезок линии
         7. Прямоугольник
         8. Прямоугольник со скругленными углами
         9. Эллипс
         10. Многоугольник
         11. Звезда
         12. Кисть
         13. Кисть-клякса
         14. Карандаш
         15. Формирователь
         16. Фрагмент
      6. Инструменты модификации
         1. Поворот
         2. Отражение
         3. Масштаб
         4. Искривление
         5. Ширина
         6. Свободное трансформирование
         7. Пипетка
         8. Смешать
         9. Ластик
         10. Ножницы
3. Illustrator на iPad
   1. Представляем Illustrator на iPad
      1. Обзор по Illustrator на iPad.
      2. Ответы на часто задаваемые вопросы по Illustrator на iPad
      3. Системные требования | Illustrator на iPad
      4. Что можно и нельзя делать в Illustrator на iPad
   2. Рабочая среда
      1. Рабочая среда Illustrator на iPad
      2. Сенсорные ярлыки и жесты
      3. Комбинации клавиш для Illustrator на iPad
      4. Управление настройками приложения
   3. Документы
      1. Работа с документами в Illustrator на iPad
      2. Импорт документов Photoshop и Fresco
   4. Выбор и упорядочение объектов
      1. Создание повторяющихся объектов
      2. Объекты с переходами
   5. Рисование
      1. Создание и изменение контуров
      2. Рисование и редактирование фигур
   6. Текст
      1. Работа с текстом и шрифтами
      2. Создание текстовых надписей по контуру
      3. Добавление собственных шрифтов
   7. Работа с изображениями
      1. Векторизация растровых изображений
   8. Цвет
      1. Применение цветов и градиентов
4. Облачные документы
   1. Основы работы
      1. Работа с облачными документами Illustrator
      2. Общий доступ к облачным документам Illustrator и совместная работа над ними
      3. Обновление облачного хранилища для Adobe Illustrator
      4. Облачные документы в Illustrator | Часто задаваемые вопросы
   2. Устранение неполадок
      1. Устранение неполадок с созданием или сохранением облачных документов в Illustrator
      2. Устранение неполадок с облачными документами в Illustrator
5. Добавление и редактирование содержимого
   1. Рисование
      1. Основы рисования
      2. Редактирование контуров
      3. Рисование графического объекта с точностью на уровне пикселов
      4. Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
      5. Рисование простых линий и фигур
      6. Трассировка изображения
      7. Упрощение контура
      8. Определение сеток перспективы
      9. Инструменты для работы с символами и наборы символов
      10. Корректировка сегментов контура
      11. Создание цветка в пять простых шагов
      12. Рисование перспективы
      13. Символы
      14. Рисование контуров, выровненных по пикселам, при создании проектов для Интернета
   2. 3D-эффекты и материалы Adobe Substance
      1. Подробнее о 3D-эффектах в Illustrator
         
      2. Создание трехмерной графики
         
      3. Проецирование рисунка на трехмерные объекты
      4. Создание трехмерных объектов
      5. Создание трехмерного текста
   3. Цвет
      1. О цвете
      2. Выбор цветов
      3. Использование и создание цветовых образцов
      4. Коррекция цвета
      5. Панель «Темы Adobe Color»
      6. Цветовые группы (гармонии)
      7. Панель «Темы Color»
      8. Перекрашивание графического объекта
   4. Раскрашивание
      1. О раскрашивании
      2. Раскрашивание с помощью заливок и обводок
      3. Группы с быстрой заливкой
      4. Градиенты
      5. Кисти
      6. Прозрачность и режимы наложения
      7. Применение обводок к объектам
      8. Создание и редактирование узоров
      9. Сетки
      10. Узоры
   5. Выбор и упорядочение объектов
      1. Выделение объектов
      2. Слои
      3. Группировка и разбор объектов
      4. Перемещение, выравнивание и распределение объектов
      5. Размещение объектов    
      6. Блокировка, скрытие и удаление объектов
      7. Создание дубликатов объектов
      8. Поворот и отражение объектов
   6. Перерисовка объектов
      1. Кадрирование изображений
      2. Трансформирование объектов
      3. Объединение объектов
      4. Вырезание, разделение и обрезка объектов
      5. Марионеточная деформация
      6. Масштабирование, наклон и искажение объектов
      7. Объекты с переходами
      8. Перерисовка с помощью оболочек
      9. Перерисовка объектов с эффектами
      10. Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
      11. Работа с динамическими углами
      12. Улучшенные процессы перерисовки с поддержкой сенсорного ввода
      13. Редактирование обтравочных масок
      14. Динамические фигуры
      15. Создание фигур с помощью инструмента «Создание фигур»
      16. Глобальное изменение
   7. Текст
      1. Дополнение текстовых и рабочих объектов типами объектов
      2. Создание маркированного и нумерованного списков
      3. Управление текстовой областью
      4. Шрифты и оформление
      5. Форматирование текста
      6. Импорт и экспорт текста
      7. Форматирование абзацев
      8. Специальные символы
      9. Создание текста по контуру
      10. Стили символов и абзацев
      11. Табуляция
      12. Текст и шрифты
      13. Поиск отсутствующих шрифтов (технологический процесс Typekit)
      14. Обновление текста из Illustrator 10
      15. Шрифт для арабского языка и иврита
      16. Шрифты | Часто задаваемые вопросы и советы по устранению проблем
      17. Создание эффекта 3D-текста
      18. Творческий подход к оформлению
      19. Масштабирование и поворот текста
      20. Интерлиньяж и межбуквенные интервалы
      21. Расстановка переносов и переходы на новую строку
      22. Усовершенствования работы с текстом
      23. Проверка орфографии и языковые словари
      24. Форматирование азиатских символов
      25. Компоновщики для азиатской письменности
      26. Создание текстовых проектов с переходами между объектами
      27. Создание текстового плаката с помощью трассировки изображения
   8. Создание специальных эффектов
      1. Работа с эффектами
      2. Стили графики
      3. Создание тени
      4. Атрибуты оформления
      5. Создание эскизов и мозаики
      6. Тени, свечения и растушевка
      7. Обзор эффектов
   9. Веб-графика
      1. Лучшие методы создания веб-графики
      2. Диаграммы
      3. SVG
      4. Создание анимации
      5. Фрагменты и карты изображений
6. Импорт, экспорт и сохранение
   1. Импорт
      1. Импорт файлов графических объектов
      2. Импорт растровых изображений
      3. Импорт графического объекта из Photoshop
      4. Помещение нескольких файлов в документ
      5. Извлечение изображений
      6. Импорт файлов Adobe PDF
      7. Импорт файлов EPS, DCS и AutoCAD
      8. Сведения о связях
   2. Библиотеки Creative Cloud Libraries в Illustrator 
      1. Библиотеки Creative Cloud Libraries в Illustrator
   3. Диалоговое окно «Сохранить»
      1. Сохранение иллюстраций
   4. Экспорт
      1. Использование графического объекта Illustrator в Photoshop
      2. Экспорт иллюстрации
      3. Сбор ресурсов и их массовый экспорт
      4. Упаковка файлов
      5. Создание файлов Adobe PDF
      6. Извлечение CSS | Illustrator CC
      7. Параметры Adobe PDF
      8. Информация о файле и метаданные
7. Печать
   1. Подготовка к печати
      1. Настройка документов для печати
      2. Изменение размера и ориентации страницы
      3. Задание меток обреза для обрезки и выравнивания
      4. Начало работы с большим холстом
   2. Печать
      1. Наложение
      2. Печать с управлением цветами
      3. Печать PostScript
      4. Стили печати
      5. Метки и выпуск за обрез
      6. Печать и сохранение прозрачных графических объектов
      7. Треппинг
      8. Печать цветоделенных форм
      9. Печать градиентов, сеток и наложения цветов
      10. Наложение белого
8. Автоматизация задач
   1. Объединение данных с помощью панели «Переменные»
   2. Автоматизация с использованием сценариев
   3. Автоматизация с использованием операций
9. Устранение неполадок 
   1. Проблемы с аварийным завершением работы
   2. Восстановление файлов после сбоя
   3. Проблемы с файлами
   4. Поддерживаемые форматы файлов
   5. Проблемы с драйвером ГП
   6. Проблемы устройств Wacom
   7. Проблемы с файлами DLL
   8. Проблемы с памятью
   9. Проблемы с файлом настроек
   10. Проблемы со шрифтами
   11. Проблемы с принтером
   12. Как поделиться отчетом о сбое с Adobe

Выделение символов позволяет их редактировать, форматировать с помощью палитры «Символ», применять к ним атрибуты заливки и обводки и изменять их прозрачность. Такие изменения можно применять к одному символу, диапазону символов или ко всем символам в текстовом объекте. Если выделены символы, они подсвечиваются в окне документа, а на палитре «Оформление» отображается слово «Символы».

Выделение текстового объекта позволяет применять глобальные параметры форматирования ко всем символам объекта, включая параметры на палитрах «Символ» и «Абзац», атрибуты заливки и обводки и настройки прозрачности. Кроме того, к выбранному текстовому объекту можно применять эффекты, различные заливки и обводки, а также непрозрачные маски. (Это невозможно сделать для отдельно выбранных символов.) Если выделен текстовый объект, в окне документа вокруг него появляется ограничительная рамка, а на палитре «Оформление» отображается слово «Текст».

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

Выделение символов

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

   • Перетащите курсор, чтобы выделить один или несколько символов. Перетащите курсор с нажатой клавишей Shift для увеличения или уменьшения выделенной области.

   • Установите курсор на слове и двойным щелчком выделите это слово.

   • Установите курсор на абзаце и тройным щелчком выделите весь абзац.

   • Выделите один или несколько символов и выберите команду «Выделение» > «Все» — будут выделены все символы в текстовом объекте.

Выделение текстовых объектов

Выделение текстового объекта позволяет применять глобальные параметры форматирования ко всем символам объекта, включая параметры на палитрах «Символ» и «Абзац», атрибуты заливки и обводки и настройки прозрачности. Кроме того, к выбранному текстовому объекту можно применять эффекты, различные заливки и обводки, а также непрозрачные маски. (Это невозможно сделать для отдельно выбранных символов.) Если выделен текстовый объект, в окне документа вокруг него появляется ограничительная рамка, а на палитре «Оформление» отображается слово «Текст».

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

   • В окне документа щелкните текст с помощью инструмента «Выделение»  или «Частичное выделение» . Чтобы выбрать дополнительные текстовые объекты, щелкните их с нажатой клавишей «Shift».

   • На палитре «Слои» найдите текстовый объект, который нужно выделить, и нажмите его правый край (между целевой кнопкой и полосой прокрутки). Чтобы добавить или удалить объекты из выделенного набора на палитре «Слои», нажмите правый край этих объектов с нажатой клавишей Shift.

   • Чтобы выделить все текстовые объекты в документе, выберите команду «Выделение» > «По типу объектов» > «Текстовые объекты».

Выделение контура текста

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

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

1. Выберите инструмент «Частичное выделение»  или «Групповое выделение» .

2. Если текстовый объект выделен, щелкните за пределами его ограничительной рамки, чтобы отменить выделение.

3. Нажмите на контур текста, при этом постарайтесь не нажимать на символы. (Если нажать на символ, вместо контура будет выделен текстовый объект.)

Установка «Выделять текстовые объекты только по контуру» определяет чувствительность инструментов выделения при выборе текстовых объектов в окне документа. Если эта установка выбрана, для выделения текста необходимо нажать непосредственно его контур. Когда эта установка не выбрана, для выделения текста можно нажать текст или контур. Задать эту установку можно, выбрав команду «Редактирование» > «Установки» > «Текст» (в Windows) или «Illustrator» > «Установки» > «Текст» (в Mac OS).

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

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

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

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

   С учетом регистра

   Поиск только текстовых строк, точно соответствующих тексту в верхнем и нижнем регистрах в поле «Найти».

   Найти слово целиком

   Поиск только целых слов, соответствующих тексту в поле «Найти».

   Искать от конца к началу

   Поиск текста в файле снизу вверх в порядке размещения.

   Проверить скрытые слои

   Поиск текста в скрытых слоях. Если этот параметр не выбран, Illustrator игнорирует текст в скрытых слоях.

   Проверить заблокированные слои

   Поиск текста в заблокированных слоях. Если этот параметр не выбран, Illustrator игнорирует текст в заблокированных слоях.

4. Нажмите кнопку «Найти», чтобы начать поиск.

5. Если будет найдено вхождение текстовой строки, выполните одно из следующих действий:

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

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

   • Нажмите кнопку «Заменить все» для замены всех вхождений текстовой строки в документе.

6. Нажмите кнопку «Готово», чтобы закрыть диалоговое окно.

   Чтобы найти следующее вхождение текстовой строки, когда диалоговое окно «Найти и заменить» закрыто, выберите команду «Редактирование» > «Найти следующий».

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

1. Скопируйте текст из исходного файла.

2. Нажмите инструмент «Текст», а затем щелкните или выполните перетаскивание, чтобы создать текстовое поле в конечном файле. 
   

3. Нажмите в том месте, где должна начинаться строка текста, и выберите Редактирование > Вставить без форматирования или нажмите Alt+Ctrl+V, чтобы вставить скопированный текст без исходного форматирования.
   

4. Чтобы включить вставку текста без исходного формата по умолчанию, выберите Редактирование > Установки > Обработка буфера обмена и установите флажок в поле Вставить текст без форматирования.
   

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

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

   • Чтобы изменить оформление отдельных символов в текстовом объекте, выделите эти символы.

   • Чтобы изменить оформление всех символов текстового объекта или применить несколько заливок и обводок, выделите текстовый объект.

   • Чтобы добавить заливку или обводку в контур текста, выделите контур.

2. Примените заливки, обводки, параметры прозрачности, эффекты и графические стили.

   При изменении цвета текстового объекта Illustrator перезаписывает атрибуты отдельных символов в текстовом объекте.

   Для быстрого изменения цвета выбранного объекта используйте панель «Управление».

Палитра «Символ» («Окно» > «Текст» > «Символ») используется для применения параметров форматирования к отдельным символам в документах. Если выделен текст или активен инструмент «Текст», для форматирования символов также можно использовать параметры на панели «Управление».

Палитра «Символ»

A. Панель меню B. Шрифт C. Стиль шрифта D. Интерлиньяж E. Трекинг F. Масштаб по горизонтали G. Поворот символа H. Метод сглаживания I. Кегль J. Кернинг K. Масштаб по вертикали L. Смещение базовой линии 

A. Шрифт B. Стиль шрифта C. Размер шрифта D. Выравнивание по левому краю E. Выравнивание по центру F. Выравнивание по правому краю 

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

Illustrator CC 2017 позволяет с легкостью работать с текстовыми объектами в случае, когда у них одно семейство шрифтов, но разные стили, и наоборот. Например, если выбрать два текстовых объекта, у которых семейство шрифтов Arial, но у одного обычных текст, а у другого полужирный, поле стиля станет пустым, а в поле семейства шрифтов отобразится «Arial».

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

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

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

   • Чтобы перечеркнуть текст, нажмите кнопку «Перечеркнутый» в палитре «Символ».

Толщина линии подчеркивания и перечеркивания по умолчанию зависит от кегля шрифта.

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

Обычные прописные буквы (вверху) и капители (внизу)

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

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

Чтобы указать размер синтезируемых капителей, выберите «Файл» > Параметры документа. В поле «Капители» введите процент от исходного размера шрифта для текста, форматируемого в капители. (Значение по умолчанию — 70%).

Чтобы изменить стиль текста на «все прописные», «все строчные», «прописная в начале каждого слова» или «прописная в начале предложения», выберите команду «Текст» > «Изменить регистр».

1. Выделите символы или текстовые объекты для изменения.

2. Выберите в подменю «Текст» > «Изменить регистр» один из следующих параметров:

   ВСЕ ПРОПИСНЫЕ

   Все буквы изменяются на прописные.

   Примечание. Команда «ВСЕ ПРОПИСНЫЕ» преобразует дополнительные лигатуры в нормальный текст. Это также происходит при использовании команд «Прописная В Начале Каждого Слова» и «Прописная в начале предложения», если дополнительная лигатура находится в начале слова.

   все строчные

   Все буквы изменяются на строчные.

   Прописная В Начале Каждого Слова

   Первая буква каждого слова становится прописной.

   Прописная в начале предложения

   Первая буква каждого предложения становится прописной.

   Примечание. Команда «Прописная в начале предложения» предполагает наличие точки (.), восклицательного (!) или вопросительного (?) знака в конце предложений. Ее выполнение может привести к неожиданным изменениям регистра, если перечисленные символы используются для других целей, например в аббревиатурах, названиях файлов или URL-адресах. Кроме того, в строчные могут быть преобразованы имена собственные.

   Совет. Если используется шрифт OpenType, для создания более элегантного текста можно воспользоваться форматом «Все прописные».

Набор стилей — это набор вариантов начертания глифов, который можно применить к выделенному блоку текста. При применении набора стилей глифы, определенные в наборе, заменяют глифы по умолчанию для данного шрифта в выделенном тексте. Имя набора стилей, предоставленного разработчиком шрифта, отображается на различных панелях в Illustrator. Для некоторых шрифтов в Illustrator наборы стилей имеют имена «Набор 1», «Набор 2» и т. д. К фрагменту текста можно применить несколько наборов стилей. Подробные сведения о применении наборов стилей к выделенному тексту представлены в разделе Специальные символы.

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

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

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

3. Откройте вкладку Возможности OpenType в левой части диалогового окна «Новый стиль символа / абзаца».
   

4. Нажмите и выберите нужные наборы стилей в списке.

   Добавление наборов стилей к стилю символа

5. Нажмите кнопку ОК.

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

1. Выберите «Файл» > Параметры документа и выполните одно из следующих действий. Затем нажмите кнопку «ОК»:

   • Для использования прямых кавычек снимите флажок «Использовать типографские кавычки».

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

     Примечание. Можно задать параметры кавычек для нескольких языков. Эти кавычки применяются к тексту на основе языка, назначенного с помощью палитры «Символ» или установки «Словарь по умолчанию».

     Совет. Для замены прямых кавычек на типографские можно воспользоваться командой «Типографская пунктуация».

При сохранении иллюстрации в растровом формате, например в JPEG, GIF или PNG, Illustrator растрирует все объекты с разрешением 72 пикселя на дюйм и применяет к ним сглаживание. Однако если иллюстрация содержит текст, стандартные параметры сглаживания могут не принести желаемых результатов. В Illustrator есть несколько параметров специально для растрирования текста. Чтобы воспользоваться этими параметрами, необходимо растрировать текстовые объекты до сохранения иллюстрации.

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

   • Чтобы окончательно растрировать текст, выберите команду «Объект» > «Растрировать».

   • Чтобы получить растрированное оформление без изменения базовой структуры объекта, выберите команду «Эффект» > «Растрировать».

2. Выберите параметр сглаживания:

   Нет

   Сглаживание не применяется, при растрировании текста сохраняются резкие края.

   Лучше качество объектов (суперсамплинг)

   Параметр по умолчанию. Все объекты, включая текстовые, растрируются с указанным разрешением, и к ним применяется сглаживание. Разрешение по умолчанию составляет 300 пикселей на дюйм.

   Лучше качество текста (с хинтовкой)

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

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

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

Создание надстрочных и подстрочных индексов в обычных шрифтах

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

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

   Параметры «Надиндекс» и «Подиндекс» в меню палитры «Символ»

   A. ОПРЕДЕЛЕНИЕ_ВЫНОСКИ B. ОПРЕДЕЛЕНИЕ_ВЫНОСКИ C. ОПРЕДЕЛЕНИЕ_ВЫНОСКИ 

Создание надстрочных и подстрочных индексов в шрифтах OpenType

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

2. Убедитесь, что выбран шрифт OpenType. Для этого можно просмотреть команду «Текст» > «Шрифт» — шрифты OpenType отображаются со значком .

3. На палитре «OpenType» выберите параметр в раскрывающемся списке «Положение».

   Нормальное

   Для текущего шрифта используется позиция по умолчанию.

   Надиндекс/Надстрочный знак

   Используются приподнятые символы (при их наличии в текущем шрифте).

   Подиндекс/Подстрочный знак

   Используются опущенные символы (при их наличии в текущем шрифте).

   Числитель

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

   Знаменатель

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

Изменение размера и положения надстрочных и подстрочных индексов

1. Выберите «Файл» > Параметры документа, укажите следующие значения для параметров «Надиндекс» и «Подиндекс», затем нажмите кнопку «ОК»:

   • В полях «Размер» введите процентное отношение размера шрифта для текста надстрочных и подстрочных индексов.

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

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

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

Изменение формы буквы

A. Исходный текстовый объект B. Текст, преобразованный в кривые, разгруппированный и измененный 

В кривые не могут быть преобразованы растровые шрифты, а также шрифты, защищенные от такого преобразования.

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

Преобразованию подлежит весь текст в выделенной области. Преобразовать одну букву из строки текста невозможно. Чтобы преобразовать в кривые одиночную букву, нужно создать отдельный текстовый объект, содержащий только эту букву.

1. Выделите текстовый объект.

2. Выберите команду «Текст» > «Создать кривые».

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

2. Убедитесь, что выбран шрифт OpenType.

3. На палитре «OpenType» выберите параметр в раскрывающемся списке «Цифры».

   Стандартные цифры

   Для текущего шрифта используется стиль по умолчанию.

   Моноширинные современные

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

   Пропорциональные современные

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

   Пропорциональные старого стиля

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

   Моноширинные старого стиля

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

При использовании шрифта OpenType можно автоматически форматировать порядковые числительные с надстрочными символами (например, ). Такие символы, как надстрочные «a» и «o» в испанских словах segunda () и segundo () также набираются правильно. Кроме того, можно преобразовывать числа, разделенные косой чертой (например, 1/2), в дробь шиллинга (например, ).

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

2. Убедитесь, что выбран шрифт OpenType.

3. На палитре «OpenType» нажмите кнопку «Порядковые числительные» для включения или отключения порядковых числительных или кнопку «Дроби» для включения или отключения дробей. Эти кнопки действуют только в том случае, если в шрифте доступны порядковые числительные и дроби.

Команда «Типографская пунктуация» выполняет поиск клавиатурных символов пунктуации и заменяет их типографскими. Кроме того, команду «Типографская пунктуация» можно применять для глобальной вставки лигатур и дробей (если в шрифте есть такие символы).

Если используется шрифт OpenType, для ввода лигатур и дробей вместо диалогового окна «Типографская пунктуация» используйте палитру «OpenType».

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

2. Выберите команду «Текст» > «Типографская пунктуация».

3. Установите один или несколько перечисленных далее параметров.

   Лигатуры «ff», «fi», «ffi»

   Представление комбинаций букв «ff», «fi» или «ffi» в виде лигатур.

   Лигатуры «ff», «fl», «ffl»

   Представление комбинаций букв «ff», «fl» или «ffl» в виде лигатур.

   Кавычки (« »)

   Изменение прямых кавычек, вводимых с клавиатуры, на фигурные.

   Примечание. Если выбран параметр «Кавычки», прямые кавычки всегда заменяются на фигурные, независимо от настроек «Двойные кавычки» или «Одинарные кавычки» в диалоговом окне Параметры документа.

   Пробелы ( )

   Удаление нескольких пробелов после точки.

   Короткое, длинное тире (–)

   Замена при вводе с клавиатуры двух дефисов на короткое тире, а трех дефисов — на длинное.

   Многоточие (…)

   Замена трех точек, вводимых с клавиатуры, на многоточие.

   Сложные дроби

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

4. Выберите параметр «Весь документ» для замены символов текста во всем файле или «Только текст» для замены символов только в выделенном тексте.

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

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

Связанные материалы

• Об атрибутах оформления
• Стили символов и абзацев
• Клавиши для работы с текстом
• Шрифты OpenType
• Обзор палитры «OpenType»
• Использование лигатур и контекстных вариантов
• Создание текста
• Обучающий видеоролик «Работа с текстом»

Цвет оформления текста — попутный ветер CSS

наследование украшения	цвет украшения текста: наследование;
декор-текущий	текст-декор-цвет: текущий цвет;
декоративный прозрачный	текстовый декоративный цвет: прозрачный;
декоративный черный	текстовый декоративный цвет: #000;
декоративный белый	текстовый декоративный цвет: #fff;
украшение-шифер-50	текст-украшение-цвет: #f8fafc;
украшение-сланец-100	цвет-украшения-текста: #f1f5f9;
украшение-сланец-200	текст-украшение-цвет: #e2e8f0;
украшение-шифер-300	текст-украшение-цвет: #cbd5e1;
декор-сланец-400	текст-декор-цвет: #94a3b8;
декор-сланец-500	text-decoration-color: #64748b;
декор-сланец-600	текст-декор-цвет: #475569;
декор-сланец-700	текст-декор-цвет: #334155;
украшение-шифер-800	текст-украшение-цвет: #1e293b;
украшение-сланец-900	цвет-украшения-текста: #0f172a;
декор-серый-50	текст-декор-цвет: #f9фафб;
украшение-серый-100	текст-украшение-цвет: #f3f4f6;
декоративный серый-200	текстовый декоративный цвет: #e5e7eb;
украшение-серый-300	текст-украшение-цвет: #d1d5db;
декоративный серый-400	текстовый декоративный цвет: #9ca3af;
украшение-серый-500	текст-украшение-цвет: #6b7280;
декор-серый-600	text-decoration-color: #4b5563;
украшение-серый-700	текст-украшение-цвет: #374151;
декоративный серый-800	текстовый декоративный цвет: #1f2937;
украшение-серый-900	текст-украшение-цвет: #111827;
украшение-цинк-50	текст-украшение-цвет: #fafafa;
декор-цинк-100	текст-декор-цвет: #f4f4f5;
украшение-цинк-200	текст-украшение-цвет: #e4e4e7;
украшение-цинк-300	текст-украшение-цвет: #d4d4d8;
декор-цинк-400	текст-декор-цвет: #a1a1aa;
декор-цинк-500	текст-декор-цвет: #71717a;
декор-цинк-600	текст-декор-цвет: #52525b;
украшение-цинк-700	text-decoration-color: #3f3f46;
декор-цинк-800	текст-декор-цвет: #27272a;
декор-цинк-900	текст-декор-цвет: #18181b;
декор-нейтральный-50	текст-декор-цвет: #fafafa;
декор-нейтральный-100	текст-декорация-цвет: #f5f5f5;
украшение-нейтральный-200	текст-украшение-цвет: #e5e5e5;
украшение-нейтральный-300	текст-украшение-цвет: #d4d4d4;
оформление-нейтральный-400	текст-украшение-цвет: #a3a3a3;
оформление-нейтральный-500	текст-украшение-цвет: #737373;
оформление-нейтральный-600	текст-украшение-цвет: #525252;
оформление-нейтральный-700	текст-украшение-цвет: #404040;
украшение-нейтральный-800	текст-украшение-цвет: #262626;
оформление-нейтральный-900	текст-украшение-цвет: #171717;
декор-камень-50	текст-декор-цвет: #fafaf9;
декоративный камень-100	текстовый декоративный цвет: #f5f5f4;
украшение-камень-200	текст-украшение-цвет: #e7e5e4;
декоративный камень-300	цвет-декорации-текста: #d6d3d1;
декоративный камень-400	текстовый декоративный цвет: #a8a29e;
украшение-камень-500	текст-украшение-цвет: #78716c;
украшение-камень-600	текст-украшение-цвет: #57534e;
украшение-камень-700	текст-украшение-цвет: #44403c;
декор-камень-800	текст-декор-цвет: #2;
украшение-камень-900	текст-украшение-цвет: #1c1917;
украшение-красный-50	текст-украшение-цвет: #fef2f2;
украшение-красный-100	текст-украшение-цвет: #fee2e2;
украшение-красный-200	текст-украшение-цвет: #fecaca;
украшение-красный-300	текст-украшение-цвет: #fca5a5;
украшение-красный-400	text-decoration-color: #f87171;
украшение-красный-500	текст-украшение-цвет: #ef4444;
украшение-красный-600	текст-украшение-цвет: #dc2626;
украшение-красный-700	текст-украшение-цвет: #b91c1c;
украшение-красный-800	текст-украшение-цвет: #991b1b;
украшение-красный-900	текст-украшение-цвет: #7f1d1d;
украшение-оранжевый-50	цвет текста-украшения: #fff7ed;
украшение-оранжевый-100	текст-украшение-цвет: #ffedd5;
украшение-оранжевый-200	текст-украшение-цвет: #fed7aa;
украшение-оранжевый-300	текст-украшение-цвет: #fdba74;
украшение-оранжевый-400	текст-украшение-цвет: #fb923c;
украшение-оранжевый-500	text-decoration-color: #f97316;
украшение-оранжевый-600	текст-украшение-цвет: #ea580c;
украшение-оранжевый-700	текст-украшение-цвет: #c2410c;
украшение-оранжевый-800	цвет текста-украшения: #9a3412;
украшение-оранжевый-900	цвет текста-украшения: #7c2d12;
украшение-янтарь-50	текст-украшение-цвет: #fffbeb;
украшение-янтарь-100	текст-украшение-цвет: #fef3c7;
украшение-янтарный-200	текст-украшение-цвет: #fde68a;
украшение-янтарный-300	текст-украшение-цвет: #fcd34d;
украшение-янтарь-400	текст-украшение-цвет: #fbbf24;
украшение-янтарный-500	текст-украшение-цвет: #f59e0b;
украшение-янтарь-600	text-decoration-color: #d97706;
украшение-янтарный-700	текст-украшение-цвет: #b45309;
украшение-янтарный-800	текст-украшение-цвет: #	e;
украшение-янтарный-900	текст-украшение-цвет: #78350f;
украшение-желтый-50	текст-украшение-цвет: #fefce8;
украшение-желтый-100	текст-украшение-цвет: #fef9с3;
украшение-желтый-200	текст-украшение-цвет: #fef08a;
украшение-желтый-300	текст-украшение-цвет: #fde047;
украшение-желтый-400	текст-украшение-цвет: #facc15;
украшение-желтый-500	текст-украшение-цвет: #eab308;
украшение-желтый-600	текст-украшение-цвет: #ca8a04;
украшение-желтый-700	текст-украшение-цвет: #a16207;
украшение-желтый-800	текст-украшение-цвет: #854d0e;
украшение-желтый-900	текст-украшение-цвет: #713f12;
украшение-лайм-50	текст-украшение-цвет: #f7fee7;
украшение-лайм-100	текст-украшение-цвет: #ecfccb;
украшение-лайм-200	text-decoration-color: #d9f99d;
украшение-лайм-300	текст-украшение-цвет: #bef264;
украшение-лайм-400	цвет-украшения-текста: #a3e635;
декор-лайм-500	текст-декор-цвет: #84cc16;
декор-лайм-600	текст-декор-цвет: #65a30d;
украшение-лайм-700	цвет-украшения-текста: #4d7c0f;
украшение-лайм-800	цвет-украшения-текста: #3f6212;
декор-лайм-900	текст-декор-цвет: #365314;
декоративный зеленый-50	текстовый декоративный цвет: #f0fdf4;
украшение-зеленый-100	текст-украшение-цвет: #dcfce7;
украшение-зеленый-200	текст-украшение-цвет: #bbf7d0;
украшение-зеленый-300	text-decoration-color: #86efac;
украшение-зеленый-400	текст-украшение-цвет: #4ade80;
украшение-зеленый-500	текст-украшение-цвет: #22c55e;
украшение-зеленый-600	текст-украшение-цвет: #16a34a;
украшение-зеленый-700	текст-украшение-цвет: #15803d;
украшение-зеленый-800	текст-украшение-цвет: #166534;
украшение-зеленый-900	текст-украшение-цвет: #14532d;
украшение-изумруд-50	текст-украшение-цвет: #ecfdf5;
украшение-изумруд-100	цвет-украшения-текста: #d1fae5;
украшение-изумруд-200	цвет-украшения-текста: #a7f3d0;
украшение-изумруд-300	цвет-украшения-текста: #6ee7b7;
украшение-изумруд-400	text-decoration-color: #34d399;
украшение-изумруд-500	текст-украшение-цвет: #10b981;
украшение-изумруд-600	текст-украшение-цвет: #059669;
украшение-изумруд-700	текст-украшение-цвет: #047857;
украшение-изумруд-800	текст-украшение-цвет: #065f46;
украшение-изумруд-900	текст-украшение-цвет: #064e3b;
украшение-бирюзовый-50	текст-украшение-цвет: #f0fdfa;
украшение-бирюзовый-100	текст-украшение-цвет: #ccfbf1;
украшение-бирюзовый-200	текст-украшение-цвет: #99f6e4;
украшение-бирюзовый-300	текст-украшение-цвет: #5eead4;
украшение-бирюзовый-400	текст-украшение-цвет: #2dd4bf;
украшение-бирюзовый-500	text-decoration-color: #14b8a6;
украшение-бирюзовый-600	текст-украшение-цвет: #0d9488;
украшение-бирюзовый-700	текст-украшение-цвет: #0f766e;
украшение-бирюзовый-800	текст-украшение-цвет: #115e59;
декоративный-бирюзовый-900	текстовый-декоративный-цвет: #134e4a;
украшение-голубой-50	текст-украшение-цвет: #ecfeff;
украшение-голубой-100	текст-украшение-цвет: #cffafe;
украшение-голубой-200	текст-украшение-цвет: #a5f3fc;
украшение-голубой-300	текст-украшение-цвет: #67e8f9;
украшение-голубой-400	цвет-украшения-текста: #22d3ee;
украшение-голубой-500	цвет-украшения-текста: #06b6d4;
украшение-голубой-600	text-decoration-color: #0891b2;
украшение-голубой-700	текст-украшение-цвет: #0e7490;
украшение-голубой-800	текст-украшение-цвет: #155e75;
украшение-голубой-900	текст-украшение-цвет: #164e63;
украшение-небо-50	текст-украшение-цвет: #f0f9ff;
украшение-небо-100	текст-украшение-цвет: #e0f2fe;
украшение-небо-200	текст-украшение-цвет: #bae6fd;
украшение-небо-300	текст-украшение-цвет: #7dd3fc;
украшение-небо-400	текст-украшение-цвет: #38bdf8;
украшение-небо-500	текст-украшение-цвет: #0ea5e9;
украшение-небо-600	текст-украшение-цвет: #0284c7;
украшение-небо-700	text-decoration-color: #0369a1;
украшение-небо-800	текст-украшение-цвет: #075985;
украшение-небо-900	текст-украшение-цвет: #0c4a6e;
украшение-синий-50	текст-украшение-цвет: #eff6ff;
украшение-синий-100	текст-украшение-цвет: #dbeafe;
украшение-синий-200	текст-украшение-цвет: #bfdbfe;
украшение-синий-300	текст-украшение-цвет: #93c5fd;
украшение-синий-400	текст-украшение-цвет: #60a5fa;
декоративный синий-500	текстовый декоративный цвет: #3b82f6;
украшение-синий-600	текст-украшение-цвет: #2563eb;
украшение-синий-700	текст-украшение-цвет: #1d4ed8;
украшение-синий-800	text-decoration-color: #1e40af;
декоративный синий-900	текстовый декоративный цвет: #1e3a8a;
украшение-индиго-50	текст-украшение-цвет: #eef2ff;
украшение-индиго-100	цвет текста-украшения: #e0e7ff;
украшение-индиго-200	цвет текста-украшения: #c7d2fe;
украшение-индиго-300	текст-украшение-цвет: #a5b4fc;
украшение-индиго-400	цвет текста-украшения: #818cf8;
декор-индиго-500	текст-декор-цвет: #6366f1;
украшение-индиго-600	цвет текста-украшения: #4f46e5;
декор-индиго-700	текст-декор-цвет: #4338ca;
декор-индиго-800	текст-декор-цвет: #3730a3;
украшение-индиго-900	text-decoration-color: #312e81;
украшение-фиолетовый-50	цвет текста-украшения: #f5f3ff;
украшение-фиолетовый-100	текст-украшение-цвет: #ede9fe;
украшение-фиолетовый-200	цвет текста-украшения: #ddd6fe;
украшение-фиолетовый-300	текст-украшение-цвет: #c4b5fd;
украшение-фиолетовый-400	текст-украшение-цвет: #a78bfa;
украшение-фиолетовый-500	текст-украшение-цвет: #8b5cf6;
украшение-фиолетовый-600	текст-украшение-цвет: #7c3aed;
украшение-фиолетовый-700	цвет текста-украшения: #6d28d9;
украшение-фиолетовый-800	цвет текста-украшения: #5b21b6;
украшение-фиолетовый-900	текст-украшение-цвет: #4c1d95;
украшение-фиолетовое-50	text-decoration-color: #faf5ff;
украшение-фиолетовый-100	текст-украшение-цвет: #f3e8ff;
украшение-фиолетовый-200	текст-украшение-цвет: #e9d5ff;
украшение-фиолетовый-300	текст-украшение-цвет: #d8b4fe;
украшение-фиолетовый-400	текст-украшение-цвет: #c084fc;
украшение-фиолетовый-500	текст-украшение-цвет: #a855f7;
украшение-фиолетовый-600	текст-украшение-цвет: #9333ea;
украшение-фиолетовый-700	цвет текста-украшения: #7e22ce;
украшение-фиолетовый-800	текст-украшение-цвет: #6b21a8;
украшение-фиолетовый-900	текст-украшение-цвет: #581c87;
украшение-фуксия-50	текст-украшение-цвет: #fdf4ff;
декор-фуксия-100	text-decoration-color: #fae8ff;
украшение-фуксия-200	цвет-украшения-текста: #f5d0fe;
украшение-фуксия-300	текст-украшение-цвет: #f0abfc;
украшение-фуксия-400	цвет-украшения-текста: #e879f9;
декор-фуксия-500	текст-декор-цвет: #d946ef;
оформление-фуксия-600	текст-украшение-цвет: #c026d3;
декор-фуксия-700	текст-декор-цвет: #a21caf;
декор-фуксия-800	текст-декор-цвет: #86198f;
декор-фуксия-900	текст-декор-цвет: #701a75;
украшение-розовый-50	текст-украшение-цвет: #fdf2f8;
украшение-розовый-100	текст-украшение-цвет: #fce7f3;
украшение-розовый-200	text-decoration-color: #fbcfe8;
украшение-розовый-300	текст-украшение-цвет: #f9a8d4;
украшение-розовый-400	текст-украшение-цвет: #f472b6;
украшение-розовый-500	текст-украшение-цвет: #ec4899;
украшение-розовый-600	текст-украшение-цвет: #db2777;
украшение-розовый-700	текст-украшение-цвет: #be185d;
украшение-розовый-800	текст-украшение-цвет: #9d174d;
украшение-розовый-900	текст-украшение-цвет: #831843;
украшение-роза-50	текст-украшение-цвет: #fff1f2;
украшение-роза-100	текст-украшение-цвет: #ffe4e6;
украшение-роза-200	текст-украшение-цвет: #fecdd3;
украшение-роза-300	text-decoration-color: #fda4af;
украшение-роза-400	текст-украшение-цвет: #fb7185;
украшение-роза-500	текст-украшение-цвет: #f43f5e;
украшение-роза-600	текст-украшение-цвет: #e11d48;
украшение-роза-700	текст-украшение-цвет: #be123c;
украшение-роза-800	текст-украшение-цвет: #9ф1239;
украшение-роза-900	текст-украшение-цвет: #881337;

Оформление шрифтов и текста — недостающее звено

Раздел 2: Разметка документа

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

<стиль> h2{ цвет:красный; цвет фона:желтый; } Это заголовок h2

Мы также можем настроить семейство и размер шрифта. Вы заметите, что ни одно из этих изменений не влияет ни на что за пределами наших заголовков. Хотя вы можете увидеть примеры, использующие ключевые термины для обозначения размера, начиная от «сверхсверхмаленький» (xx-small) до «сверхсверхсверхбольшой» (xx-большой), рекомендуется всегда быть как можно более конкретным, т. к. ключевые термины могут обрабатываться по-разному в разных браузерах. Вместо этого в наших примерах будут использоваться процентные и фиксированные размеры шрифта. Для этого мы выделим наш контент h2 курсивом и уменьшим размер до 20 пикселей в высоту:

<стиль> h2{ цвет:красный; цвет фона:желтый; стиль шрифта: курсив; размер шрифта: 20 пикселей; } Это заголовок h2

Это всего лишь несколько примеров полной мощи шрифта с помощью CSS. Некоторые «причудливые» методы включают такие эффекты, как использование заглавных букв при одновременном уменьшении текста (маленькие заглавные буквы):

<стиль> h2{ цвет:красный; цвет фона:желтый; вариант шрифта: капитель; } Это заголовок h2

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

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

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

1. <стиль>

1. р {

1. отступ текста: 15 пикселей;

1. text-align:justify;

1. }

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

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

1. <стиль>

1. .strikeOut {text-decoration: line-through;}

1. .titles{украшение текста:подчеркивание;}

1. а {украшение текста:нет;}

1. Текст, который мы хотим вычеркнуть
   

1. Автостопом по Галактике
   

1. Ссылка без подчеркивания

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

1. <стиль>

1. а: ссылка {цвет: # FF0000; background-color:yellow;} /* непосещенная ссылка */

1. а: посетил {цвет: # 00FF00; background-color:orange;} /* посещенная ссылка */

1. a: hover {цвет: # FF00FF; background-color:green;} /* указатель мыши над ссылкой */

1. а: активный {цвет: # 0000FF; background-color:white;} /* выбранная ссылка */

1. Вот наша поддельная ссылка!

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

Во-первых, это размер текста. Современные браузеры поддерживают увеличение и уменьшение текста страницы самостоятельно (используя преимущества CSS-свойств пользовательского стиля). Хотя это снижает необходимость предоставлять вашим пользователям таблицы стилей для выбора, это означает, что вы должны протестировать увеличение и уменьшение размера шрифта на вашем сайте из браузера (обычно ctrl и +, ctrl и -). Это позволит вам увидеть, как далеко можно увеличить размер шрифта, прежде чем он будет мешать макету. Возможно, вам придется скорректировать свой стиль, чтобы учесть эти изменения. Сколько уровней вы хотите учитывать, зависит от вас, но общее практическое правило заключается в том, что ваша страница должна поддерживать +3 с небольшими нарушениями. Конечно, вы можете предложить специальные таблицы стилей со ссылками, чтобы включить их, что даст вам лучший контроль над изменениями, в то же время предлагая вашим пользователям адаптируемый опыт.

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

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

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

Например, красно-зеленая форма дальтонизма (Deuterope) делает красный и зеленый цвета более похожими:

Если вы рассчитываете на цвет кнопки как на важный индикатор функционирования, то этот эффект был потерян. Хуже того, если вы объединили цвета текста и фона, которые не поддаются чтению для дальтоников, они могут вообще не понять функцию кнопки!

Эти соображения являются лишь некоторыми примерами гораздо более широкой темы, которой является доступность. W3C ведет полный список элементов, которые следует учитывать для улучшения вашего сайта для самого широкого круга пользователей, и существует ряд сайтов, которые могут сканировать ваши страницы, чтобы предоставить примечания и советы, соответствующие руководству W3C, в том числе один из W3C. на http://validator.w3.org/. Сайты, прошедшие проверку W3C, могут добавлять на свои страницы «штампы», которые указывают на их усилия и поддержку, а также на то, что эти соображения были учтены.

Модуль оформления текста CSS, уровень 3

1. Введение

Этот подраздел не является нормативным.

Этот модуль охватывает оформление текста, т. е. украшение глифов. текста, набранного в соответствии со шрифтовыми и типографскими правилами. (См. [CSS-TEXT-3] и [CSS-FONTS-3].) Такие особенности традиционно используются не только в чисто декоративных целях, но также в некоторых случаях, чтобы показать ударение, для почтения, а также для указания редакционных изменений, таких как вставки, удаления и орфографические ошибки.

Уровни CSS 1 и 2 определяли только очень простые украшения линий (подчеркивание, надчеркивание и зачеркивание). соответствует западным типографским традициям. Уровень 3 этого модуля добавляет возможность изменять цвет, стиль, положение и непрерывность этих украшений, а также вводит знаки ударения (традиционно используемые в восточноазиатской типографике), и тени (которые были предложены, а затем перенесены с уровня 2).

1.1. Взаимодействия модулей

Этот модуль заменяет и расширяет возможности оформления текста. функции, определенные в [CSS2], глава 16.

1.2. Определения значений

Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3]. Типы значений, не определенные в этой спецификации, определены в значениях и единицах CSS [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.

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

1.3. Терминология

Термины «знак», «буква» и «язык содержимого», используемые в этой спецификации, определены в [CSS-TEXT-3]. Другие термины и понятия, используемые в данной спецификации, определяются в [CSS2] и [CSS-WRITING-MODES-4].

2. Оформление линий: подчеркивание, зачеркивание и зачеркивание

Следующие свойства описывают декорации строк, которые добавляются к содержимому элемента. При указании или распространении на встроенный блок эта коробка становится коробка для украшения для этого украшения, нанесение украшения на все его фрагменты. Затем декорация распространяется на любые входящие блоки блочного уровня, разделяющие встроенный блок. (см. раздел 9.2.1.1 CSS2.1). При указании или распространении в блочном контейнере, который устанавливает встроенный контекст форматирования, украшения распространяются на анонимный встроенный блок, который обертывает все дочерние элементы встроенного уровня в потоке блочного контейнера. При указании или распространении на контейнер ruby, украшения распространяются только на рубиновую основу. Для всех других типов коробок украшения распространяются на всех дочерних элементов в потоке.

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

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

Обратите внимание, что CSS 2.1 требует всегда пропускать поля, границы и отступы. На этом уровне по умолчанию пропускаются только поля, границы и отступы декоративного блока. В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому умолчанию. Кроме того, на уровне 4 ожидается контроль над оформлением начальных/конечных пробелов. и будет применяться по умолчанию к элементам HTML ins и del .

UA могут прерывать подчеркивание и надчеркивание там, где линия пересекает чернила глифов и на некотором расстоянии по обе стороны от контура глифа; это поведение не контролируется на этом уровне, но будет дополнительно определено на уровне 4. Однако сквозные линии должны оставаться непрерывными.

Пропуск чернил глифов

Когда UA прерывает подчеркивание или надчеркивание на границах глифа, форма линии на этой границе должна следуйте форме глифа.

Обратите внимание, что эта спецификация намеренно не предписывает конкретный метод. для «следования форме» глифа так что UA могут принять соответствующие меры для обработки эстетические и эксплуатационные характеристики. Например, UA может предполагать, что квадратные линии заканчиваются ниже определенного порога размера по соображениям производительности; или используйте трапециевидные окончания для аппроксимации кривых, особенно на украшениях с более тонкой линией. По эстетическим соображениям, ПА может также учитывать, что происходит, когда граница глифа пересекает только часть толщины линии или наклонена близко к горизонтали— точно следует кривой может привести к типографски неудобным обрывкам подчеркивания. Показывать ли линию в закрытых областях глифа еще не принято. другое соображение.

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

Относительное позиционирование потомка перемещает все оформления текста наносится на него вместе с текстом потомка; это не влияет вычисление начального положения украшения на этой линии. Свойство видимости, text-shadow, фильтры и другие графические преобразования аналогичным образом влияет на все украшения текста, примененные к этому блоку — , включая декорации, размноженные из ящика-предка — , и не влияют на расчет их начального положения или толщины. (В случае линейных украшений, нарисованных поверх атомарного встроенного или через поля/границы/отступы незаменяемого встроенного блока, они аналогично связаны с затронутым атомарным встроенным / незамещенным встроенным полем а не с декоративной коробкой.)

В следующей таблице стилей и фрагменте документа:

 blockquote {украшение текста: подчеркивание; цвет синий; }
em { дисплей: блок; }
процитировать { цвет: фуксия; }
 

 <цитата>
 

  <диапазон>
   Помогите помогите!
    Я под шапкой! 
    —ГвиФ 
  
 

 

…подчеркивание элемента цитаты распространяется на анонимный встроенный блок, который окружает элемент span, вызывая текст «Помогите, помогите!» быть синим, с синим подчеркиванием от анонимная строка под ним, цвет берется из элемент цитаты. текст в блоке em также подчеркнут, как и во входящем блоке для в котором распространяется подчеркивание. Последняя строка текста — фуксия, но подчеркивание под ним по-прежнему синее подчеркивание от анонимный встроенный элемент. На этой диаграмме показаны поля, задействованные в приведенном выше примере. закругленная линия цвета морской волны представляет собой обертку анонимного встроенного элемента встроенное содержимое элемента абзаца, скругленная синяя линия представляет собой элемент span, а оранжевые линии представляют блоки.

Примечание. Декорации линий распространяются по дереву коробок, не по наследству, и, следовательно, не влияет на потомков при указании элемента с display:contents.

2.1. Линии оформления текста: свойство text-decoration-line

Указывает, какие линейные декорации, если таковые имеются, добавляются к элементу. Значения имеют следующие значения:

нет

Не производит и не запрещает оформление текста.

подчеркивание

Каждая строка текста подчеркнута.

над чертой

Каждая строка текста имеет строку над ней (т.е. на противоположной сторону от подчеркивания).

проходной

Каждая строка текста имеет черту посередине.

мигает

Текст мигает (поочередно видимый и невидимый). Соответствующие пользовательские агенты могут просто не мигать текстом. Обратите внимание, что не мигание текста является одним из методов выполнения контрольной точки 3.3 WAI-UAAG. Это значение равно устарел в пользу анимации [CSS-ANIMATIONS-1].

Примечание. В режимах вертикального письма позиция подчеркивания текста может привести к смене сторон подчеркивания и надчеркивания. Это позволяет позиции подчеркивания отключать языковые настройки. автоматически.

2.2. Стиль оформления текста: свойство text-decoration-style

Это свойство определяет стиль линий, рисуемых для текстовое оформление, указанное на элементе. Ценности имеют то же значение, что и для стиля границы свойства [CSS-BACKGROUNDS-3]. волнистый указывает на волнистую линию.

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

2.3. Цвет оформления текста: свойство text-decoration-color

Это свойство указывает цвет оформления текста (подчеркивание overlines и line-throughs), заданные для элемента с text-decoration-line.

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

2.4. Text Decoration Shorthand: свойство text-decoration

Это свойство является сокращением для установки text-decoration-line, text-decoration-color, и text-decoration-style в одном объявлении. Пропущенные значения устанавливаются в их начальные значения.

Примечание. Объявление text-decoration, в котором отсутствует оба значения text-decoration-color и text-decoration-style обратно совместим с CSS уровней 1 и 2.

В следующем примере непосещенные ссылки подчеркнуты сплошным синим цветом. подчеркивание в UA CSS1 и CSS2 и подчеркивание темно-синей точкой в ​​UA CSS3.

 :ссылка {
  цвет синий;
  оформление текста: подчеркивание;
  оформление текста: подчеркивание темно-синим пунктиром; /* Игнорируется в UA CSS1/CSS2 */
}
 

Примечание. В сокращении намеренно опущено свойство text-underline-position, который является параметром, зависящим от языка/системы письма, который отключает содержимое, так что он может каскадировать и наследовать независимо из (не унаследованных) стилистических настроек стенографии оформления текста.

2.5. Text Underline Position: свойство text-underline-position

Это свойство задает позицию подчеркивания, указанную в элементе. (Это не влияет на подчеркивание, указанное элементами-предками.) Если указано только левое или правое, автоматически также подразумевается.

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

 :root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
:root:lang(zh), [lang|=zh] { text-underline-position: under left; }
 

Значения имеют следующие значения:

авто

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

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

Типичное «алфавитное» подчеркивание располагается сразу под буквенной базовой линией

ниже

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

text-underline-position: under

Поскольку text-underline-position наследуется и не сбрасывается сокращением text-decoration следующий пример переключает документ на подчеркивание, что может быть более подходящим для написания систем с длинными, сложными спусковые крючки. Это также часто полезно для математических или химических тексты, в которых используется много индексов.

: root { text-underline-position: under; } 

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

слева

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

справа

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

слева	справа

В режимах вертикальной типографики значения text-underline-position left и right позволяют размещать подчеркивание на любом сторону текста. (В горизонтальных типографских режимах оба значения рассматривается как авто.)

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

против

Правильное и неправильное отображение ABCD

Обратите внимание, что оформление строк может охватывать элементы с разными размерами шрифта и вертикальное выравнивание, лучшая позиция для оформления строки не обязательно идеальное положение, продиктованное декоративной коробкой. Например, надчеркивание расположено на мелком шрифте. фактически станет сквозным, если элемент содержит текст со значительно большим размером шрифта. Даже для подчеркивания, если текст не выровнен по алфавиту (например, в стилях вертикального набора, текст по умолчанию выравнивается по центральной базовой линии [CSS-WRITING-MODES-4]) подчеркивание будет прорезать дочерний текст с большим размером шрифта. Таким образом, учет контента потомков UA приведет к лучшей типографике.

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

UA должны корректировать позиции строк чтобы соответствовать смещенным метрикам декорирования коробок, смещенным со значениями вертикального выравнивания, отличными от базового [CSS2], или с нижними/надстрочными индексами через вариантное положение шрифта [CSS-FONTS-3], но не должен регулировать положение или толщину линии в ответ потомкам украшающей коробки, которые так стилизованы. Это позволяет правильно оформить верхние и нижние индексы. (подчеркнуто, зачеркнуто и т. д.) но не позволяет им искажать или нарушать расположение таких украшений на их предках.

Пример подчеркивания, примененного к тексту с надстрочным индексом по сравнению с подчеркиванием, примененному к тексту , содержащему верхний индекс

Некоторые форматы шрифтов (например, OpenType) могут предоставлять информацию о соответствующем положении украшения строки. UA должен использовать такую ​​информацию (например, толщина подчеркивания, или соответствующую позицию подчеркивания в алфавитном порядке) от шрифта везде, где это уместно.

Примечание. Как правило, метрики шрифта OpenType указывают позицию буквенное подчеркивание; в некоторых случаях (особенно в шрифтах CJK), это дает позицию под левым подчеркиванием. (В этом случае показатели подчеркивания шрифта обычно коснитесь нижнего края поля em). UA может, но не обязан исправлять неправильные метрики шрифта.

3. Знаки выделения

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

Акцент (показан синим цветом для ясности) применен к тексту на японском языке

Сокращение text-emphasis-style и text-emphasis-style и text-emphasis-color, можно использовать для применения таких меток к тексту. Свойство text-emphasis-position, которое наследуется отдельно, позволяет задать положение знаков ударения по отношению к тексту.

3.1. Стиль метки выделения: свойство text-emphasis-style

Это свойство применяет метки выделения к тексту элемента. Значения имеют следующие значения:

нет

Без акцентов.

наполненный

Форма заполнена сплошным цветом.

открытый

Полая форма.

точка

Отображение маленьких кружков в качестве меток. Закрашенная точка — это U+2022 ‘•’, а открытая точка — это U+25E6 ‘◦’.

круг

Отображение больших кругов в качестве меток. Закрашенный кружок — U+25CF ‘●’, а незакрашенный кружок — U+25CB ‘○’.

двойной круг

Отображение двойных кругов в качестве меток. Закрашенный двойной кружок — это U+25C9 ‘◉’, а открытый двойной кружок — это U+25CE ‘◎’.

треугольник

Отображение треугольников в виде меток. Закрашенный треугольник — U+25B2 ‘▲’, а незакрашенный треугольник — U+25B3 ‘△’.

кунжут

Отображение кунжута в виде меток. Заполненный кунжут — U+FE45 ‘﹅’, а открытый кунжут — U+FE46 ‘﹆’.

<строка>

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

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

Метки должны быть нарисованы с использованием настроек шрифта элемента с добавлением рубиновой функции и размер уменьшен на 50%. Однако, поскольку не все шрифты имеют все эти глифы, и некоторые шрифты используют неподходящие размеры для выделения в этих кодовых точках, UA может решить использовать шрифт, известный как подходящий для выделения, или вместо этого метки могут быть синтезированы UA. Знаки должны оставаться вертикальными в режимах вертикальной типографики: как и символы CJK, они не поворачиваются в соответствии с режимом письма. Ориентация знаков в горизонтальных типографских способах вертикального письма на этом уровне не определена. (но может быть определено на будущем уровне, если возникнут окончательные варианты использования).

Примечание. Одним из примеров хороших шрифтов для выделений является шрифт Adobe Kenten Generic OpenType с открытым исходным кодом, который специально разработан для знаков акцента.

Метки рисуются один раз для каждой единицы типографского символа. Однако знаки ударения , а не нарисованы для:

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

3.2. Emphasis Mark Color: свойство text-emphasis-color

Это свойство определяет цвет переднего плана меток выделения.

Примечание: ключевое слово currentcolor вычисляется само по себе и преобразуется в значение цвета после выполнения наследования. Это означает, что text-emphasis-color по умолчанию соответствует цвету текста, даже если цвет меняется между элементами.

3.3. Emphasis Mark Shorthand: свойство text-emphasis

Это свойство является сокращением для установки стиля выделения текста и цвета выделения текста в одном объявлении. Пропущенные значения устанавливаются в их начальные значения.

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

3.4. Emphasis Mark Position: свойство text-emphasis-position

Это свойство описывает, где рисуются метки акцента. Если [правильно | левый ] опущен, по умолчанию он правый. Значения имеют следующие значения:

свыше

Рисовать метки поверх текста в горизонтальных типографских режимах.

ниже

Рисовать метки под текстом в горизонтальных типографских режимах.

справа

Отрисовка меток справа от текста в режимах вертикальной типографики.

слева

Рисовать метки слева от текста в режимах вертикальной типографики.

: Знаки выделения рисуются точно так, как если бы каждый символ был присвоил метке текст рубиновой аннотации с рубиновой позицией задается text-emphasis-position и рубиновым выравниванием по центру. Обратите внимание, что это положение может быть скорректировано, если оно будет противоречить с подчеркиванием или надчеркиванием украшений.

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

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

Предпочтительная метка выделения и положение рубина

Язык	Предпочтительная должность		Иллюстрация
	Горизонтальный	Вертикальный
Японский	более	справа
Корейский
Монгольский
Китайский	ниже	справа

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

Знаки ударения применены к 4 символам, рубин также нанесен на 2 из них

Некоторые редакторы предпочитают скрывать знаки выделения, когда они конфликтуют с ruby. В HTML это можно сделать с помощью следующего правила стиля:

 ruby ​​{выделение текста: нет; } 

Некоторые другие редакторы предпочитают скрывать ruby, когда они конфликтуют с метками выделения. В HTML это можно сделать с помощью следующего шаблона:

 em { text-emphasis: dot; } /* Установить выделение текста для элементов  */
em rt { дисплей: нет; } /* Скрыть ruby ​​внутри элементов  */
 

4. Text Shadows: свойство text-shadow

Это свойство принимает список эффектов тени, разделенных запятыми. применяется к тексту элемента. Значения интерпретируются как box-shadow [CSS-BACKGROUNDS-3]. (Но обратите внимание, что значения распространения и ключевое слово inset не допускаются. ) Каждый слой затеняет текст элемента и все его текстовые украшения. (составлены вместе).

Эффекты тени применяются спереди назад: первая тень сверху. Таким образом, тени могут накладываться друг на друга, но они никогда не накладываются на сам текст. Тень должна быть нарисована на уровне стека между границей элемента и/или фоном (если есть) и элементы текста и оформления текста. Пользовательские пользователи должны избегать отрисовки текстовых теней поверх текста. в соседних элементах, принадлежащих к тому же уровню стека и контексту стека. (Это может означать, что точный уровень стека теней зависит от того, имеет ли элемент границу или фон: таким образом, точное поведение текстовых теней в стеке определяется UA.) Не определено, затеняет ли данный теневой слой каждый глиф или украшение отдельно или если текст и/или украшения сглажены, а затем затенены.

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

Примечание. Определенный здесь порядок рисования теней противоположен того, что определено в Рекомендации CSS2 1998 года.

Свойство text-shadow применяется как к ::first-line и :: первая буква псевдоэлементов.

5. Рисование текстовых украшений

5.1. Картина Орден текстовых украшений

Как и в [CSS2], украшения текста рисуются непосредственно над/под украшаемым текстом, в следующем порядке (сначала снизу):

• тени (текст-тень)
• подчеркивание (украшение текста)
• надчеркивания (украшение текста)
• текст
• знаки выделения (выделение текста)
• построчное (текстовое оформление)

Если линейные украшения нарисованы поперек боксов или атомарных встроенных линий, они рисуются над непозиционированным содержимым и чуть ниже любых позиционированных потомков (непосредственно под слоем № 8 в Приложении E CSS2. 1).

5.2. Переполнение текстовых украшений

Оформление текста, выходящее за пределы рамки, считается переполнением чернил: они не расширяют прокручиваемую область переполнения. [CSS-переполнение-3]

Приложение A: Благодарности

Эта спецификация была бы невозможна без помощи: Айман Алдалех, Берт Бос, Тантек Челик, Стивен Дич, Джон Даггетт, Мартин Дюрст, Лори Анна Эдлунд, Бен Эррез, Янив Файнберг, Арье Гиттельман, Ян Хиксон, Мартин Хейдра, Ричард Исида, Масаясу Исикава, Майкл Йохимсен, Эрик ЛеВайн, Эмброуз Ли, Хокон Виум Ли, Крис Лилли, Кен Лунде, Нат МакКалли, Шинью Мураками, Пол Нельсон, Крис Пратли, Марчин Савицки, Арнольд Шрайвер, Рахул Соннад, Мишель Суиньяр, Такао Сузуки, Фрэнк Танг, Крис Трэшер, Этан Векслер, Крис Уилсон, Масафуми Ябэ и Стив Зиллес.

Приложение B: Таблица стилей UA по умолчанию

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

 /* типичный стиль HTML */
мигать {
  строка оформления текста: мерцание;
}
с, забастовка, дель {
  оформление текста: сквозное;
}
u, ins, :ссылка, :посетили {
  оформление текста: подчеркивание;
}
аббр [название], акроним [название] {
  оформление текста: подчеркивание пунктиром;
}
/* отключить наследование меток выделения текста на ruby-текст:
  знаки ударения должны применяться только к основному тексту */
rt {выделение текста: нет; }
/* установить соответствующую языку позицию метки акцента по умолчанию */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko] { text-emphasis-position: over right; }
/* установить соответствующую языку позицию подчеркивания по умолчанию */
:root:яз(я), [яз|=я],
:root:яз(мн), [язык|=мн],
:root:lang(ko), [lang|=ko] { text-underline-position: right; }
:root:lang(zh), [lang|=zh] { text-underline-position: left; }
/* auto выбрано (подразумевается) выше, а не ниже
   из-за проблем с совместимостью контента */
 

Если вы обнаружите какие-либо проблемы, рекомендации по добавлению или исправления, пожалуйста, отправьте информацию на www-style@w3. org с [css-text-decor] в строке темы.

В то время как text-decoration-line: blink не может быть полностью воспроизведен с другими существующими свойствами, авторы могут добиться очень похожего эффекта с помощью следующего CSS:

 @ключевые кадры мигают {
  0% {
    видимость: скрытая;
    функция синхронизации анимации: шаг-конец;
  }
  25%, 100% {
    видимость: видимая;
  }
}
мигать {
  анимация: мигание 1с бесконечно;
}
 

Приложение С: Изменения

Изменения по сравнению с рекомендацией-кандидатом

от августа 2019 г.

Изменения включают:

• Уточнить, что text-shadow анимируется как список теней, как box-shadow. (выпуск 4375)
• Четко укажите свойства, применимые к тексту. (выпуск 5303)
• Мелкие редакционные исправления.

Изменения по сравнению с Рекомендацией-кандидатом от июля 2018 г.

Изменения включают:

• : Уточнено, что переполнение оформления текста является переполнением чернил. (выпуск 3272)
• Исправлены несоответствия в примерах правил положения подчеркивания текста. (Выпуск 3441)
• Очищены строки «Вычисленное значение» в соответствии с новыми соглашениями.

Доступно расположение комментариев.

Изменения по сравнению с рекомендацией-кандидатом

от августа 2013 г.

Значительные изменения включают:

• Отложенное оформление текста — переход на уровень 4 для внесения серьезных изменений. Определенные поведенческие по умолчанию в прозе. (Выпуск 1, Выпуск 22, Выпуск 26)
• Указано, что функция пропуска чернил не влияет на линейные проходы. (Выпуск 24)
• Рекомендуется, чтобы при пропуске рукописного ввода концы строк соответствовали форме глифа. (выпуск 30)
• Обновлены условия, чувствительные к режиму письма, чтобы они зависели от типографского режима, для учета добавления значений sideways-lr и sideways-rl к свойству режима письма. Отмеченная ориентация меток упора под sideways-lr и sideways-rl не определена. (Выпуск 10, Выпуск 20)
• Сделано [право | left ] опция text-emphasis-position необязательна, по умолчанию вправо. (Выпуск 17)
• Положение подчеркивания текста теперь подразумевает автоматическое, а не нижнее, когда указано только левое или правое. (Выпуск 18)
• Изменено оформление текста, чтобы пропустить начальные и конечные пробелы. (выпуск 6)
• Отмечено, что положение рубиновых аннотаций может быть скорректировано чтобы избежать конфликтов с оформлением текста. (Выпуск 21)
• Изменено начальное значение text-shadow на текущий цвет . (Выпуск 28)
• Исправлена ​​ошибка в строке «Вычисляемое значение» для text-shadow. (Выпуск 7)
• Исправлен канонический порядок значений text-shadow для соответствия реализациям. (выпуск 35)
• Определено расположение меток акцента относительно автоматически скрытых и пустых рубиновых аннотаций. (Выпуск 9)

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

• Выделение текста по умолчанию пропускает пунктуацию. (Выпуск 16)
• Добавлено правило для применения рубина к шрифту выделений. (Выпуск 13)
• Различные исправления и улучшения правил UA по умолчанию для text-emphasis-position и text-underline-position. (Выпуск 11, Выпуск 12, Выпуск 18, Выпуск 19, Выпуск 36)

Требования соответствия выражаются комбинацией описательные утверждения и терминология RFC 2119. Ключевые слова «ОБЯЗАТЕЛЬНО», «НЕ ДОЛЖЕН», «ТРЕБУЕТСЯ», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего документ следует интерпретировать, как описано в RFC 2119.. Однако для удобства чтения эти слова не отображаются в верхнем регистре. буквы в этой спецификации.

Весь текст данной спецификации является нормативным, за исключением разделов явно помечены как ненормативные, примеры и примечания. [RFC2119]

Примеры в этой спецификации вводятся словами «например». или отделены от нормативного текста с помощью class="example" , следующим образом:

Информационные примечания начинаются со слова «Примечание» и отделяются от нормативный текст с class="note" , например:

Рекомендации — это нормативные разделы, оформленные так, чтобы привлечь особое внимание и отделить от другого нормативного текста с помощью , например это: UA ДОЛЖНЫ предоставлять доступную альтернативу.

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

Средство визуализации соответствует этой спецификации. если, в дополнение к интерпретации таблицы стилей, как определено соответствующие спецификации, он поддерживает все функции, определенные по этой спецификации, правильно разбирая их и рендеринга документа соответственно. Однако неспособность А. UA для правильного отображения документа из-за ограничений устройства не делает UA несовместимым. (Например, UA не требуется для цветопередачи на монохромном мониторе.)

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

Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью для назначить резервные значения, средства визуализации CSS должны считать недействительными (и игнорировать при необходимости) любые at-правила, свойства, значения свойств, ключевые слова, и другие синтаксические конструкции, для которых они не имеют применимого уровня поддерживать. В частности, пользовательские агенты нельзя выборочно игнорировать неподдерживаемые значения компонентов и учитывать поддерживаемые значения в одном объявление многозначного свойства: если какое-либо значение считается недействительным (так как должны быть неподдерживаемые значения), CSS требует, чтобы все объявление быть проигнорировано.

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

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

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

Дополнительная информация о представлении тестовых примеров и отчетов о внедрении можно найти на веб-сайте Рабочей группы CSS по адресу https://www. w3.org/Style/CSS/Test/. Вопросы следует направлять в список рассылки [email protected].

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

Имя	Значение	Исходный	Применяется к	Инг.	%возраст	Тип анимации	Канонический порядок	Расчетное значение
текстовое оформление	<'строка оформления текста'> || <'стиль оформления текста'> || <'text-decoration-color'>	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	на грамматику	см. отдельные свойства
цвет текста-декорации	<цвет>	текущий цвет	все элементы	нет	н/д	по типу вычисляемого значения	на грамматику	вычисляемый цвет
текст-декор-линия	нет | [подчеркнуть || надчеркивание || линейный || мигать]	нет	все элементы	нет (но см. прозу выше)	н/д	дискретный	на грамматику	указанное ключевое слово (я)
стиль оформления текста	твердый | двойной | пунктирная | пунктир | волнистый	твердый	все элементы	нет	н/д	дискретный	на грамматику	указанное ключевое слово
выделение текста	<'стиль выделения текста'> || <'text-emphasis-color'>	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	на грамматику	см. отдельные свойства
цвет выделения текста	<цвет>	текущий цвет	текст	да	н/д	по типу вычисляемого значения	на грамматику	вычисляемый цвет
положение акцента текста	[ более | под ] && [ справа | оставил ]?	справа	текст	да	н/д	дискретный	на грамматику	указанное ключевое слово (я)
стиль выделения текста	нет | [[ заполнено | открыть ] || [ точка | круг | двойной круг | треугольник | кунжут ] ] | <строка>	нет	текст	да	н/д	дискретный	на грамматику	ключевое слово нет, пара ключевых слов, представляющих форму и заливку, или строка
тень текста	нет | [ <цвет>? && <длина>{2,3} ]#	нет	текст	да	н/д	как теневой список	на грамматику	либо ключевое слово none, либо список, каждый элемент которого состоит из трех абсолютных длин плюс вычисляемый цвет
позиция подчеркивания текста	авто | [ под || [ слева | Правильно ] ]	авто	все элементы	да	н/д	дискретный	на грамматику	указанное ключевое слово (я)

Начало работы со стилями текста, цвета и шрифта

26 августа 2021 г. — 5 мин чтения языки разметки, такие как HTML. Мы можем использовать файлы CSS и код CSS для управления стилем, форматированием, макетом и представлением наших веб-страниц. В этом уроке по CSS мы рассмотрим некоторые основы CSS, такие как стиль шрифта, текст и цвет. Давайте начнем!

Мы рассмотрим :

• Текст CSS
• Цвет CSS
• Стиль шрифта CSS
• Завершение и следующие шаги

Текст CSS

Текст CSS включает множество различных свойств для форматирования и стилизации нашего текста. Давайте рассмотрим некоторые полезные свойства текста CSS:

Оформление текста CSS

Свойство text-decoration позволяет нам добавлять или удалять декоративные элементы из нашего текста. Например, если мы хотим удалить подчеркивание из ссылки, мы можем использовать украшение текста: нет; значение:

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

• Зачеркнутый : украшение текста: сквозной;

• Overline : text-decoration: overline;

• Подчеркивание : оформление текста: подчеркивание;

Давайте посмотрим, как они будут выглядеть в HTML-документе:

CSS Text Transform

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

CSS Text Align

Свойство text-align позволяет установить горизонтальное выравнивание текста. Давайте посмотрим, как выровнять текст по левому краю, по правому краю и по центру:

Мы также можем манипулировать направлением текста следующим образом:

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

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

Текст-интент :

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

Цветовые значения CSS

Мы можем использовать цветовые коды и значения CSS для управления цветами различных аспектов нашей веб-страницы. Мы также можем использовать значения RGB, значения RGBA, значения HEX, значения HSL и значения HSLA для указания цвета.

Значения RGB

Значения цвета RGB используют rgb() свойство. Свойство RGB принимает три значения. Каждое значение может быть представлено в виде процента или числа от 0 до 255. Первое число представляет красное значение, второе число представляет зеленое значение, а последнее число представляет синее значение. Не каждый браузер поддерживает RGB, поэтому обязательно проверьте его перед использованием.

Значение RGB для красного цвета равно rgb(255,0,0) .

Значения RGBA

Цветовые значения RGBA являются расширением значений RGB, определяющих непрозрачность цвета. Это свойство принимает четыре значения. Первые три значения совпадают со значениями в RGB. Четвертое значение называется альфа параметр. Это число находится в диапазоне от 0,0 до 1,0.

HEX-значения

Шестнадцатеричные значения цвета представляют собой шестизначные представления цвета. Каждый код начинается со знака решетки # и сопровождается шестью цифрами. Первые две цифры представляют собой значение красного цвета, вторые две цифры представляют значение зеленого цвета, а последние две цифры представляют значение синего цвета.

Шестнадцатеричное значение для красного цвета: #FF0000 .

Имена цветов HTML

Существует 140 названий цветов HTML, которые представлены в виде шестнадцатеричных значений. Мы можем использовать эти значения для указания различных цветов на наших веб-страницах.

Значения HSL

Цветовые значения HSL используют оттенок, насыщенность и яркость для определения цвета. Значение оттенка — это степень на цветовом круге, которая может находиться в диапазоне от 0 до 360. Значение насыщенности — это процент, который может находиться в диапазоне от 0 до 100 процентов. Значение яркости — это процент, который может находиться в диапазоне от 0 до 100 процентов.

Значение HSL для красного цвета равно hsl(0, 100%, 50%) .

Значения HSLA

Значения HSLA являются расширением значений HSL, определяющих непрозрачность цвета. Подобно RGBA, HSLA принимает четыре значения, причем последнее значение представляет собой альфа-параметр, указывающий непрозрачность.

Продолжайте изучать CSS бесплатно.

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

Стать разработчиком внешнего интерфейса

Стиль шрифта CSS

Свойство font-style позволяет нам устанавливать различные стили шрифта для нашего текста. Например, мы можем сделать стиль шрифта «обычным», а можем сделать его «курсивным». Давайте посмотрим:

Завершение и следующие шаги

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

Сегодня мы рассмотрели много важной информации о стилях CSS, но нам еще многое предстоит узнать. Ниже приведены некоторые рекомендуемые темы для рассмотрения:

• Селекторы CSS
• CSS с текстом HTML, тегами HTML и элементами HTML
• Фоновое изображение CSS

Чтобы приступить к изучению этих и других концепций, ознакомьтесь со схемой обучения Educative «Стать фронтенд-разработчиком». На этом пути практического обучения вы освоите HTML, CSS и JavaScript, что позволит вам создавать функциональные веб-сайты и веб-приложения. К концу вы получите ценный шаг в своем путешествии по веб-разработке.

Приятного обучения!

Продолжить чтение о CSS

• SASS для CSS: улучшите свои навыки интерфейса с помощью препроцессора CSS
• Руководство по CSS Flexbox: как использовать свойства Flexbox
• Руководство по React Bootstrap: обновление приложений React с помощью CSS-фреймворка

НАПИСАЛ BYErin Schaffer

Присоединяйтесь к сообществу, насчитывающему более 1,4 миллиона читателей. Бесплатное электронное письмо раз в два месяца с обзором лучших статей и советов по программированию на сайте Educative.

Свойство CSS text-decoration - GeeksforGeeks

Свойство text-decoration используется для «украшения» содержимого текста. По сути, это украшение текста различными линиями. Это сокращенное свойство для text-decoration-line (обязательно), text-decoration-color и text-decoration-style . Текстовые украшения рисуются на дочерних текстовых элементах, что означает, что если родительский элемент указывает текстовое оформление, то его дочерний элемент не может удалить украшение, указанное родительским элементом.

Синтаксис:

 text-decoration: text-decoration-line text-decoration-style text-decoration-color|initial|inherit; 

Значения свойств: Все свойства хорошо описаны в примере ниже.

text-decoration-line : Используется для установки различных видов оформления текста (например, подчеркивания, надчеркивания и т. д.).

Синтаксис:

 оформление текста: строка оформления текста; 

Пример: Этот пример иллюстрирует использование свойства text-decoration-line , значения которого могут быть установлены как подчеркивание, сквозная линия, надчеркивание.

HTML

< html lang = "en" dir = "ltr" > < голова >      < meta charset = "utf-8" >      < title >text-decoration title > < Стиль > H2 { 71: Грин : Грин ; } Тело { Text-Align: Центр;      }             ul li {          margin-top: 15px;      }             #example1 {          украшение текста: подчеркивание; } #Пример 2 { 9184 9171716716716716716716716716716716716716716717167167167171671716717167167167. } #Пример 3 { 9184 #Пример 3 { 9 9184 ;      }      style > head >   < body > < H2 > Geeksforgeeks H2 > < .1672 h3 >      < ul >          < li id = "example1" >Welcome geeks! LI > < LI ID = "Пример 2" > Добро пожаловать на GEELKS!1672          < li id = "example3" >Welcome geeks! li >      ul > body > html >

Output:

text-decoration-style : Используется для установки оформления текста элемента (например, пунктирного, волнистого и т. д.).

Синтаксис:

 оформление текста: строка оформления текста стиль оформления текста; 

Пример: В этом примере показано использование свойства text-decoration-style .

HTML

< html lang = "en" dir = "ltr" > < head >      < meta charset = "utf-8" >      < title >text-decoration title >      < стиль >      h2 {          цвет: зеленый; } Тело { ;      }             ул ли {          margin-top: 15px;      }             #example1 {          text-decoration: underline dotted;      }             #example2 {          text-decoration: underline wavy; } #Пример 3 { 71717171 гг.      }      style > head >   < body >      < h2 >GeeksforGeeks h2 >      < h3 >        text-decoration:        text-decoration-line text-decoration-style;      h3 >      < ul >          < li id = "example1" >Welcome geeks! li >          < LI ID = "Пример2" > Добро пожаловать ведущие!1671 id = "example3" >Welcome geeks! li >      ul > body > HTML >

OLVER:

. сквозные строки) над текстом.

Синтаксис:

 оформление текста: строка оформления текста цвет оформления текста; 

Пример: Этот пример иллюстрирует использование свойства text-decoration-color .

HTML

1671671671671716717167171671616717167167.

     }

      

     #example3 {

         text-decoration: обводка синего цвета;

     }

     style >

head >

 

< body >

< h2 >GeeksforGeeks h2 >

< H3 >

.

         h3 >

     < ul >

         < li id = "example1" >Welcome geeks! li >

         < li id = "example2" >Welcome geeks!< / LI >

< LI ID = "Пример 3" = ".1672

     ul >

body >

html >

< html lang = "en" dir = "ltr" > < head >      < meta charset = "utf-8" >      < title >text- decoration title >      < style >      h2 {          цвет: зеленый; } Тело { ;      }             ul li {          margin-top: 15px;      }             #example1 {          text-decoration: подчеркивание волнистым зеленым цветом; } #Пример 2 { 9184 7167171671

Output:

начальный : используется для установки свойства CSS элемента в значение по умолчанию.

Синтаксис:

 оформление текста: инициал; 

Пример: В этом примере показано использование свойства text-decoration , для которого установлено значение initial.

HTML

< html lang = "en" dir = "ltr" > < голова >      < мета charset = "utf-8" >      < title >text-decoration title >      < style >      h2 {          цвет: зеленый;      }             body {          text-align: center; } #Пример 1 { #пример 1 { 9 9184 # 9 9184 # 9 9184 # 9 # 9 .      }      стиль > 71 head >   < body >      < h2 >GeeksforGeeks h2 >      < h3 > text-decoration: initial; h3 > < a href = "#" >2 92 1671       Это ссылка без оформления текста.      a >      < br >      < br > < a id = "example1" href = "#" >       Initial Это ссылка с установленным text-decoration.      a > body > html >

Output:

наследовать : используется для наследования свойства элемента от значения свойства его родительского элемента.

Синтаксис:

 украшение текста: наследовать; 

Пример: Этот пример иллюстрирует использование свойства text-decoration , значение которого установлено для наследования.

HTML

< html lang = "en" dir = "ltr" > < голова >      < meta charset = "utf-8" >      < title >text-decoration title > < стиль >      h2 {          цвет: зеленый;      }             body {          text-align: center; } #Пример 1 { 9184 #пример 1 { 9 9184 # 9 9184 # 9 9184 # 9 # 9 # .      }             #example1child {          text-decoration: inherit;          вес шрифта: полужирный;      }      style > head >   < body > < h2 >GeeksforGeeks h2 >      < h3 > text-decoration: inherit; h3 >      < p ID = "Пример1" > I Am Am ​​Parent и < SPAN ID = "Пример1chid1671 this my is child. span > p >   body > html >

Вывод:

Поддерживаемые браузеры: Браузеры, поддерживаемые text-decoration Property, перечислены ниже: Chrome

91.3010 Google

Internet Explorer 3.0

Microsoft Edge 12.0

Firefox 1.0

Opera 3.5

Safari 1.0

Выравнивание текста CSS, оформление текста, преобразование текста, разрывы слов и интервалы 90 20

Автор: Авинаш Малхотра

Обновлено 16 июля 2022 г.

• ← Цвета CSS
• Вертикальное выравнивание CSS →

Оценка учебника по CSS от Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Средняя оценка: 5,0 на основе 69 отзывов

org/BreadcrumbList">
1. Главная
2. Веб-дизайн
3. УСБ
4. Свойства текста

Свойства текста CSS включает в себя все свойства, связанные с текстом, такие как text-align , text-decoration и т. д. Эти свойства могут работать с отдельными элементами, такими как

,

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

и т. д. При назначении свойства Text родительскому элементу все потомки могут наследовать это свойство от родителя.

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

• Выравнивание текста
• Отступ текста
• Оформление текста
• Преобразование текста
• Разрыв слов
• переполнение-обертка / Word Wrap
• Интервал между словами
• Расстояние между буквами

---

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

Свойство Css Text Align используется для выравнивания текста в по левому краю , по центру , по правому краю и по ширине . Выравнивание текста по умолчанию оставлено для многих языков. Только элементы уровня блока поддерживают свойство выравнивания текста . Это означает p, заголовки h2-h6, блок-цитата, поддержка элементов text align , но встроенные элементы уровня — нет. Но встроенный может наследовать выравнивание текста от родительского элемента.

Выравнивание текста по левому краю, центру и правому краю

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

Выравнивание по тексту	Значение
слева	выровнять текст по левому краю
центр	выровнять текст по центру
справа	выровнять текст по правому краю
выравнивание	Выровненный текст

Примеры выравнивания текста CSS

Выравнивание текста по левому краю

Выравнивание текста по центру

Выравнивание текста по правому краю

<стиль>
    . text-left {выравнивание текста: по левому краю;}
    .текст-центр{выравнивание текста:центр;}
    .text-right {выравнивание текста: вправо;}

 
Выравнивание текста по левому краю
 
 
Выравнивание текста по центру
 
 
Выравнивание текста по правому краю
 
 

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

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

Выравнивание текста по левому краю

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

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

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

<стиль>
    .текст-выравнивание{выравнивание текста:выравнивание;}

 
Пример текста.
 
 

---

Отступ текста

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

Вот как работает свойство CSS Text indent. Отступ текста этого абзаца 100px.

Вот как работает свойство CSS Text indent. Отступ текста этого абзаца 200px.

Вот как работает свойство CSS Text indent. Отступ текста этого абзаца -100px..

<стиль>
    .text4 {текстовый отступ: 100 пикселей; красный цвет}
    .text5 {отступ текста: 200 пикселей; цвет синий}
    .text6{текстовый отступ:-50px; цвет:зеленый}

Вот как работает свойство CSS Text indent. Отступ текста этого абзаца составляет 100 пикселей. 
Вот как работает свойство CSS Text indent. Отступ текста этого абзаца составляет 200 пикселей.
Вот как работает свойство CSS Text indent. Отступ текста этого абзаца составляет -50 пикселей.
 

Избегайте текстового отступа в негативе.

---

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

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

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

Оформление текста CSS

текст-украшение	Роль	Пример
над чертой	создать линию над текстом	Текстовое оформление над линией
подчеркивание	создать строку под текстом	Подчеркивание декоративного текста
проходной	зачеркнуть текст	Текстовый декор сквозной
нет	Удалить оформление текста по умолчанию.	Оформление текста нет

Пример оформления текста

Оформление текста над чертой

Оформление текста подчеркивание

Оформление текста через строку

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

<стиль>
    .text5{строка-украшения-текста:верхняя черта;}
    .text6 {строка оформления текста: подчеркивание;}
    .text7 {строка оформления текста: сквозная;}
    .text8 {строка оформления текста: нет;}

 
Оформление текста поверх линии
 
 
Подчеркивание оформления текста
 
 
Построчное оформление текста
 
 
Украшение текста нет
 
 

---

Стиль оформления текста

г.

стиль оформления текста	Значение	Пример
твердый	создать сплошную линию	Стиль оформления текста сплошной
пунктир	создать пунктирную линию	Стиль оформления текста пунктиром
с точкой	создать пунктирную линию	Стиль оформления текста с точкой
двойной	создать двойную линию	Text Decoration Style двойной

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

цвет текста-декорации	Значение	Пример
черный	создать сплошную линию черным цветом	Цвет оформления текста
красный	создать сплошную линию красным цветом	Цвет оформления текста
синий	создать сплошную линию синим цветом	Цвет оформления текста

1. Примечание: Строка оформления текста является обязательной, стиль по умолчанию сплошной, а цвет соответствует цвету шрифта.
2. используйте префикс -webkit для стиля и цвета оформления текста. Для опыта,

   <стиль>
     h2{
       оформление текста: подчеркивание красным пунктиром;
       -webkit-text-decoration: подчеркните красным пунктиром;
     }
   
    

---

Преобразование текста

Свойство CSS Text Transform используется для преобразования текста из строчных букв в прописные , строчных букв в заглавные и прописных букв в строчные для алфавитов.

Преобразование текста Заглавные буквы

Преобразование текста в нижний регистр

Преобразование текста в верхний регистр

Преобразование текста Нет

<стиль>
    .text9 {преобразование текста: заглавные буквы;}
    .text10{преобразование текста:нижний регистр;}
    .text11{преобразование текста:верхний регистр;}
    . text12 {преобразование текста: нет;}

технический специалист
технический специалист
технический специалист
технический специалист
 

---

Разрыв слов

Word Break Свойство css используется для указания, следует ли разбивать строки внутри слов или нет. Значение по умолчанию — обычное . Другое значение — break-all .

Word Break break all может разбивать слова только для некитайского, неяпонского и некорейского текста.

Word-break обычный

Word-break Break-word

<стиль>
    div{ширина:50px; фон:#fcc}
    .div1 p{разрыв слова: обычный}
    .div2 p{разрыв слова: разбить все}

    
<дел>
    
разрыв слова нормальный

<дел>

слово-разрыв-разрыв-слово