提取 CSS | Illustrator CC

  • A+
所属分类:导入导出和存储

您可以在 Illustrator 中创建一个 HTML 页面设计。此教程为 Web 开发人员提供直观的指南,指导其如何在 HTML 编辑器中编辑页面的版面、样式及对象的代码。但是,复制组件和对象的确切外观和位置是一个耗时和繁琐的过程。

使用 Illustrator CC,在创建 HTML 页面的版面时,也可以生成和导出基础 CSS 代码,用于决定页面中组件和对象的外观。CSS 可以控制文本和对象的外观(与字符和图形样式相似)。您可以选择导出单个对象的 CSS 代码,或在 Illustrator 中设计的整个板式。   

您可以在“CSS 属性”面板中(“窗口”>“CSS 属性”)中执行以下操作:

  • 查看选定对象的 CSS 代码
  • 复制选定对象的 CSS 代码
  • 将一个或多个,甚至所有选定的 Illustrator 元素导出为一个 CSS 文件
  • 导出使用的可栅格化图像
  • 生成浏览器特定的 CSS 代码

视频:在 Illustrator CC 中提取 CSS

了解如何使用 Illustrator CC 生成文本,对象,以及整个版面的 CSS 代码,以更快创建网站。Rufus Deuchler

查看和提取 CSS 代码

注意:

要生成 CSS 代码,请执行下列操作之一:

  • 确保您的 Illustrator 文档的对象在“图层”面板命名。
  • 单击“窗口”>“CSS 属性”> 弹出菜单 >“导出选项”,并选中“为未命名的对象生成 CSS”复选框。 
  1. 选择“窗口”>“CSS 属性”
    A. 如果某些样式无法转换为 CSS 代码,将显示警告 B. “CSS 导出选项”对话框 C. 将选定 CSS 导出到文件 D. 将选定样式复制到剪贴板 E. 生成 CSS F. 弹出菜单 G. 选定对象中使用的样式 H. CSS 代码 
  2. 在打开的 Illustrator 文档中,执行下列操作之一:
    • 选择一个对象。该对象的 CSS 代码显示在“CSS 属性”面板。
    • 按住 Shift,选择多个对象,然后在“CSS 属性”面板,单击“生成 CSS”按钮。
    • 按 Ctrl/Cmd + A 选择所有对象,然后在“CSS 属性”面板,单击“生成 CSS”按钮。
    将显示生成的 CSS 代码。
  3. 要获取生成的 CSS 代码,请执行下列操作之一:
    • 要复制选择的代码,请选择特定代码,然后:
      • 要复制到剪贴板,请单击“复制所选样式
      • 要导出到文件,请单击弹出菜单,然后单击“导出所选 CSS
    • 要复制所有代码,请不要选择任何 CSS 代码,然后:
      • 要复制到剪贴板,请单击“复制所选样式
      • 要导出到文件,请单击弹出菜单,然后单击“全部导出
  4. 将 CSS 代码保存到文件时,从下列选项中选择:注意:要修改生成的 CSS 代码内容,在“CSS 属性”面板,单击“导出选项”,然后进行相应的选择。

CSS 代码示例

应用渐变的矩形(所有浏览器)

123456789101112131415.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 的浏览器)

12345678910.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;}

多个对象

12345678910111213141516171819202122.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;}

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: