Выберите Окно > Свойства CSS.
Последнее обновление
25 мая 2023 г.
- Руководство пользователя Illustrator
- Основы работы с Illustrator
- Введение в Illustrator
- Рабочая среда
- Основные сведения о рабочей среде
- Создание документов
- Ускоренное обучение благодаря панели «Обзор» в Illustrator
- Ускорение рабочих процессов с помощью контекстной панели задач
- Панель инструментов
- Комбинации клавиш по умолчанию
- Настройка комбинаций клавиш
- Общие сведения о монтажных областях
- Управление монтажными областями
- Настройка рабочей среды
- Панель свойств
- Установка параметров
- Рабочая среда «Сенсорное управление»
- Поддержка Microsoft Surface Dial в Illustrator
- Отмена изменений и управление историей дизайна
- Поворот вида
- Линейки, сетки и направляющие
- Специальные возможности в Illustrator
- Безопасный режим
- Просмотр графических объектов
- Работа в Illustrator с использованием Touch Bar
- Файлы и шаблоны
- Инструменты в Illustrator
- Краткий обзор инструментов
- Выбор инструментов
- Инструменты для навигации
- Инструменты рисования
- Текстовые инструменты
- Инструменты рисования
- Инструменты модификации
- Генеративный ИИ (недоступно на территории континентального Китая)
- Быстрые действия
- Веб-версия Illustrator (Beta)
- Обзор веб-версии Illustrator (Beta)
- Часто задаваемые вопросы о веб-версии Illustrator (Beta)
- Часто задаваемые вопросы по устранению неполадок
- Комбинации клавиш для веб-версии Illustrator (Beta)
- Создание и объединение фигур в веб-версии
- Добавление и редактирование текста в веб-версии
- Применение цветов и градиентов в веб-версии
- Рисование и редактирование контуров в веб-версии
- Работа с облачными документами в веб-версии
- Приглашение соавторов для редактирования в веб-версии
- Illustrator на iPad
- Представляем Illustrator на iPad
- Рабочая среда
- Документы
- Выбор и упорядочение объектов
- Рисование
- Текст
- Работа с изображениями
- Цвет
- Облачные документы
- Основы работы
- Устранение неполадок
- Добавление и редактирование содержимого
- Рисование
- Основы рисования
- Редактирование контуров
- Рисование графического объекта с точностью на уровне пикселов
- Рисование с помощью инструментов «Перо», «Кривизна» и «Карандаш»
- Рисование простых линий и фигур
- Рисование прямоугольных и полярных сеток
- Создание и редактирование бликов
- Трассировка изображений
- Упрощение контура
- Инструменты для работы с символами и наборы символов
- Корректировка сегментов контура
- Создание цветка в пять простых шагов
- Создание и редактирование сетки перспективы
- Рисование и изменение объектов на сетке перспективы
- Использование объектов в качестве символов для повторного применения
- Рисование контуров, выровненных по пикселам, при создании проектов для Интернета
- Измерения
- 3D-объекты и материалы
- Цвет
- Раскрашивание
- Выбор и упорядочение объектов
- Выделение объектов
- Слои
- Группировка и разбор объектов
- Перемещение, выравнивание и распределение объектов
- Выравнивание, упорядочение и перемещение объектов по контуру
- Привязка объектов к глифу
- Привязка объектов к японскому глифу
- Размещение объектов
- Блокировка, скрытие и удаление объектов
- Копирование и дублирование объектов
- Поворот и отражение объектов
- Переплетение объектов
- Создание реалистичных макетов графики
- Перерисовка объектов
- Кадрирование изображений
- Трансформирование объектов
- Объединение объектов
- Вырезание, разделение и обрезка объектов
- Марионеточная деформация
- Масштабирование, наклон и искажение объектов
- Объекты с переходами
- Перерисовка с помощью оболочек
- Перерисовка объектов с эффектами
- Создание фигур с помощью инструментов «Мастер фигур» и «Создание фигур»
- Работа с динамическими углами
- Улучшенные процессы перерисовки с поддержкой сенсорного ввода
- Редактирование обтравочных масок
- Динамические фигуры
- Создание фигур с помощью инструмента «Создание фигур»
- Глобальное изменение
- Текст
- Дополнение текстовых и рабочих объектов типами объектов
- Просмотр перекомпоновки
- Создание маркированного и нумерованного списков
- Управление текстовой областью
- Шрифты и оформление
- Преобразование текста в изображениях в редактируемый текст
- Применение базового форматирования к тексту
- Применение расширенного форматирования к тексту
- Импорт и экспорт текста
- Форматирование абзацев
- Специальные символы
- Создание текста по контуру
- Стили символов и абзацев
- Табуляция
- Поиск отсутствующих шрифтов (технологический процесс Typekit)
- Шрифт для арабского языка и иврита
- Шрифты | Часто задаваемые вопросы и советы по устранению проблем
- Творческий подход к оформлению
- Масштабирование и поворот текста
- Интерлиньяж и межбуквенные интервалы
- Расстановка переносов и переходы на новую строку
- Проверка орфографии и языковые словари
- Форматирование азиатских символов
- Компоновщики для азиатской письменности
- Создание текстовых проектов с переходами между объектами
- Создание текстового плаката с помощью трассировки изображения
- Создание специальных эффектов
- Веб-графика
- Рисование
- Импорт, экспорт и сохранение
- Импорт
- Библиотеки Creative Cloud Libraries в Illustrator
- Сохранение и экспорт
- Печать
- Подготовка к печати
- Печать
- Автоматизация задач
- Устранение неполадок
- Исправленные ошибки
- Известные проблемы
- Сбои
- Восстановление файлов после сбоя
- Проблемы с файлами
- Поддерживаемые форматы файлов
- Проблемы с драйвером ГП
- Проблемы устройств Wacom
- Проблемы с файлами DLL
- Проблемы с памятью
- Проблемы с файлом настроек
- Проблемы со шрифтами
- Проблемы с принтером
- Как поделиться отчетом о сбое с Adobe
- Повышение производительности Illustrator
- Исправленные ошибки
Узнайте, как извлечь и экспортировать код CSS для отдельного объекта или для всего макета, созданного в Illustrator.
В Illustrator можно создать вариант оформления для страницы HTML. Он может служить наглядным руководством для разработчика веб-страниц, создающего код макета, стилей и объектов на странице с помощью редактора HTML. Однако точная реализация внешнего вида и положения компонентов и объектов требует значительных затрат времени и усилий.
При создании макета страницы HTML в Illustrator можно также сформировать и экспортировать лежащий в его основе код каскадных таблиц стилей, определяющий внешний вид компонентов и объектов на данной странице. Каскадные таблицы стилей (CSS) позволяют управлять внешним видом текста и объектов (подобно стилям символов и графики).
Просмотр и извлечение кода каскадных таблиц стилей
С помощью панели Свойства CSS можно выполнить следующие действия:
- Просмотр и копирование кода CSS для выбранных объектов.
- Экспорт одного, нескольких или всех выбранных элементов Illustrator в файл CSS.
- Экспорт используемых изображений, допускающих растеризацию.
- Формирование кода CSS для конкретного браузера.
A. Предупреждение о том, что некоторые стили не удалось сконвертировать в код каскадных таблиц стилей B. Диалоговое окно «Параметры экспорта каскадных таблиц стилей» C. Экспорт выделенных каскадных таблиц стилей в файл D. Копировать выделенный стиль в буфер обмена E. Создать CSS F. Меню панели «Свойства CSS» G. Стили, используемые в выделенных объектах H. Код каскадных таблиц стилей
Чтобы просмотреть и извлечь код CSS, выполните следующие действия:
-
Примечание.
Убедитесь, что на палитре данного слоя объектам в документе Illustrator присвоены имена.
-
Как отобразить сгенерированный код CSS:
Для одного объекта:
Выберите один объект. На панели Свойства CSS отображается код CSS этого объекта.
Для нескольких объектов:
Удерживая нажатой клавишу Shift, выберите несколько объектов, а затем выберите Создать CSS на панели Свойства CSS.
Для всех объектов:
С помощью сочетания клавиш Ctrl/Cmd + A выберите все объекты, а затем выберите Создать CSS на палитре Свойства CSS.
-
Для получения сформированного кода каскадных таблиц стилей выполните одну из следующих процедур.
Как скопировать выбранный код:
- Выделите нужный код и выберите Скопировать выделенный стиль, чтобы скопировать его в буфер обмена.
- Откройте меню панели свойств CSS и выберите Экспортировать выбранные CSS для экспорта в файл.
Как скопировать все коды:
- Не выделяя фрагменты кода CSS, выберите Скопировать выделенный стиль, чтобы скопировать весь код в буфер обмена.
- Откройте меню панели свойств CSS и выберите Экспортировать все, чтобы выполнить экспорт в файл.
-
При сохранении кода CSS в файл выберите один из вариантов, указанных в диалоговом окне Параметры экспорта CSS.
Параметры экспорта CSS
Параметры экспорта CSS
Примеры кода CSS
Прямоугольник с примененным градиентом (все браузеры)
.GRADIENT_BOX { background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%); background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)"; background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}
Прямоугольник с примененным градиентом (только браузеры на основе WebKit )
.GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}
Несколько объектов
.NormalCharacterStyle { font-family : Myriad Pro; font-size : 12px; } .st0 { border-style : Solid; border-color : #FFFFFF; border-color : rgba(255, 255, 255, 1); border-width : 0px; } .GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}
Связанные разделы
У вас есть вопросы или идеи?
Если у вас есть вопросы или идеи, которыми вы хотели бы поделиться, присоединяйтесь к беседе в сообществе Adobe Illustrator. Мы будем рады узнать ваше мнение.