自CS6版本问世以来，Adobe在Photoshop中实现了一个非常有用的选项，可用于布局和开发Web设计。 该操作是 非常简单 最重要的是 快。 通过该应用程序，我们将能够生成级联样式表，以我们的形状和文本层为参考。 该过程就像开发我们的模型，复制元素的代码版本并将其粘贴到工作表一样简单。
这是一个非常好的选择，尤其是因为它使我们能够从视觉上实时查看设计的演变。 以下是使用此选项并获得 最高性能:
尽量精确
为了获得专业的结果，建议您考虑站点的度量和比例。 设置要设计的模板的Width和Heigh值，并将其应用于模型。 复制CSS代码时，我们将放置每个元素，以每个元素与画布边缘之间的像素距离为参考。 还应考虑将要包含在设计中的大小和层次结构原因，包括每个元素的对齐方式以及每个元素之间的间距，以为用户提供最大的可读性。
使用指南和界面规则将帮助您构建一个整洁，干净的模板，使其所有元素完美对齐。
配置每个元素的所有特征
复制CSS代码的选项使我们可以通过使用形状和文本层来高精度地设计网站。 每层的内容将被复制到剪贴板，我们可以将其快速粘贴到样式表中。 从形状图层捕获以下设置的值：
- 大小
- 位置
- 描边颜色
- 填充颜色（包括渐变）
- 阴影
在文本层中，我们可以捕获以下值：
- 字体系列
- 字号
- 字体粗细
- 线高
- 带下划线的
- 删除线
- 上标
- 下标
- 文字对齐
请记住这一点并设置每个值以提供您想要的样式。
处理图层组
此功能将我们的工作翻译成两种类型的类，一种用于将形状或文本层组合在一起的每个组，另一种用于这些类型之一的每一层的类。 每个组类将代表一个父div元素，该元素将包含与每个组中插入的图层相对应的子div元素。 这样，将通过引用父容器来设置子容器的顶部和左侧的值。 您应该记住，此选项不适用于智能对象，并且除非将它们分组，否则它将不能同时应用于多个图层。
转换步骤
制作完模型，自定义每个元素并按组对它们进行分组后，只需执行以下步骤：
- 转到图层面板，然后选择以下两个选项之一：
- 右键单击形状或文本图层或一组图层，然后选择 复制CSS 在上下文菜单中。
- 选择形状或文本图层或一组图层，然后选择选项 复制CSS 在“图层”面板菜单中。
-
将代码粘贴到样式表文档中，然后通过html5将其应用于页面。
