Dreamweaver CC教程:CSS代码提示

Dreamweaver CC教程:CSS代码提示

CSS 代码提示
代码提示可用于以下不同类型的 CSS:

@规则 属性 伪选择器和伪元素 速记

除了代码提示,提示也适用于 CSS 属性。

CSS 代码提示 @规则

Dreamweaver 显示所有 @rules 的代码提示以及 CSS 规则的说明,如此处所示。
CSS @rule 代码提示
CSS @rule 代码提示

CSS 属性提示

当您键入 CSS 属性、键入冒号时,将显示代码提示以帮助您选择一个有效值。
在下面的示例代码中,当键入 font-family: 时,显示有效字体集。
您可以选择其中一个字体集,也可以从这些提示中打开“管理字体”对话框并设置首选字体。
CSS 属性的代码提示和帮助
CSS 属性的代码提示和帮助

有用的代码提示的另一个示例是当您在 CSS 中使用颜色时。当您键入任何颜色相关属性(如边框颜色或背景颜色)并按冒号时,代码提示会显示颜色列表。您可以从列表中选择一种颜色,或从代码提示本身打开拾色器以设置首选颜色。
CSS 颜色相关代码提示
CSS 颜色相关代码提示

如果您在 CC 库中有色板,代码提示也显示这些色板。
CC 库中的色板用云图标表示
CC 库中的色板用云图标表示

注意:
在代码提示中只能显示 50 个 CC 库资源。这些提示按字母顺序显示。

伪选择器和伪元素

您可以添加 CSS 伪选择器至选择器以定义元素的特定状态。例如,当您使用“:悬停”时,当用户将鼠标悬停在选择器指定的元素上时,将应用该样式。
当您输入 ":" 时,如果光标在右侧背景,Dreamweaver 显示一系列有效的伪选择器。
伪选择器代码提示
伪选择器代码提示

当您输入 ":" 时,如果光标在右侧背景,Dreamweaver 显示一系列有效的伪元素(用于部分元素的指定样式)。
伪元素代码提示:
伪元素代码提示:

CSS 速记提示

速记属性为 CSS 属性,使您可以同时设置几个其他 CSS 属性值。CSS 速记属性的一些实例具有背景和字体属性。
在以下示例中可见,如果您输入 CSS 速记属性(比如背景),在您输入空格之后,Dreamweaver 显示:

关联命令中的适当属性值 必须使用的必填值(例如,如果您使用字体,则字体大小和字体类型是必填的) 针对该属性的浏览器扩展

背景 CSS 属性的代码提示
背景 CSS 属性的代码提示

当填完 CSS 速记属性时,代码提示也显示您已输入的属性值。

CSS 代码提示

对于一些 CSS 属性(比如框阴影和文本阴影),Dreamweaver 显示提示应遵循值的提示,并表示哪些是使用星号时的必填值。 
您也可以查看浏览器如何诠释 CSS。
面向 CSS 属性显示的提示
面向 CSS 属性显示的提示

 

推荐阅读