VS2008 Tip #002 样式运用工具栏在 自动与手动模式下都可以用

样式运用工具栏(style application toolbar)允许您自动地创建与修改样式。这个工具窗口在自动模式(Auto mode)和手动模式(Manual mode)下都可使用。

自动模式

自动模式主要为 CSS 新手而设计,Visual Studio 会控制新生成样式的存放位置。

译者注:自动模式会将使用"标准"工具栏对页面元素定义的格式(如前景色、背景色、下划线等),提取到<head> 标签内部的 <style> 块内,作为页面级 CSS,命名顺序依次为 style1、style2… 。

手动模式

手动模式面向有CSS经验的人员。用户可以设置目标规则(Target Rule)控制样式的存放位置。目标规则在下拉列表显示如下选项:.类名(当前网页).ClassName(Current Page)、新建内联样式<Inline Style>、(新建自动类)(New Auto Class)和应用新样式…(Apply New Style…)

*(新建自动类)(New Auto Class)

新建自动样式类将命名为 style1、style2等,放置于当前页面的 style 块中。

译者注:光标定位到目标内容(标签),若将目标规则设置为(新建自动类),然后用"标准工具栏"设置显示风格,所设置的风格将放置于一个新命名的样式类中。下图是我在"拆分视图"将光标定位到内容"新建自动类",然后设置为"粗体"。这时代码窗口中新建了一个样式类 style1 内有"font-weight:700;"这样一行代码,目标规则由"(新建自动类)"变为了".style1(当前网页)"。

* .类名(当前网页).ClassName(Current Page)

由格式化工具栏(如格式化加粗、格式化字体等)生成的所有样式,将放置于此类中。

译者注:在(新建自动类)中,已经生成了一个样式".style1(当前网页)",当光标定位到目标内容(粗体的"新建自动类"),目标规则的下拉框将出现".style1(当前网页)",若选定它,以后在"标准工具栏"对目标内容所作的风格设置,都保存到.style1中。

* 应用新样式… (Apply New Style…)

允许您使用"新建样式对话框"(Style builder Dialog)创建新样式。

译者注:点击"应用新样式…"将弹出"新建样式"对话框,如下图。样式选择器和具体样式规则,完全由自己定义。

* 新建级联样式<Inline Style >

正如其名,应用于选定控件的所有新样式,将放置于"级联样式"中。

译者注:若目标标签没有内联CSS,即目标标签没有显式设置 style 属性,目标规则下拉框将显示出"新建级联样式",若点击了"新建级联样式",在"标准工具栏"对目标内容所设置的显示风格,都被保存到内联的样式中,即目标内容的标签的style中。"目标规则"的下拉列表的"新建级联样式"将变为"<级联样式>"。

下图是光标定位到目标内容"新建级联样式测试",目标规则设置为"新建级联样式"。然后在"标准工具栏"设置为"粗体"和"斜体",可见目标内容的标签 div 多了一个 style 属性。

<div style="font-weight: 700; font-style: italic">

新建级联样式测试

</div>

Visual Studio 2008 的"新建级联样式",个人认为"新建内联样式"更好。

Reshmi Mangalore

SDET, Web Development Tools

扩展阅读

Tip #2 Did you know...The Style Application Toolbar works in both Auto and Manual modes?

 

原文地址:https://www.cnblogs.com/feixian49/p/1603340.html