您可以在 Illustrator 中创建一个 HTML 页面设计。此教程为 Web 开发人员提供直观的指南,指导其如何在 HTML 编辑器中编辑页面的版面、样式及对象的代码。但是,复制组件和对象的确切外观和位置是一个耗时和繁琐的过程。
使用 Illustrator,在创建 HTML 页面的版面时,也可以生成和导出基础 CSS 代码,用于决定页面中组件和对象的外观。CSS 可以控制文本和对象的外观(与字符和图形样式相似)。您可以选择导出单个对象的 CSS 代码,或在 Illustrator 中设计的整个板式。
您可以在“CSS 属性”面板中(“窗口”>“CSS 属性”)中执行以下操作:
查看选定对象的 CSS 代码
复制选定对象的 CSS 代码
将一个或多个,甚至所有选定的 Illustrator 元素导出为一个 CSS 文件
导出使用的可栅格化图像
生成浏览器特定的 CSS 代码
视频:在 Illustrator 中提取 CSS
了解如何使用 Illustrator 生成文本,对象,以及整个版面的 CSS 代码,以更快创建网站。
Rufus Deuchler
查看和提取 CSS 代码
注意:
要生成 CSS 代码,请执行下列操作之一:
确保您的 Illustrator 文档的对象在“图层”面板命名。
单击“窗口”>“CSS 属性”> 弹出菜单 >“导出选项”,并选中“为未命名的对象生成 CSS”复选框。
选择“窗口”>“CSS 属性”。
A. 如果某些样式无法转换为 CSS 代码,将显示警告 B. “CSS 导出选项”对话框 C. 将选定 CSS 导出到文件 D. 将选定样式复制到剪贴板 E. 生成 CSS F. 弹出菜单 G. 选定对象中使用的样式 H. CSS 代码
在打开的 Illustrator 文档中,执行下列操作之一:
选择一个对象。该对象的 CSS 代码显示在“CSS 属性”面板。