一步步学习SPD2010--第十章节--SP网站品牌化（6）--建立样式

一步步学习SPD2010--第十章节--SP网站品牌化（6）--建立样式        

        在以前的部分我向你展现了如何使用CSS样式规则和声明辨识内容。为了给样式规则和声明作些改变，你可使用SPD提供的视觉工具，或者直接编辑样式。两个方法产生一样的结果。若是你还不了解CSS，学习如何处理样式表是个新手，就使用PSD的工具并检查代码视图来看SPD产生的CSS。这将帮助你学习样式声明。从简单页面开始，并随着你理解的加深，你能够转向更加复杂的页面。

        小贴士：记得使用预览功能，时刻在不一样浏览器、不一样大小屏幕检查你的设计。若是不满意能够按CTRL+Z取消操做。

        一些CSS设计者按照样式位于网页的位置分组样式表的样式；另一些按照建立的顺序。若是你要建立一个样式表，之后供其余用户维护，你可能须要遵循他们的标准。微软在SharePoint使用的样式有本身的命名标准。例如，大多数SharePoint类以.ms-开头，若是样式应用到与Web部件有关的元素时，要在名称中包含WP。

        小贴士：使用相同声明的选择器能够分组到一个速记的格式。这减小了样式表大小，以及给每一个选择器添加声明的须要。

        本练习中，你将建立两个紧挨的折叠区域。

        准备：使用SPD打开MyPage.aspx，进入拆分视图。

1. 点击样式选项卡中的建立新样式。

2. 选择器中删除.newStyle1，输入#page_content。定义位置选择现有样式表。

3. 浏览找到MyStyle.css文件。点击打开。

        故障分析：若是MyStyle.css没有出如今对话框中，点击左上角的SPD，导航到样式表。

4. 在类别下点击“方框”。清除margin右边的复选框，right中输入200。

5. 点击肯定。

6. 一样新建样式。

7. 选择器输入#right_col。

8. 选中现有样式表，URL选择MyStyle.css。

9. 类别中选择定位。点击absolute。width输入200，top输入0，right输入0.

10. 点击肯定。

11. 一样建立新样式#container，定位relative，width为100%。

        这样div#container包含了div#page_content和div#right_col，在一行紧挨着。代码视图中，没有什么变化。

12. 点击MyStyle.css，CSS声明已经被建立了。