频道栏目
读书频道 > web开发 > .NET > ASP.NET 4.5入门经典(第7版)
3.3.4 管理样式
2013-10-25 09:25:39     我来说两句
收藏   我要投稿

本文所属图书 > ASP.NET 4.5入门经典(第7版)

多年来,Imar Spaanjaars一直是ASP NET相关图书的畅销书作者,他深知读者需要什么方面的知识,才能提高其ASP NET技巧。在《ASP NET 4 5入门经典(第7版)》中,作者全面介绍了如何使用ASP NET 4 5这个Microsoft  立即去当当网订购

由于添加新的内联和内嵌样式是如此容易,因此页面可能很快就变得混乱不堪。要实现可重用性,应将尽可能多的内联和内嵌样式移到一个外部样式表中。这就是Apply Styles和Manage Styles窗口的作用所在。

试一试       使用Manage Styles和 Apply Styles窗口管理样式

在本章前面,修改了<h1>元素,并向标题应用了内边距和页边距。然而,Default.aspx不是在标题中从该样式获益的唯一页面,因此有必要把它移到Styles.css文件中。类似地,Introduction类的可重用性似乎够好,因此可以把它包括到Styles.css文件中,以便其他页面能访问它。本“试一试”练习显示了如何在站点中移动样式。

(1) 确保Default.aspx仍然是打开的,如有必要,切换到Markup视图。

(2) 定位到<h1>元素并再单击一次。VS突出显示了位于文档窗口底部的标记选择器中的标记,以表明它是活动标记。

(3) 从主菜单中选择View | Apply Styles命令,打开Apply Styles窗口。如果窗口与其他窗口停靠在一起,则只需要简单地单击它的选项卡来让它成为活动状态。请确保窗口不是偶然地与主文档窗口停靠在一起,而是浮动的或是放置在文档窗口的一侧。Apply Styles窗口下方显示了内联样式(如图3-26所示)。

 

(4) 右击Inline Style,并选择New Style Copy命令。这时会出现New Style对话框,允许创建一个基于当前选项的新样式。在这个窗口的上方,从Selector下拉列表中选择h1,并从Define in下拉列表中选择Existing style sheet选项。从URL下拉列表中,选择Styles/Styles.css选项。如果这个项不可用,则单击Browse按钮来定位并选择它。对话框最后应如图3-27所示。

 

(5) 单击OK按钮关闭对话框。VS会创建h1样式的一个副本,并把它放在文件Styles.css中。注意VS在Styles.css文件中为h1创建了一个新的选择器,而不是向现有规则集中添加内边距和页边距信息。如果愿意,可以将这两个选择器手动合并为一个。

(6) 在Apply Styles窗口中,再次右击Inline Style,这次从上下文菜单中选择Remove Inline Style命令。这样会将样式特性从h1元素中删除。

(7) 从主菜单中选择View | Manage Styles。请再次确认窗口是放在文档窗口的一侧,而不是停靠在文档窗口内部。在Current Page项下,定位.Introduction选择器。

(8) 单击.Introduction选择器,然后把它拖到Styles.css的区域中,例如把它放在h1选择器后面。注意,当鼠标悬停在选择器上时,VS会在选择器之间画线,表示选择器最后将出现的位置。图3-28显示了如何将.Introduction选择器从当前页面拖到h1和#PageWrapper选择器之间的Styles.css区域中。

 

(9) 一旦把选择器放到Manage Styles窗口的Styles.css部分中,则与该选择器关联的样式就会从当前页面中去除,然后插入到Styles.css中。由于那个CSS文件包括在使用<link/>元素的当前页面中,因此在Design视图中看不到区别。现在,可以把空<style>元素从Default.aspx中删除,因为不再需要它了。

(10) 如果还没有合并两个h1选择器,则打开Styles.css,向下滚动到文件的末尾。把padding和margin属性所在的两行复制到剪贴板上,再删除整个选择器。在文件中向上滚动,再把两个CSS规则粘贴到其他h1选择器中,代码最后如下所示:
h1
{
font-size: 20px;
padding: 0;
margin: 0 0 10px 0;
}

 (11) 保存所做的任何修改,然后通过按下Ctrl+F5组合键,在浏览器中打开Default.aspx页面。注意,这些段落没有改变,使用的仍然是蓝色斜体字。

工作原理

遗憾的是,VS不允许把内联样式移到外部样式表文件中。然而,可以通过创建现有样式的副本,然后删除原始内联样式来获得同样的效果。在文件之间移动内嵌或外部样式表就容易得多。可以简单地把样式从一个文件拖到另一个文件中,并且VS会自动移动代码。这使得组织CSS极其容易。不要让所有嵌入的CSS都留在页面中,因为那样就可能会碰到它,现在可以简单地把它拖放到一个外部文件中。这使得在其他页面中重用那些样式容易得多,从而降低了页面大小和页面膨胀,并使站点更容易管理。显然,重要的是CSS所移到的文件被附加到了正在使用的页面中。

您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.3.3 应用样式
下一篇:3.4 关于使用CSS的实用提示
相关文章
图文推荐
排行
热门
最新书评
特别推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站