SharePoint品牌化和自定义--第一章节--SharePoint品牌化介绍(5)--CSS

CSS是用来集中管理SharePoint中所有的样式属性的方法。使用CSS有很多好处。其一是你可以链接到外部CSS文件，而不必在HTML中添加内联样式属性到元素。其二是如果你需要对网站和页面做出全局更改，你可以简单编辑CSS样式，它自动更新所有区域（引用该CSS或使用类或ID的地方）。例如，如果你移除SharePoint中所有的CSS引用，那么网站品牌化就萎缩成文本和图标。如图。

在你内容或页面的HTML中，你可以添加一个类或ID到任何元素：
1. 类：对表格使用类。
<TABLE Class=“custom-class”>
2. 对DIV标签指定ID。
<DIV id=“custom-id”>
然后那个类或ID就可以在你的CSS文件中引用：
1. 类引用：在名称前加“.”引用类。
.custom-class
2. ID引用：对ID使用“#”。
#custom-id
一旦你在CSS中引用了这些类，你就可以添加像字体、颜色或背景等属性。

在HTML的head中，你指定并指向自定义的CSS文件。当页面加载时，它辨别拥有类或ID的元素，检查所有引用的CSS文件，然后给元素添加样式（根据你在CSS文件包含的属性）。

有三种不同的方式在你的母版页、页面布局或页面的内容指定CSS：
1. 内部
当使用内部样式时，样式属性被添加到页面的head内。当你想给页面有独特的外观或边距时经常使用。
<head><style type=”text/css”>CSS Content Goes Here</style></head>
2. 外部
这是在母版页指定CSS样式表的最常使用的最佳实践。CSS类名和属性被储存在拓展名为“.CSS”的单独文件中。这个文件位于SharePoint数据库的SharePoint样式库或服务器上自定义的文件夹内。
<link rel=”stylesheet” type=”text/css” href=“stylesheet.css” />
3. 内联样式
当使用内联样式时，你正在给页面上特定HTML元素或空间添加独特的属性。
<p style=”color: #ff0000;”>Some red text</p>
CSS语法决定了CSS规则如何架构。CSS类或ID被称为选择器，可以是HTML元素如DIV。每个选择器可以有多个属性。每个属性有自己独特的值。结构像这样：selector {property:value;}。使用下面的例子，.s4-search{color: red;}，选择器是“s4-search”，属性石“color”，值是“red”。大括号用来包含每个选择器的所有的属性和值。机关最后一个属性值是开的，但是确保所有属性最后用分号结尾是好的实践。
你可以为每个属性集有多个选择器。好处是你可以在所有类名间共享一系列CSS属性。如果改变一个，所有指定的筛选器都会更新。
.s4-search, .ms-sbtable, .ms-sbscopes{ color: red;}
注意：每个选择器由逗号隔开。确保最后一个选择器和开花括号间没有逗号，否则样式不会再浏览器中实现。

在你自定义的CSS文档中，推荐你提供详细的注释来描述相同的选择器类名集合。注释也可以用来解释为什么你在CSS文件中添加某选择器。这帮助其他第一次看到你的文件的人，或帮助你记忆一个主意或文件的更新。要注释被浏览器忽略，它们需要被/*和*/包括，如下

颜色格式

在CSS中指定颜色有很多种方式。最常用的是使用hex颜色。Hex颜色使用红绿蓝组合。Hex码使用16个位数代表颜色：0 1 2 3 4 5 6 7 8 9 A B C D E F。“0”是全色，“F”是无色。Hex颜色使用6或3位数（以#开头）。如#000000, #FFFFFF, #0DC5B2, #330099。

注意：前两位数是红，下面是绿，最后是蓝。