《Adobe Dreamweaver CC经典教程》——1.9 使用“CSS设计器”-阿里云开发者社区

开发者社区> 大数据> 正文
登录阅读全文

《Adobe Dreamweaver CC经典教程》——1.9 使用“CSS设计器”

简介:

本节书摘来自异步社区《Adobe Dreamweaver CC经典教程》一书中的第1 章,第1.9节,作者:【美】Adobe公司 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.9 使用“CSS设计器”

“CSS设计器”是Dreamweaver Creative Cloud中的新增功能。它提供了一种以更加可视化的方式创建、编辑CSS样式并进行查错的新方法。

“CSS设计器”面板包含4个窗格:“源”、“@媒体”、“选择器”和“属性”(如图1-31所示)。“源”窗格允许创建、附加、定义和删除内部和外部样式表。“@媒体”窗格用于定义媒体查询,以支持多种类型的媒体和设备。“选择器”窗格用于创建和编辑CSS规则,格式化页面上的组件和内容。一旦创建了选择器或规则,就定义了希望在“属性”窗格中应用的格式化效果。

除了允许创建和编辑CSS样式之外,“CSS设计器”还可用于识别已经定义和应用的样式,以及查找与这些样式相冲突的问题。为此,只需把光标插入到任何元素中。“CSS设计器”内的窗格然后将显示应用于所选元素或者被其继承的所有相关的样式表、媒体、查询、规则和属性(如图1-32所示)。

“CSS设计器”具有两种基本模式。默认情况下,“属性”窗格将在列表中显示所有可用的CSS属性,它们被组织在5个类别中:“布局”、“文本”、“边框”、“背景”和“其他”。可以向下滚动该列表,并根据需要应用样式效果。还可以从窗口的右上角选中“仅显示已设置属性”复选框,“属性”窗格然后将过滤列表,只显示那些实际应用的属性。在任何一种模式下,都可以添加、编辑或删除样式表、媒体查询、规则和/或属性。

“选择器”窗格还具有一个“已计算”选项,显示应用于所选元素的样式的聚合列表(如图1-33所示)。无论何时在页面上选择一个元素或组件,都会显示“已计算”选项。在创建任何类型的样式效果时,Dreamweaver创建的代码都将遵从行业标准和最佳实践。Dreamweaver甚至会根据需要自动把供应商前缀应用于某些类型的高级样式效果。


06f44d2cf4cfd94c579bb492448eeb267a079f8e


0d7ab2f2e9585664c1221dcd31245b9c41303b2a


5959037049af9df2029e408956743d715daa0e93

除了“CSS设计器”之外,还可以在“代码”视图内手动创建和编辑CSS样式,同时利用许多可以提高生产率的特性,比如代码提示和自动完成。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
大数据
使用钉钉扫一扫加入圈子
+ 订阅

大数据计算实践乐园,近距离学习前沿技术

其他文章